Flutter Drawer-无法编辑颜色 [英] Flutter Drawer - Can't edit colors
本文介绍了Flutter Drawer-无法编辑颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对Flutter并不陌生，每天都在学习，但是我的抽屉碰壁了.我以前使用过抽屉，并且在线阅读了过去的代码和示例，但是这些抽屉包含了我过去从未使用过的一些设计因素.具有这么多的层"在抽屉代码中，我无法找到正确的位置/方法来更改颜色和不透明度.
I'm rather new to Flutter and learning through everyday however I've hit a wall with my drawers. I've worked with drawers before and have reviewed past code and examples online but these drawers incorporate several design factors that I have not used in the past. Having so many "layers" within the drawer code I am not unable to locate the correct place/method to change the colors and opacity.
抽屉按编码方式工作(打开/关闭)，并且字体/图标正确.这是我无法更改/编辑的标题和抽屉主体的背景颜色/不透明度.
The drawers work as coded (open/close) and the fonts/icons are correct. It's the background color/opacity of the header and body of the drawer I can't change/edit.
任何帮助或建议，我们将不胜感激.我的代码可能一团糟，到处都是问题，因此对此的建议也将对我的学习曲线有很大帮助:)
Any assistance or advice would be appreciated. My code may be a mess and full of problems so advice on that would also be of great assistance in my learning curve :)
[main.dart]
[main.dart]
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:welakaone/drawer/drawer.dart';
import 'package:welakaone/drawer/end_drawer.dart';
import 'package:welakaone/screens/screen_1.dart';
import 'package:welakaone/screens/screen_2.dart';
import 'package:welakaone/screens/screen_3.dart';
import 'package:welakaone/screens/screen_4.dart';
import 'package:welakaone/screens/screen_5.dart';
import 'package:welakaone/screens/screen_6.dart';
void main() => runApp(
MaterialApp(
// turns off the demo/debug banner on top right of screen
debugShowCheckedModeBanner: false,
home: BottomNavBar(),
),
);
class BottomNavBar extends StatefulWidget {
@override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
int _pageIndex = 0;
GlobalKey _bottomNavigationKey = GlobalKey();
List pages = [
MyRoute(
iconData: Icons.home,
page: Page1(),
),
MyRoute(
iconData: Icons.calendar_today,
page: Page2(),
),
MyRoute(
iconData: Icons.person,
page: Page3(),
),
MyRoute(
iconData: Icons.message_rounded,
page: Page4(),
),
MyRoute(
iconData: Icons.wash_rounded,
page: Page5(),
),
MyRoute(
iconData: Icons.construction,
page: Page6(),
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Below makes the text above title white (=dark) or black (=light)
brightness: Brightness.dark,
title: Text('WelakaOne'),
// Below makes the AppBar background a desired color
backgroundColor: Color(0xff4367b1),
leading: Builder(
builder: (context) {
return IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Scaffold.of(context).openDrawer();
},
);
},
),
actions: <Widget>[
Builder(
builder: (context) {
return IconButton(
icon: Icon(Icons.person),
onPressed: () {
Scaffold.of(context).openEndDrawer();
},
);
},
)
],
),
drawer: new MyDrawer(),
endDrawer: new MyEndDrawer(),
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
index: 0,
height: 60.0,
items: pages
.map(
(p) => Icon(
p.iconData,
size: 30,
color: Colors.white,
),
)
.toList(),
color: Color(0xff4367b1),
buttonBackgroundColor: Color(0xff4367b1),
backgroundColor: Colors.white,
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 500),
onTap: (index) {
setState(
() {
_pageIndex = index;
},
);
},
),
backgroundColor: Colors.white,
body: pages[_pageIndex].page,
);
}
}
class MyRoute {
final IconData iconData;
final Widget page;
MyRoute({this.iconData, this.page});
}
[ drawer.dart ]
import 'package:flutter/material.dart';
import 'dart:ui';
class MyDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 80),
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(250),
),
child: SizedBox(
width: 250,
child: Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
//Color(0xff4367b1)
decoration: BoxDecoration(
color: Colors.blue,
),
accountName: new Text(
'',
style: TextStyle(
fontSize: 1,
fontWeight: FontWeight.w800,
//color: Colors.grey[300],
color: Colors.black,
),
),
accountEmail: new Text(
'Modify Experiance',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w800,
color: Colors.black,
),
),
),
new ListTile(
title: new Text(
'News (gen set)',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.add_to_home_screen,
size: 26.0,
color: Colors.black,
),
),
new ListTile(
title: new Text(
'Color & Design',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.notifications,
size: 26.0,
color: Colors.black,
),
),
new ListTile(
title: new Text(
'Social Media',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.message,
size: 26.0,
color: Colors.black,
),
),
new ListTile(
title: new Text(
'Login Options',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.touch_app,
size: 26.0,
color: Colors.black,
),
),
new Divider(
color: Colors.black38,
),
new ListTile(
title: new Text(
'Close Menu',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.close,
size: 26.0,
color: Colors.black,
),
),
],
),
),
),
),
);
}
}
[ end_drawer.dart ]
import 'package:flutter/material.dart';
class MyEndDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 80),
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(250),
),
child: SizedBox(
width: 250,
child: Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text(
'',
style: TextStyle(
fontSize: 1,
fontWeight: FontWeight.w800,
color: Colors.black,
),
),
accountEmail: new Text(
'Account Settings',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w800,
color: Colors.black,
),
),
),
new ListTile(
title: new Text(
'Profile & Security',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.person,
size: 26.0,
color: Colors.black,
),
),
new ListTile(
title: new Text(
'Notifications',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.notifications,
size: 26.0,
color: Colors.black,
),
),
new ListTile(
title: new Text(
'Favorites',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.favorite,
size: 26.0,
color: Colors.black,
),
),
new Divider(
color: Colors.black38,
),
new ListTile(
title: new Text(
'About WelakaOne',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
onTap: () {
//Navigator.pushReplacementNamed(context, Routes.about);
//Navigator.popAndPushNamed(context, Routes.app1);
},
leading: new Icon(
Icons.info_outline,
size: 26.0,
color: Colors.black,
),
),
new Divider(
color: Colors.black38,
),
new ListTile(
title: new Text(
'Close Menu',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
leading: new Icon(
Icons.close,
size: 26.0,
color: Colors.black,
),
),
new ListTile(
title: new Text(
'Log Out & Exit',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
onTap: () {
Navigator.pop(context);
},
leading: new Icon(
Icons.exit_to_app,
size: 26.0,
color: Colors.black,
),
),
],
),
),
),
),
);
}
}
推荐答案
您可以通过更改main.dart中的ThemeData中的canvasColor来更改抽屉的背景颜色:
You can change the background color of the drawer by changing the canvasColor in your ThemeData in main.dart:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: YourHomeWidget(),
theme: ThemeData.light().copyWith(
canvasColor: Colors.grey,
),
));
}
这篇关于Flutter Drawer-无法编辑颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
