如何使用Flutter创建管理UI左侧菜单 [英] How to create an admin UI left menu with Flutter
本文介绍了如何使用Flutter创建管理UI左侧菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新手，但我有好奇心.考虑到可以在网上找到的典型引导管理UI和典型的左侧菜单，如何用flutter重新创建它?我对左菜单可以调整大小，单击按钮以及可以显示和消失的子菜单特别感兴趣.
可以在
关于左侧菜单，我使用了 AnimatedSize 小部件来赋予滑动抽屉以&将其放在 Row 内.
请在下面找到代码:
import'package:flutter/material.dart';最后的颜色darkBlue = Color.fromARGB(255，18，32，47);void main(){runApp(MyApp());}MyApp类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回MaterialApp(主题:ThemeData.dark().copyWith(scaffoldBackgroundColor:darkBlue)，debugShowCheckedModeBanner:否，家:脚手架(身体:中心(子代:MyWidget()，)，)，);}}类MyWidget扩展了StatefulWidget {@override_MyWidgetState createState()=>_MyWidgetState();}类_MyWidgetState扩展了State< MyWidget>与SingleTickerProviderStateMixin {最终颜色=< Color> [Colors.indigo，Colors.blue，Colors.orange，Colors.red]；double _size = 250.0;bool _large = true;无效_updateSize(){setState((){_size = _large?250.0:0.0；_large =！_large;});}@override窗口小部件build(BuildContext context){返回脚手架(正文:行(孩子们: [AnimatedSize(曲线:Curves.easeIn，vsync:这个，持续时间:持续时间(秒:1)，子级:LeftDrawer(size:_size))，展开(弹性:4，子代:集装箱(子:列(孩子们: [容器(颜色:Colors.white，填充:const EdgeInsets.all(8)，子级:Row(孩子们: [IconButton(图标:Icon(Icons.menu，颜色:Colors.black87)，onPressed:(){_updateSize();}，)，FlatButton(子代:文字('仪表盘'，样式:const TextStyle(color:Colors.black87)，)，onPressed:(){}，)，FlatButton(子代:文字('用户'，样式:const TextStyle(color:Colors.black87)，)，onPressed:(){}，)，FlatButton(子代:文字(设置"，样式:const TextStyle(color:Colors.black87)，)，onPressed:(){}，)，const Spacer()，IconButton(图标:Icon(Icons.brightness_3，颜色:Colors.black87)，onPressed:(){}，)，IconButton(图标:Icon(Icons.notification_important，颜色:Colors.black87)，onPressed:(){}，)，CircleAvatar()，]，)，)，容器(高度:1颜色:Colors.black12，)，卡片(边距:EdgeInsets.zero，形状:RoundedRectangleBorder(borderRadius:BorderRadius.circular(0)，)，子代:集装箱(颜色:Colors.white，填充:const EdgeInsets.all(20)，子级:Row(孩子们: [文本(首页/管理员/仪表板"，样式:const TextStyle(颜色:Colors.black)，)，]，)，)，)，展开(子级:ListView(孩子们: [排(孩子们: [_container(0)，_container(1)，_container(2)，_container(3)，]，)，容器(高度:400，颜色:颜色(0xFFE7E7E7)，填充:const EdgeInsets.all(16)，子卡:颜色:Colors.white，子代:集装箱(填充:const EdgeInsets.all(16)，子代:文字('交通'，样式:const TextStyle(color:Colors.black87)，)，)，)，)，]，)，)，]，)，)，)，]，)，);}窗口小部件_container(int index){返回Expanded(子代:集装箱(填充:const EdgeInsets.all(20)，颜色:颜色(0xFFE7E7E7)，子卡:颜色:颜色(0xFFE7E7E7)，子代:集装箱(颜色:颜色[索引]，宽度:250，高度:140，填充:const EdgeInsets.all(20)，子:列(crossAxisAlignment:CrossAxisAlignment.start，孩子们: [排(孩子们: [展开(子代:文字('9.823'，样式:TextStyle(fontSize:24)，))，图标(Icons.more_vert)，]，)，文字(在线会员")]，)，)，)，)，);}}类LeftDrawer扩展StatelessWidget {const LeftDrawer({关键这个大小，}):super(key:key);最终双倍大小；@override窗口小部件build(BuildContext context){返回Expanded(弹性:1，子代:集装箱(宽度:大小，颜色:const Color(0xFF2C3C56)，子级:ListView(孩子们: [容器(对齐方式:Alignment.center，填充:const EdgeInsets.all(16)，颜色:颜色(0xFF223047)，子级:Text('CORE UI')，)，_tile('Dashboard')，容器(填充:const EdgeInsets.only(left:10)，保证金:const EdgeInsets.only(top:30)，子代:Text('THEME'，样式:TextStyle(颜色:Colors.white54，)))，_tile('Colors')，_tile('Typography')，_tile('Base')，_tile('Buttons')，]，)，)，);}小部件_tile(字符串标签){返回ListTile(标题:文字(标签)，onTap :(){}，);}} I'm new to flutter but I have a curiosity. Considering the typical bootstrap admin UI that you can find online and the typical left menu, how would you recreate that with flutter? I'm particularly interested on a left menu that can be resized clicking on a button and on a sub-menu that can appear and disappear.
An example can be found here
Edit:
I want to be be clear about the effect I'm trying to reproduce as well. If you click the link relative to the example on the left you see a number of menu. For instance, clicking on Base you are going to see a vertical menu appearing and disappearing. I would like to know how to reproduce it as well.
Thanks
Thanks
解决方案
I have tried to re-create the same design with some minor changes in Flutter. I have to enable flutter web support by following the instructions here: Flutter Web
Regarding the left menu, I have used AnimatedSize widget to give the sliding drawer feel & placed it inside Row.
Please find the code below:
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget>
with SingleTickerProviderStateMixin {
final colors = <Color>[Colors.indigo, Colors.blue, Colors.orange, Colors.red];
double _size = 250.0;
bool _large = true;
void _updateSize() {
setState(() {
_size = _large ? 250.0 : 0.0;
_large = !_large;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
AnimatedSize(
curve: Curves.easeIn,
vsync: this,
duration: Duration(seconds: 1),
child: LeftDrawer(size: _size)),
Expanded(
flex: 4,
child: Container(
child: Column(
children: [
Container(
color: Colors.white,
padding: const EdgeInsets.all(8),
child: Row(
children: [
IconButton(
icon: Icon(Icons.menu, color: Colors.black87),
onPressed: () {
_updateSize();
},
),
FlatButton(
child: Text(
'Dashboard',
style: const TextStyle(color: Colors.black87),
),
onPressed: () {},
),
FlatButton(
child: Text(
'User',
style: const TextStyle(color: Colors.black87),
),
onPressed: () {},
),
FlatButton(
child: Text(
'Settings',
style: const TextStyle(color: Colors.black87),
),
onPressed: () {},
),
const Spacer(),
IconButton(
icon: Icon(Icons.brightness_3, color: Colors.black87),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.notification_important,
color: Colors.black87),
onPressed: () {},
),
CircleAvatar(),
],
),
),
Container(
height: 1,
color: Colors.black12,
),
Card(
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
color: Colors.white,
padding: const EdgeInsets.all(20),
child: Row(
children: [
Text(
'Home / Admin / Dashboard',
style: const TextStyle(color: Colors.black),
),
],
),
),
),
Expanded(
child: ListView(
children: [
Row(
children: [
_container(0),
_container(1),
_container(2),
_container(3),
],
),
Container(
height: 400,
color: Color(0xFFE7E7E7),
padding: const EdgeInsets.all(16),
child: Card(
color: Colors.white,
child: Container(
padding: const EdgeInsets.all(16),
child: Text(
'Traffic',
style: const TextStyle(color: Colors.black87),
),
),
),
),
],
),
),
],
),
),
),
],
),
);
}
Widget _container(int index) {
return Expanded(
child: Container(
padding: const EdgeInsets.all(20),
color: Color(0xFFE7E7E7),
child: Card(
color: Color(0xFFE7E7E7),
child: Container(
color: colors[index],
width: 250,
height: 140,
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
'9.823',
style: TextStyle(fontSize: 24),
)),
Icon(Icons.more_vert),
],
),
Text('Members online')
],
),
),
),
),
);
}
}
class LeftDrawer extends StatelessWidget {
const LeftDrawer({
Key key,
this.size,
}) : super(key: key);
final double size;
@override
Widget build(BuildContext context) {
return Expanded(
flex: 1,
child: Container(
width: size,
color: const Color(0xFF2C3C56),
child: ListView(
children: [
Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(16),
color: Color(0xFF223047),
child: Text('CORE UI'),
),
_tile('Dashboard'),
Container(
padding: const EdgeInsets.only(left: 10),
margin: const EdgeInsets.only(top: 30),
child: Text('THEME',
style: TextStyle(
color: Colors.white54,
))),
_tile('Colors'),
_tile('Typography'),
_tile('Base'),
_tile('Buttons'),
],
),
),
);
}
Widget _tile(String label) {
return ListTile(
title: Text(label),
onTap: () {},
);
}
}
这篇关于如何使用Flutter创建管理UI左侧菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
