Flutter折叠菜单插件flutter_foldable_menu的使用
Flutter折叠菜单插件flutter_foldable_menu的使用
欢迎使用 flutter_foldable_menu 插件。这是一个用于创建可折叠菜单的Flutter插件。以下是该插件的使用指南。
🎨 Credits
- 感谢 [@Thomélie ISTACE](https://dribbble.com/shots/3971202-Info-navigation) 提供的精美设计。
✨ Demo
How to use
首先，你需要创建你的菜单项。每个菜单项都是一个 FoldableCell 对象，可以设置颜色、标签和图标等属性。
// 创建菜单项
List<FoldableCell> myCards = [
FoldableCell(color: Colors.yellow, label: 'close', icon: Icon(Icons.close)),
FoldableCell(color: Colors.orange, label: 'take photo', icon: Icon(Icons.camera_alt)),
FoldableCell(color: Colors.green, label: 'share', textColor: Colors.black, icon: Icon(Icons.share)),
FoldableCell(color: Colors.purple, label: 'settings', icon: Icon(Icons.settings)),
FoldableCell(color: Colors.blue, label: 'verification', icon: Icon(Icons.verified_user_rounded)),
FoldableCell(color: Colors.red, label: 'profile', icon: Icon(Icons.person))
];
// 显示菜单
Navigator.of(context).push(PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) => FoldableMenu(
myCards: myCards,
side: MenuSide.right,
textStyle: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
onCardSelect: (cell, counter) {
print('this is :$cell');
},
),
));
完整示例代码
以下是一个完整的示例代码，展示了如何在应用中集成 flutter_foldable_menu 插件。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_foldable_menu/enum/manu_slide.dart';
import 'package:flutter_foldable_menu/flutter_foldable_menu.dart';
import 'package:flutter_foldable_menu/model/cell.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Example(),
);
}
}
class Example extends StatefulWidget {
const Example({Key? key}) : super(key: key);
[@override](/user/override)
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
List<FoldableCell> myCards = [
FoldableCell(color: Colors.yellow, label: 'close', icon: Icon(Icons.close)),
FoldableCell(color: Colors.orange, label: 'take photo', icon: Icon(Icons.camera_alt)),
FoldableCell(color: Colors.green, label: 'share', textColor: Colors.black, icon: Icon(Icons.share)),
FoldableCell(color: Colors.purple, label: 'settings', icon: Icon(Icons.settings)),
FoldableCell(color: Colors.blue, label: 'verification', icon: Icon(Icons.verified_user_rounded)),
FoldableCell(color: Colors.red, label: 'profile', icon: Icon(Icons.person))
];
var listImages = [
['assets/img/image1.jpeg', 'assets/img/image2.jpeg'],
['assets/img/image3.jpeg', 'assets/img/image4.jpeg'],
['assets/img/image5.jpeg', 'assets/img/image6.jpeg']
];
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
top: true,
child: SingleChildScrollView(
child: Column(
children: [
Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: () {
Navigator.of(context).push(PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) => FoldableMenu(
myCards: myCards,
side: MenuSide.right,
textStyle: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
onCardSelect: (cell, counter) {
print('this is :$counter');
},
),
));
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
'assets/img/menu.png',
height: 30,
width: 30,
),
),
),
),
SizedBox(
height: 14,
),
Align(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Text(
'Art pictures',
style: TextStyle(fontSize: 27, color: Colors.black, fontWeight: FontWeight.bold),
),
),
),
SizedBox(
height: 14,
),
Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: listImages.length,
itemBuilder: (context, index) {
return Container(
width: double.infinity,
child: Row(
children: [
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(15))),
child: Image.asset(
listImages[index][0],
height: 200,
fit: BoxFit.cover,
),
),
),
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(15)),
child: Image.asset(
listImages[index][1],
height: 200,
fit: BoxFit.cover,
),
),
),
],
),
);
},
),
),
],
),
),
),
);
}
}
更多关于Flutter折叠菜单插件flutter_foldable_menu的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter折叠菜单插件flutter_foldable_menu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
flutter_foldable_menu 是一个用于在 Flutter 应用中创建折叠菜单的插件。它允许你创建一个可以展开和折叠的菜单，非常适合用于导航、设置选项或其他需要分组的内容。
安装
首先，你需要在 pubspec.yaml 文件中添加 flutter_foldable_menu 插件的依赖：
dependencies:
flutter:
sdk: flutter
flutter_foldable_menu: ^0.1.0 # 请检查最新版本
然后运行 flutter pub get 来安装依赖。
使用示例
以下是一个简单的示例，展示了如何使用 flutter_foldable_menu 插件来创建一个折叠菜单。
import 'package:flutter/material.dart';
import 'package:flutter_foldable_menu/flutter_foldable_menu.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Foldable Menu Example'),
),
body: FoldableMenuExample(),
),
);
}
}
class FoldableMenuExample extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return ListView(
children: [
FoldableMenu(
title: Text('Menu 1'),
children: [
ListTile(
title: Text('Item 1.1'),
onTap: () {
print('Item 1.1 tapped');
},
),
ListTile(
title: Text('Item 1.2'),
onTap: () {
print('Item 1.2 tapped');
},
),
],
),
FoldableMenu(
title: Text('Menu 2'),
children: [
ListTile(
title: Text('Item 2.1'),
onTap: () {
print('Item 2.1 tapped');
},
),
ListTile(
title: Text('Item 2.2'),
onTap: () {
print('Item 2.2 tapped');
},
),
],
),
],
);
}
}