Flutter Drawer - Can't edit colors
1,721
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,
),
));
}
Author by
WillWalsh
Updated on December 28, 2022Comments
-
WillWalsh over 1 year
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]
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, ), ), ], ), ), ), ), ); } }-
progNewbie almost 3 yearsDid you try wrapping your Drawer inside a Container and give the Container a background color? Like this
Container(child: Drawer(), color: Colors.red); -
WillWalsh almost 3 yearsI tried that however unable to set a color for the container with this method. Not sure why perhaps nested a lil to much at this point? Again really not certain why it's not working. I did use another suggestion on main.dart which did work correctly.
-
