Flutter: Navigation drawer with expansion tile - flutter

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,
),
),
),
],
),
)
}

Related

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();
},
),
],
),

Custom drawer icon 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(),
),
),

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(
....
)
)

How can I add background image on sidebar menu with Flutter?

I have following code below I want it to have background for all of them just one image but I couldn't:
drawer: new Drawer(
child: new ListView(
children: <Widget>[
//header
InkWell(
//click özelliği burada back-end sonra yapılacak
onTap:(){},
child: ListTile(
title: Text("Little Sister's Farm"),
leading: Icon(Icons.wb_sunny,color: Colors.orangeAccent),
subtitle: Text('Deneme#gmail.com'),
),
),
// yan tarafta açılan sidebar menü
new UserAccountsDrawerHeader(
accountName: Text('Kullanıcı Adı'),
accountEmail: Text('deneme#gmail.com'),
decoration:
new BoxDecoration(
color: Colors.green,
image: DecorationImage(
image: AssetImage("images/wood.jpg"),
fit: BoxFit.cover)
),
),
// body
InkWell(
//click özelliği burada back-end sonra yapılacak
onTap:(){},
child: ListTile(
title: Text('Kayıt/Giriş'),
leading: Icon(Icons.person_add,color: Colors.blueGrey),
),
),
InkWell(
//click özelliği burada back-end sonra yapılacak
onTap:(){},
child: ListTile(
title: Text('Anasayfa'),
leading: Icon(Icons.home,color: Colors.green),
),
),
InkWell(
onTap:(){},
child: ListTile(
title: Text('Hesabım'),
leading: Icon(Icons.account_box,color: Colors.deepPurple),
),
),
InkWell(
onTap:(){},
child: ListTile(
title: Text('Siparişlerim'),
leading: Icon(Icons.fastfood,color: Colors.tealAccent),
),
),
InkWell(
onTap:(){},
child: ListTile(
title: Text('Kategoriler'),
leading: Icon(Icons.dashboard,color: Colors.orange),
),
),
InkWell(
onTap:(){},
child: ListTile(
title: Text('Favoriler'),
leading: Icon(Icons.favorite,color: Colors.red),
),
),
Divider(),
InkWell(
onTap:(){},
child: ListTile(
title: Text('Ayarlar'),
leading: Icon(Icons.settings,color: Colors.lightBlueAccent),
),
),
InkWell(
onTap:(){},
child: ListTile(
title: Text('Yardım'),
leading: Icon(Icons.help_outline,color: Colors.yellow),
),
),
InkWell(
//click özelliği burada back-end sonra yapılacak
onTap:(){},
child: ListTile(
title: Text('Lokasyon'),
leading: Icon(Icons.location_city,color: Colors.black),
),
),
],
),
),
use Stack() widget and put your background image and drawer items in it.
Drawer(
child: Stack(
children: <Widget>[
Image.asset("your image adress"),
ListView(
children: <Widget>[
// your Drawer Items
],
)
],
),
);

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.