expandable_menu

Description:

expandable menu

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(),
],
)),
],
),
)),
],
),
);
}
}


copied to clipboard
thanks to https://dribbble.com/Volorf for nice design.