Flutter Drawer - 无法编辑颜色
Flutter Drawer - Can't edit colors
我是 Flutter 的新手，每天都在学习，但是我的抽屉碰壁了。我之前使用过抽屉，并在网上查看了过去的代码和示例，但这些抽屉包含了几个我过去没有使用过的设计因素。抽屉代码中有这么多“层”，我无法找到正确的 place/method 来更改颜色和不透明度。
抽屉按编码工作 (open/close)，fonts/icons 正确。抽屉的页眉和正文的背景color/opacity我做不到change/edit。
如有任何帮助或建议，我们将不胜感激。我的代码可能一团糟并且充满问题，所以关于这方面的建议也会对我的学习曲线有很大帮助:)
[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 来更改抽屉的背景颜色：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: YourHomeWidget(),
theme: ThemeData.light().copyWith(
canvasColor: Colors.grey,
),
));
}
我是 Flutter 的新手，每天都在学习，但是我的抽屉碰壁了。我之前使用过抽屉，并在网上查看了过去的代码和示例，但这些抽屉包含了几个我过去没有使用过的设计因素。抽屉代码中有这么多“层”，我无法找到正确的 place/method 来更改颜色和不透明度。
抽屉按编码工作 (open/close)，fonts/icons 正确。抽屉的页眉和正文的背景color/opacity我做不到change/edit。
如有任何帮助或建议，我们将不胜感激。我的代码可能一团糟并且充满问题，所以关于这方面的建议也会对我的学习曲线有很大帮助:)
[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 来更改抽屉的背景颜色：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: YourHomeWidget(),
theme: ThemeData.light().copyWith(
canvasColor: Colors.grey,
),
));
}