Expandable menu - An expandable menu with infinite horizontal item list with high customizable ability
expandable_menu
Expandable menu is an expandable menu with infinite horizontal item list with high customizable ability.
Preview
| Property | Description |
|---|---|
width |
This property declare width of widget when it’s not expanded in initial state |
height |
This property declare height of widget |
items |
This property will contains items in list of menu |
backgroundColor |
This property declare background color of widget and default value is [Color(0xFF4B5042)] |
iconColor |
This property declare icon color of both icon(Arrow icon and Hamburger icon) |
itemContainerColor |
This property declare item background color and if it’s be null default value is [Colors.white.withOpacity(.4)] |
Usage
import 'package:expandable_menu/expandable_menu.dart';
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key? key,
}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF9FB373),
body: ListView(
padding: const EdgeInsets.symmetric(vertical: 100.0),
children: [
Center(
child: SizedBox(
height: 400.0,
width: 290.0,
child: Stack(
children: [
Positioned(
top: 23.0,
right: 23.0,
left: 23.0,
bottom: 0.0,
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(16.0),
),
),
),
),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: ExpandableMenu(
width: 46.0,
height: 46.0,
items: [
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
],
)),
],
),
)),
const SizedBox(
height: 40,
),
Center(
child: SizedBox(
height: 200.0,
width: 200.0,
child: Stack(
children: [
Positioned(
top: 20.0,
right: 20.0,
left: 20.0,
bottom: 0.0,
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(16.0),
),
),
),
),
const Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: ExpandableMenu(
width: 40.0,
height: 40.0,
items: [
Icon(
Icons.add,
color: Colors.white,
),
Icon(
Icons.access_alarm,
color: Colors.white,
),
Icon(
Icons.accessible_forward,
color: Colors.white,
),
Icon(
Icons.accessibility_new_sharp,
color: Colors.white,
),
],
)),
],
),
)),
const SizedBox(
height: 40,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: SizedBox(
height: 200.0,
child: Stack(
children: [
Positioned(
top: 20.0,
right: 20.0,
left: 20.0,
bottom: 0.0,
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(16.0),
),
),
),
),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: ExpandableMenu(
width: 40.0,
height: 40.0,
backgroundColor: Colors.black,
iconColor: Colors.amber,
itemContainerColor: Colors.amber,
items: [
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
Container(),
],
)),
],
),
)),
],
),
);
}
}
thanks to https://dribbble.com/Volorf for nice design.