I get an error saying that the drawer is not defined, when I added a gridview.count to the body it is now giving this error which drawer is not define... How do I fix this error?
Here is my scaffold:
return new Scaffold(
appBar: new AppBar(
title: Stack(
children: <Widget>[Text('PickerUp')],
),
centerTitle: true,
),
body: new GridView.count(
crossAxisCount: 2,
children: List.generate(100, (index) {
return Center(
child: Text('Item $index',
style: Theme.of(context).textTheme.headline));
}),
// Drawer controls left menu drawer
drawer: Container(
width: 245,
child: new Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('Admin'),
accountEmail: Text('test#admin.com'),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a89c3e38-b6f3-48a0-9f9e-df9a0129fb93/daghh5x-4a77b3ec-fd4f-4d17-9f84-5963a8cb5c03.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E4OWMzZTM4LWI2ZjMtNDhhMC05ZjllLWRmOWEwMTI5ZmI5M1wvZGFnaGg1eC00YTc3YjNlYy1mZDRmLTRkMTctOWY4NC01OTYzYThjYjVjMDMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.dWTFMrwnbAbj5TtUp9U_vQsohW7MnkRPymzR5wZQoV8')),
),
ListTile(
leading: Icon(Icons.search),
title: Text('Search'),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
),
ListTile(
leading: Icon(Icons.arrow_back),
title: Text('Logout'),
),
],
),
),
),
),
);
You have to be sure about enclosed brackets. Here's your Scaffold
return new Scaffold(
appBar: new AppBar(
title: Stack(
children: <Widget>[Text('PickerUp')],
),
centerTitle: true,
),
// Drawer controls left menu drawer
drawer: Container(
width: 245,
child: new Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('Admin'),
accountEmail: Text('test#admin.com'),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a89c3e38-b6f3-48a0-9f9e-df9a0129fb93/daghh5x-4a77b3ec-fd4f-4d17-9f84-5963a8cb5c03.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E4OWMzZTM4LWI2ZjMtNDhhMC05ZjllLWRmOWEwMTI5ZmI5M1wvZGFnaGg1eC00YTc3YjNlYy1mZDRmLTRkMTctOWY4NC01OTYzYThjYjVjMDMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.dWTFMrwnbAbj5TtUp9U_vQsohW7MnkRPymzR5wZQoV8')),
),
ListTile(
leading: Icon(Icons.search),
title: Text('Search'),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
),
ListTile(
leading: Icon(Icons.arrow_back),
title: Text('Logout'),
),
],
),
)),
body: new GridView.count(
crossAxisCount: 2,
children: List.generate(100, (index) {
return Center(
child: Text('Item $index',
style: Theme.of(context).textTheme.headline));
}),
),
);
You have misplaced brackets.
body: new GridView.count(
crossAxisCount: 2,
children: List.generate(100, (index) {
return Center(
child: Text('Item $index',
style: Theme.of(context).textTheme.headline));
})), <- missed bracket
Related
my Drawer Header title is not there where I want it. I tried to positionig it further up, but I failed. Here is a picture of the top from the drawer:
The "Menü" is the text I want to positionig further up.
Here is the part of my Code:
Column(children: [
DrawerHeader(
decoration: BoxDecoration(
color: Colors.green,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Menü',
style: GoogleFonts.oswald(
textStyle: TextStyle(
color: Colors.black,
fontSize: 45,
),
),
),
Try below code hope its helpful to you.
Refer Drawer here
Scaffold(
appBar: AppBar(title: Text(title)),
body: const Center(
child: Text('My Page!'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
ListTile(
title: const Text('Item 1'),
),
ListTile(
title: const Text('Item 2'),
),
],
),
),
)
Your result screen->
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(
....
)
)
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
],
)
],
),
);
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.
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,
),
),
),
],
),
)
}