flutter_menu_list

Description:

flutter menu list

flutter_menu_list #
A widget that provides a simple menu list.

Features #

iOS like menu list display
Support for dark themes

Usage #
Simple #
import 'package:flutter_menu_list/flutter_menu_list.dart';

MenuListContainer(
sections: [
MenuListSection(
title: MenuListSectionTitle(title: 'First Title'),
menus: [
MenuListContent(
leading: Icon(
Icons.ac_unit,
color: Colors.white,
size: 20,
),
title: Text('Title1'),
onTap: () {},
),
MenuListContent(
title: Text('Title2'),
onTap: () {},
),
],
),
MenuListSection(
title: MenuListSectionTitle(title: 'Second Title'),
menus: [
MenuListContent(
title: Text('Display of very long titles'),
subTitle: MenuListSubTitle('Display of very long sub titles'),
onTap: () {},
),
MenuListContent(
title: Text('Title4'),
trailing: SizedBox(
height: 20,
child: CupertinoSwitch(
value: true,
onChanged: (value) {},
),
),
),
],
),
MenuListSection(
title: MenuListSectionTitle(
title: 'Third Title',
padding: const EdgeInsets.only(
left: 15,
top: 8,
bottom: 8,
),
),
lineIndent: 0,
menus: [
MenuListContent(
leadingSpace: 15,
title: Text('Display of very long titles'),
subTitle: MenuListSubTitle('Display of very long sub titles'),
onTap: () {},
),
MenuListContent(
leadingSpace: 15,
title: Text('Title4'),
trailing: SizedBox(
height: 20,
child: CupertinoSwitch(
value: true,
onChanged: (value) {},
),
),
),
],
),
],
);
copied to clipboard
In Column #
Column(
children: [
Container(
padding: const EdgeInsets.all(10),
child: const Text(
'Example App',
style: TextStyle(
fontSize: 20,
),
),
),
/// Wrapping it up is important.
const Expanded(
child: MenuListContainer(
sections: [
MenuListSection(
title: MenuListSectionTitle(title: 'Drawer Menu'),
menus: [
MenuListContent(
title: Text('Title'),
),
],
)
],
),
),
],
);
copied to clipboard
Customizing the theme #
// You can customize the default theme with copyWith
final customeLightTheme = MenuListThemes.lightTheme.copyWith();
final customeDarkTheme = MenuListThemes.darkTheme.copyWith();

// You can also customize it with your own theme.
final customizedTheme = ThemeData(
// background color
backgroundColor: Colors.white,
// menu list content background color
primaryColor: Colors.grey,
textTheme: TextTheme(
// [Text] Widget Styles
bodyText1: TextStyle(),
// Android subtitle style [WIP]
subtitle1: TextStyle(),
// iOS subtitle style
subtitle2: TextStyle(),
),
// [Icon] Widget
iconTheme: IconThemeData(),
// Seprator line color
dividerColor: Colors.black,
);
copied to clipboard
Apply the customized theme. #
MenuListContainer(
// light theme
theme: customizedTheme,
// dark theme
darkTheme: customizedTheme,
);
copied to clipboard
Back me up! #

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter