Custom drawer icon flutter - flutter

I'm trying to make the drawer icon bigger than the default size and I'm using width: MediaQuery.of (context) .size.width * 0.85 but it doesn't work and I don't know why. Then I'd like to have ListView coming from the left and not the right, but I need the menu icon to be on the right. How can I do this?
endDrawer: Container(
width: MediaQuery.of(context).size.width * 0.85,
child: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.deepOrange,
),
child: Text(
'Drawer Header',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.message),
title: Text('Messages'),
onTap: () {
Navigator.push(context,MaterialPageRoute(builder: (context) => StantonPlanet()));
}
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text('Profile'),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
),
],
),
),


I've found a fix
appBar: AppBar(
automaticallyImplyLeading: false,
//backgroundColor: red,
toolbarHeight: 120,
centerTitle: false,
actions: [
IconButton(
icon: Icon(Icons.menu_rounded),
iconSize: 35,
onPressed: () => _scaffoldKey.currentState!.openDrawer()
),
],
leading: IconButton(
icon: Icon(Icons.arrow_back),
iconSize: 35,
onPressed: () => Navigator.of(context).pop(),
),
title: Text('App Bar', style: TextStyle(color: white, fontSize: 30,),),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(30),
),
),
),


Scaffold(
appBar: AppBar(
title:Text('hi'),
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () => Scaffold.of(context).openDrawer(),
),
),

Related

Am I adding radius to the appBar or the Container on this please ? I need the appbar to slant like this

return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150),
child: AppBar(
elevation: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.black,
onPressed: () {},
),
actions: [
TextButton(
onPressed: () {},
child: Text(
'Skip',
style: GoogleFonts.halant(
textStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
),
),
],
backgroundColor: Colors.amber,
title: Text(
'Sign up',
style: GoogleFonts.halant(
textStyle: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w500,
color: Colors.black
),
),
),
centerTitle: true,

you don't need to use AppBar widget to do this, you need to make it manually by assigning a Container to the body of the Scaffold and assign a backGroundImage to the Container. then give the Container a Column as a child and using a Row widget on the top and give it the three children ( the skip text - sign up text - the arrow ) you get the AppBar and for white Container give it a BorderRadius.only

This is a full example of what you want:
Scaffold(
body: Stack(
fit: StackFit.expand,
children: [
ColorFiltered(
colorFilter: ColorFilter.mode(Colors.amber, BlendMode.color),
child: Image.asset(
'assets/images/test.jpeg',
fit: BoxFit.cover,
),
),
Column(
children: [
AppBar(
elevation: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.black,
onPressed: () {},
),
actions: [
TextButton(
onPressed: () {},
child: Text(
'Skip',
style: TextStyle(color: Colors.black),
),
),
],
backgroundColor: Colors.transparent,
title: Text(
'Sign up',
style: TextStyle(color: Colors.black),
),
centerTitle: true,
),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(60)),
color: Colors.white,
),
)),
],
)
],
),
),

Align drawer list tile at the bottom of the drawer

I've created a drawer for my app.It works fine but Im unable to align the logout button to the bottom of the drawer.Ive tried the align widget,it didnt work.Tried align widget inside an expanded widget,still didnt work.Almost tried everything that I could find.Dont know why it wont align.Please help.
drawer: Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
child: Align(
alignment: Alignment.topLeft,
child: Container(
child: Column(
children: [
CircleAvatar(
backgroundColor: Colors.yellow,
child: const Text('USER'),
radius: 25,
),
Text(name),
Text(email)
],
),
),
),
),
ListTile(
title: Text("Settings",style:TextStyle(fontWeight: FontWeight.bold),),
trailing: Icon(Icons.settings),
onTap: () {
context.read<NavCubit>().showHome();
Navigator.pop(context);
},
),
Container(
height: 1.0,
width: MediaQuery.of(context).size.width,
color: Colors.tealAccent,
),
ListTile(
title: Text("Learning",style:TextStyle(fontWeight: FontWeight.bold),),
trailing: Icon(Icons.book),
onTap: () {
context.read<NavCubit>().showContracts();
},
),
Container(
height: 1.0,
width: MediaQuery.of(context).size.width,
color: Colors.tealAccent,
),
Align(
alignment: Alignment.bottomCenter,
child: ListTile(
title: Text("Log Out",style:TextStyle(fontWeight: FontWeight.bold),),
trailing: Icon(Icons.logout),
onTap: () {
context.read<NavCubit>().showContracts();
},
),
),
],
),

Refer below code hope it help to you.
drawer: Container(
width: 250,
child: Drawer(
//drawer Code
child: Column(
children: <Widget>[
ListTile(
hoverColor: Colors.blue,
dense: true,
visualDensity: VisualDensity(vertical: -4),
leading: Icon(
Icons.show_chart,
color: Colors.black,
),
title: Text('All Leads'),
onTap: () {},
),
Divider(
color: Colors.grey,
),
ListTile(
hoverColor: Colors.blue,
dense: true,
visualDensity: VisualDensity(vertical: -4),
leading: Icon(
Icons.bar_chart_rounded,
color: Colors.black,
),
title: Text('Graphs'),
onTap: () { },
),
Divider(
color: Colors.grey,
),
ListTile(
hoverColor: Colors.blue,
dense: true,
visualDensity: VisualDensity(vertical: -4),
leading: Icon(
Icons.group,
color: Colors.black,
),
title: Text('Agents'),
onTap: () {},
),
Divider(
color: Colors.grey,
),
ListTile(
hoverColor: Colors.blue,
dense: true,
visualDensity: VisualDensity(vertical: -4),
leading: Icon(
Icons.book,
color: Colors.black,
),
title: Text('About Us'),
onTap: () {},
),
Divider(
color: Colors.grey,
),
Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: ListTile(
hoverColor: Colors.blue,
dense: true,
visualDensity: VisualDensity(vertical: -4),
leading: Icon(
Icons.logout,
color: Colors.black,
),
title: Text('Logout'),
onTap: () {},
),
),
),
],
),
),
),
Your Drawer Look like this->

drawer: Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
child: Align(
alignment: Alignment.topLeft,
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(
backgroundColor: Colors.yellow,
child: const Text('USER'),
radius: 25,
),
Text(name),
Text(email)
],
),
),
),
),
ListTile(
title: Text("Settings",style:TextStyle(fontWeight: FontWeight.bold),),
trailing: Icon(Icons.settings),
onTap: () {
context.read<NavCubit>().showHome();
Navigator.pop(context);
},
),
Container(
height: 1.0,
width: MediaQuery.of(context).size.width,
color: Colors.tealAccent,
),
ListTile(
title: Text("Learning",style:TextStyle(fontWeight: FontWeight.bold),),
trailing: Icon(Icons.book),
onTap: () {
context.read<NavCubit>().showContracts();
},
),
//code change and use Divider widget for gap/space bw widgets rather than Container
Expanded(
child: Container(
width: MediaQuery.of(context).size.width,
color: Colors.tealAccent,
)
),
ListTile(
title: Text("Log Out",style:TextStyle(fontWeight: FontWeight.bold),),
trailing: Icon(Icons.logout),
onTap: () {
context.read<NavCubit>().showContracts();
},
),
],
),

How can i change to my drawerMenuBar background colors in flutter?

Below is my code, i've been able to change the drawerheader to black, but the when i did color: Colors.grey[800] for the listtiles, only it's area is covered in grey, the remaining extra space is white..
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
Container(
height: 130,
child: DrawerHeader(
child: new Text(
'Hi Bolade',
style: TextStyle(color: Colors.white),
),
decoration: BoxDecoration(
color: Colors.black,
),
),
),
Container(
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
decoration: BoxDecoration(
color: Colors.grey[800],
),
child: Column(
children: [
ListTile(
leading: Icon(Icons.home),
title: Text('Dashboard'),
onTap: () {},
),
ListTile(
leading: FaIcon(FontAwesomeIcons.tree),
title: Text('Savings'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.trending_up),
title: Text('Investments'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.account_box_sharp),
title: Text('Products'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.wallet_membership),
title: Text('Wallet'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.card_giftcard),
title: Text('Cards & Bank'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.card_giftcard),
title: Text('Share & Earn'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.chat),
title: Text('Support'),
onTap: () {},
),
],
),
),
],
),
),
enter image description here
Image of the current state here below

just wrap your Driver with Theme widget and replace canvasColor
drawer: Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.grey[800]),
child: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
Container(
height: 130,
child: DrawerHeader(
child: Text('Hi Bolade', style: TextStyle(color: Colors.white)),
decoration: BoxDecoration(color: Colors.black),
),
),
Column(
children: [
ListTile(
leading: Icon(Icons.home),
title: Text('Dashboard'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.trending_up),
title: Text('Savings'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.trending_up),
title: Text('Investments'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.account_box_sharp),
title: Text('Products'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.wallet_membership),
title: Text('Wallet'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.card_giftcard),
title: Text('Cards & Bank'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.card_giftcard),
title: Text('Share & Earn'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.chat),
title: Text('Support'),
onTap: () {},
),
],
),
],
),
),
),
also in this case you don't need Container above Column anymore

Keep your listview inside a Container and give a color to this container.
Container(
color: Colors.grey[800]
child: ListView(
....
)
)

I didn't get you question completely .....But I'm guessing that the header is black as expected, but only the tiles are covered in the grey color and the remaining space is white.(the default color).
If this is the case then you can maybe wrap your listview with a container and give it the grey color. By doing this the newly added grey container will act as a background color.

Keep your listview inside a Container and give a color to this container.
Container(
height: MediaQuery.of(context).size.height,
color: Colors.grey[800]
child: ListView(
....
)
)

Align Property is not working in ListView in Flutter

I want one of my Menu item to be placed at the bottom the Drawer Menu(Specifically Logout, to be at the bottom of the Menu). I'm trying to use Align widget but not able to do so, even I've tried wrapping it inside Expanded widget after watching many solutions but still not able to fix it.
Here is my Code:
drawer: Drawer(
child: Expanded(
child: ListView(
padding: EdgeInsets.all(0.0),
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.black),
accountName: _userName!=null?Text(_userName,):Container(),
accountEmail: _userNumber!=null?Text(_userNumber):Container(),
currentAccountPicture: CircleAvatar(
backgroundColor:
Theme.of(context).platform == TargetPlatform.iOS
? Colors.blue
: Colors.white,
child:_userName!=null? Text(
"${_userName[0]}",
style: TextStyle(fontSize: 40.0,color: Colors.black),
):Container(),
),
),
InkWell(
onTap: (){
print('Home');
Navigator.pop(context);
},
child: ListTile(
title: Text("Home",),
leading: Icon(Icons.home,color: Colors.black,),
),
),
InkWell(
onTap: (){
print('My Orders');
Navigator.push(context, MaterialPageRoute(
builder: (context)=>OrderScreen(Pin:_userPin,Number:_userNumber)
));
},
child: ListTile(
title: Text("My Orders"),
leading: Icon(Icons.fastfood,color: Colors.black,),
),
),
InkWell(
onTap: (){
print('My Address');
},
child: ListTile(
title: Text("My Address"),
leading: Icon(Icons.location_on,color: Colors.black,),
),
),
InkWell(
onTap: (){
print('My Cart');
Navigator.pop(context);
},
child:
ListTile(
title: Text("My Cart"),
leading: Icon(Icons.shopping_cart,color: Colors.black,),
),
),
ListTile(
title: Text("Help"),
leading: Icon(Icons.help,color: Colors.black,),
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: ListTile(
title: Text("Logout"), //<-- I want this to be at the bottom.
leading: Icon(Icons.exit_to_app,color: Colors.black,),
),
),
),
],
),
),
),

Just check out this example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Sample app'),),
drawer: Drawer(
child: Column(
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.black),
accountName: Text('Username'),
accountEmail: Text('UserEmail'),
currentAccountPicture: CircleAvatar(
backgroundColor:
Theme.of(context).platform == TargetPlatform.iOS
? Colors.blue
: Colors.white,
child: Text(
"sample name",
style: TextStyle(fontSize: 10.0, color: Colors.black),
),
),
),
InkWell(
onTap: () {
print('Home');
Navigator.pop(context);
},
child: ListTile(
title: Text(
"Home",
),
leading: Icon(
Icons.home,
color: Colors.black,
),
),
),
InkWell(
onTap: () {
print('My Orders');
/* Navigator.push(context, MaterialPageRoute(
builder: (context)=>OrderScreen(Pin:_userPin,Number:_userNumber)
)); */
},
child: ListTile(
title: Text("My Orders"),
leading: Icon(
Icons.fastfood,
color: Colors.black,
),
),
),
InkWell(
onTap: () {
print('My Address');
},
child: ListTile(
title: Text("My Address"),
leading: Icon(
Icons.location_on,
color: Colors.black,
),
),
),
InkWell(
onTap: () {
print('My Cart');
Navigator.pop(context);
},
child: ListTile(
title: Text("My Cart"),
leading: Icon(
Icons.shopping_cart,
color: Colors.black,
),
),
),
ListTile(
title: Text("Help"),
leading: Icon(
Icons.help,
color: Colors.black,
),
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: ListTile(
title:
Text("Logout"), //<-- I want this to be at the bottom.
leading: Icon(
Icons.exit_to_app,
color: Colors.black,
),
),
),
),
],
),
),
body: Text('Sample'),
));
}
}
Change this according to your data and just replace the listview with the Column widget.
And Let me know if it works.

Flutter: Navigation drawer with expansion tile

I`m trying to build a navigation drawer with expansion tile, when i click on the header it collapse and vice versa
but when i set the the drawer header as a child of ExpansionTile, original header padding is lost
Widget _buildDrawer() {
return Drawer(
child: ExpansionTile(
title: UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.deepPurple),
accountName: Text("Mohamed Ali"),
accountEmail: Text("mohamed.ali6996#hotmail.com"),
currentAccountPicture: CircleAvatar(
child: Text("M"),
backgroundColor: Colors.white,
),
),
children: <Widget>[
ListTile(
title: Text("page one"),
trailing: Icon(Icons.android),
onTap: () => _onSelectedItem(0),
),
ListTile(
title: Text("page two"),
trailing: Icon(Icons.accessible),
onTap: () => _onSelectedItem(1),
),
Divider(),
ListTile(
title: Text("Log out"),
trailing: Icon(Icons.exit_to_app),
),
],
initiallyExpanded: false,
)
);
}

The problem is that the header takes the place of the first tile in the ExpansionTile.
One possible solution is to use a Stack and tweak the content with an Align so the expansion icon is at the bottom of the header.
Changing the color of the expanding icon may not work for you. There is a reported issue here for which I have already submitted a PR here. Don't know when it will land in master.
_buildDrawer(BuildContext context) {
ThemeData theme = Theme.of(context);
return Drawer(
child: Stack(
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.indigo),
),
Positioned(
top: 120.0,
left: 0.0,
right: 0.0,
child: Theme(
data: theme.copyWith(
textTheme: theme.textTheme.copyWith(
subhead: theme.textTheme.subhead.copyWith(
color: Colors.grey,
),
),
accentColor: Colors.white,
unselectedWidgetColor: Colors.grey,
iconTheme: theme.iconTheme.copyWith(color: Colors.white),
dividerColor: Colors.transparent,
),
child: ExpansionTile(
title: Align(
heightFactor: 0.4,
alignment: Alignment.bottomCenter,
child: UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.transparent),
accountName: Text("Mohamed Ali"),
accountEmail: Text("mohamed.ali6996#hotmail.com"),
currentAccountPicture: CircleAvatar(
child: Text("M"),
backgroundColor: Colors.white,
),
),
),
children: <Widget>[
ListTile(
title: Text("page one"),
trailing: Icon(Icons.android),
onTap: () => {},
),
ListTile(
title: Text("page two"),
trailing: Icon(Icons.accessible),
onTap: () => {},
),
Container(
height: 1.0,
color: Color(0xFFDDDDDD),
),
ListTile(
title: Text("Log out"),
trailing: Icon(Icons.exit_to_app),
),
],
initiallyExpanded: false,
),
),
),
],
),
)
}