Flutter侧边菜单插件easy_sidemenu_plus_plus的使用
Flutter侧边菜单插件easy_sidemenu_plus_plus的使用
Easy Sidemenu
Easy sidemenu 是一个用于 Flutter 的简单易用的侧边菜单（栏），您可以将其用于应用程序中的导航。
侧边菜单通常位于页面的左侧或右侧，并可用于导航或其他用途。侧边菜单类似于底部导航栏，但位于屏幕的一侧，通常用于更大的屏幕。
截图
打开状态
| 打开 |
|---|
 |
收起状态
| 收起 |
|---|
 |
自动模式
| 自动模式 |
|---|
 |
使用示例
以下是使用 easy_sidemenu_plus_plus 插件的完整示例：
import 'package:easy_sidemenu_plus_plus/easy_sidemenu_plus_plus.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'easy_sidemenu_plus_plus Demo',
theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: false),
home: const MyHomePage(title: 'easy_sidemenu_plus_plus Demo'),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
PageController pageController = PageController();
SideMenuController sideMenu = SideMenuController();
[@override](/user/override)
void initState() {
sideMenu.addListener((index) {
pageController.jumpToPage(index);
});
super.initState();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
centerTitle: true,
),
body: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SideMenu(
controller: sideMenu,
style: SideMenuStyle(
// showTooltip: false,
displayMode: SideMenuDisplayMode.auto,
showHamburger: true,
hoverColor: Colors.blue[100],
selectedHoverColor: Colors.blue[100],
selectedColor: Colors.lightBlue,
selectedTitleTextStyle: const TextStyle(color: Colors.white),
selectedIconColor: Colors.white,
// decoration: BoxDecoration(
// borderRadius: BorderRadius.all(Radius.circular(10)),
// ),
// backgroundColor: Colors.grey[200]
),
title: Column(
children: [
ConstrainedBox(
constraints: const BoxConstraints(
maxHeight: 150,
maxWidth: 150,
),
child: Image.asset(
'assets/images/easy_sidemenu_plus_plus.png',
),
),
const Divider(
indent: 8.0,
endIndent: 8.0,
),
],
),
footer: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Colors.lightBlue[50],
borderRadius: BorderRadius.circular(12)),
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 4, horizontal: 10),
child: Text(
'mohada',
style: TextStyle(fontSize: 15, color: Colors.grey[800]),
),
),
),
),
items: [
SideMenuItem(
title: 'Dashboard',
onTap: (index, _) {
sideMenu.changePage(index);
},
icon: const Icon(Icons.home),
badgeContent: const Text(
'3',
style: TextStyle(color: Colors.white),
),
tooltipContent: "This is a tooltip for Dashboard item",
),
SideMenuItem(
title: 'Users',
onTap: (index, _) {
sideMenu.changePage(index);
},
icon: const Icon(Icons.supervisor_account),
),
SideMenuExpansionItem(
title: "Expansion Item",
icon: const Icon(Icons.kitchen),
children: [
SideMenuItem(
title: 'Expansion Item 1',
onTap: (index, _) {
sideMenu.changePage(index);
},
icon: const Icon(Icons.home),
badgeContent: const Text(
'3',
style: TextStyle(color: Colors.white),
),
tooltipContent: "Expansion Item 1",
),
SideMenuItem(
title: 'Expansion Item 2',
onTap: (index, _) {
sideMenu.changePage(index);
},
icon: const Icon(Icons.supervisor_account),
)
],
),
SideMenuItem(
title: 'Files',
onTap: (index, _) {
sideMenu.changePage(index);
},
icon: const Icon(Icons.file_copy_rounded),
trailing: Container(
decoration: const BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.all(Radius.circular(6))),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 6.0, vertical: 3),
child: Text(
'New',
style: TextStyle(fontSize: 11, color: Colors.grey[800]),
),
)),
),
SideMenuItem(
title: 'Download',
onTap: (index, _) {
sideMenu.changePage(index);
},
icon: const Icon(Icons.download),
),
SideMenuItem(
builder: (context, displayMode) {
return const Divider(
endIndent: 8,
indent: 8,
);
},
),
SideMenuItem(
title: 'Settings',
onTap: (index, _) {
sideMenu.changePage(index);
},
icon: const Icon(Icons.settings),
),
// SideMenuItem(
// onTap:(index, _){
// sideMenu.changePage(index);
// },
// icon: const Icon(Icons.image_rounded),
// ),
// SideMenuItem(
// title: 'Only Title',
// onTap:(index, _){
// sideMenu.changePage(index);
// },
// ),
const SideMenuItem(
title: 'Exit',
icon: Icon(Icons.exit_to_app),
),
],
),
const VerticalDivider(
width: 0,
),
Expanded(
child: PageView(
controller: pageController,
children: [
Container(
color: Colors.white,
child: const Center(
child: Text(
'Dashboard',
style: TextStyle(fontSize: 35),
),
),
),
Container(
color: Colors.white,
child: const Center(
child: Text(
'Users',
style: TextStyle(fontSize: 35),
),
),
),
Container(
color: Colors.white,
child: const Center(
child: Text(
'Expansion Item 1',
style: TextStyle(fontSize: 35),
),
),
),
Container(
color: Colors.white,
child: const Center(
child: Text(
'Expansion Item 2',
style: TextStyle(fontSize: 35),
),
),
),
Container(
color: Colors.white,
child: const Center(
child: Text(
'Files',
style: TextStyle(fontSize: 35),
),
),
),
Container(
color: Colors.white,
child: const Center(
child: Text(
'Download',
style: TextStyle(fontSize: 35),
),
),
),
// this is for SideMenuItem with builder (divider)
const SizedBox.shrink(),
Container(
color: Colors.white,
child: const Center(
child: Text(
'Settings',
style: TextStyle(fontSize: 35),
),
),
),
],
),
),
],
),
);
}
}
更多关于Flutter侧边菜单插件easy_sidemenu_plus_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter侧边菜单插件easy_sidemenu_plus_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用easy_sidemenu_plus_plus插件的一个示例代码案例。这个插件允许你轻松地创建一个带有侧边菜单的应用程序。
首先，确保你已经在pubspec.yaml文件中添加了easy_sidemenu_plus_plus依赖：
dependencies:
flutter:
sdk: flutter
easy_sidemenu_plus_plus: ^最新版本号 # 请替换为最新的版本号
然后运行flutter pub get来安装依赖。
接下来，创建一个简单的Flutter应用来使用easy_sidemenu_plus_plus。以下是一个完整的示例代码：
import 'package:flutter/material.dart';
import 'package:easy_sidemenu_plus_plus/easy_sidemenu_plus_plus.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Easy Side Menu Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<EasySideMenuControllerState> _sideMenuController = GlobalKey();
@override
Widget build(BuildContext context) {
return EasySideMenu(
key: _sideMenuController,
controller: _sideMenuController,
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
Navigator.pop(context);
// 你可以在这里添加跳转到Home页面的逻辑
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
Navigator.pop(context);
// 你可以在这里添加跳转到Settings页面的逻辑
},
),
],
),
),
mainScreen: Scaffold(
appBar: AppBar(
title: Text('Main Screen'),
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
_sideMenuController.currentState?.openDrawer();
},
),
),
body: Center(
child: Text('Welcome to Flutter Easy Side Menu Example!'),
),
),
);
}
}
解释
- 依赖引入：在
pubspec.yaml文件中添加easy_sidemenu_plus_plus依赖。 - 主应用：
MyApp类定义了一个基本的MaterialApp。 - 主页面：
MyHomePage是一个有状态的Widget，包含一个EasySideMenu组件。 - 侧边菜单：在
drawer属性中，我们定义了一个简单的Drawer，包含两个ListTile，分别表示“Home”和“Settings”。 - 主屏幕：在
mainScreen属性中，我们定义了一个包含AppBar和中心文本的Scaffold。AppBar的leading属性包含一个打开侧边菜单的IconButton。
运行应用
确保你已经正确设置了Flutter开发环境，然后运行以下命令来启动应用：
flutter run
这个示例展示了如何使用easy_sidemenu_plus_plus插件创建一个带有侧边菜单的Flutter应用。你可以根据需要进一步定制和扩展这个示例。
