i cant seem to figure out how to make the burger icon bigger in my flutter app
here is the code for my flutter app, i am simply trying to make it bigger.....................................................................................................................................................
return new Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: new IconThemeData(color: Colors.black),
),
extendBodyBehindAppBar: true,
drawer: Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header', ),
decoration: BoxDecoration(
color: Colors.black,
),
),
ListTile(
title: Text('Trip History',style : TextStyle(fontSize: 20.0,fontFamily:"Clan-Medium")),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: Text('Payment',style : TextStyle(fontSize: 20.0,fontFamily:"Clan-Medium")),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: Text('Settings',style : TextStyle(fontSize: 20.0,fontFamily:"Clan-Medium")),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
],
),
),
Change your AppBar to this and then focus on the size property of the Icon, Change it as you want.
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: new IconThemeData(color: Colors.black),
leading: IconButton(
icon: Icon(
Icons.menu,
color: Colors.black,
size: 24.0,
),
onPressed: (){
_scaffoldKey.currentState.openDrawer();
},
)
),
You can set any icon here.
Also, as the official docs say, you can use it as well which also has an option to set ToolTip.
AppBar(
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.menu),
onPressed: () { Scaffold.of(context).openDrawer(); },
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
);
},
),
)
Related
I created an app drawer and now I need to add color to its background. I managed to add color to the header part now I'm struggling to add to the bottom part. My color choices are RED and Golden Yellow. I am a little bit new to flutter and still learning through by making this kind of projects. And if you have any suggestions regarding making app drawer like this or any other ways I like to know those too.
Here is my appDrawer.dar code
import 'package:flutter/material.dart';
class NavDrawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Drawer(
elevation: 20.0,
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: Text(
'Hello Welcome!',
style: TextStyle(color: Colors.white, fontSize: 25),
),
decoration: BoxDecoration(
color: Color.fromRGBO(225, 223, 0, 100),
)),
ListTile(
leading: Icon(Icons.input),
title: Text('Welcome'),
onTap: () => {},
),
ListTile(
leading: Icon(Icons.verified_user),
title: Text('Profile'),
onTap: () => {Navigator.of(context).pop()},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () => {Navigator.of(context).pop()},
),
ListTile(
leading: Icon(Icons.border_color),
title: Text('Feedback'),
onTap: () => {Navigator.of(context).pop()},
),
ListTile(
leading: Icon(Icons.exit_to_app),
title: Text('Logout'),
onTap: () => {Navigator.of(context).pop()},
),
],
),
);
}
}
I cold it likes this in my homeScreen.dart file
#override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true, //this will extend map over the app bar
drawer: NavDrawer(),
appBar: AppBar(
centerTitle: true,
title: Text(
'MY ORDERS',
style: TextStyle(color: Colors.black, fontSize: 25.0),
),
You can wrap your widgets with container and give them a color property
Container(
color:Colors.red,
child:ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: Text(
'Hello Welcome!',
style: TextStyle(color: Colors.white, fontSize: 25),
),
decoration: BoxDecoration(
color: Color.fromRGBO(225, 223, 0, 100),
)),
ListTile(
leading: Icon(Icons.input),
title: Text('Welcome'),
onTap: () => {},
),
ListTile(
leading: Icon(Icons.verified_user),
title: Text('Profile'),
onTap: () => {Navigator.of(context).pop()},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () => {Navigator.of(context).pop()},
),
ListTile(
leading: Icon(Icons.border_color),
title: Text('Feedback'),
onTap: () => {Navigator.of(context).pop()},
),
ListTile(
leading: Icon(Icons.exit_to_app),
title: Text('Logout'),
onTap: () => {Navigator.of(context).pop()},
),
],
),
)
You can wrap your listview into a container and give color to that container. In that way, the color will be applied to the other items as well.
I'm trying to build out a custom dropdown menu that looks like this:
I've managed to implement the ListTiles and Row of Buttons without the dropdown, but I'm not sure how to nest all of that within a dropdown menu class. This is what I've got so far:
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(),
body: SizedBox.expand(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[0]),
title: Text('All Circles'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[1]),
title: Text('Pickup'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[2]),
title: Text('Kappa Delta'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[3]),
title: Text('Ok Boomer'),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("Join a Circle"),
color: Color(0xffb74093),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
RaisedButton(
child: Text("Create a Circle"),
color: Colors.red,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
],
),
],
),
),
),
);
}
}
I'm not sure you can use ListTile after the items: directly.
If you did run the code above, you're getting errors.
it needs to return DropdownMenuItem instead of ListTile directly
return DropdownMenuItem<String>(
value: value,
child: Row(
children: <Widget>[
CircleAvatar(backgroundColor: Colors.primaries[3]),
Text(value)
],
));
I think the above code would be relatively correct.
this is very simple first create a drop-down menu widget and then give your widget to a drop-down menu item
like this
give value to each drop-down item according to your objects array
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(
color: Colors.deepPurple
),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[0]),
title: Text(value),
);
})
.toList(),
);
Here's the current AppBar code:
AppBar(
iconTheme: IconThemeData(
color: Colors.black,
size: 100 // This isn't performing any changes
),
centerTitle: false,
backgroundColor: Colors.white,
title: Text(
title,
style: TextStyle(color: Colors.black87,
),
elevation: 1.0,
);
Current size attribute from IconThemeData not making any change.
Try this you need to use leading
A widget to display before the title.
SAMPLE CODE
AppBar(
title: new Text("Your Title"),
leading: new IconButton(
icon: new Icon(Icons.arrow_back,size: 50.0,),
onPressed: () => {
// Perform Your action here
},
),
);
OUTPUT
You can use Transform.scale widget and wrap IconButton with it. This widget has scale property which you can set based on your need. Working sample code below:
appBar: AppBar(
leading: Transform.scale(
scale: 2,
child: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () {}
)
),
centerTitle: false,
backgroundColor: Colors.white,
title: Text(
'test',
style: TextStyle(color: Colors.black87,
),
// elevation: 1.0,
)),
Hope this answers your question.
How does one implement a menu widget on iOS equivalent to the Android (Material) drawer in Flutter?
There is no straightforward alternative menu widget in iOS, because Apple doesn't recommend drawers at all.
A drawer is a type of interface element that contains options or information
related to a specific window. A drawer is hidden by default, and can
only be revealed when the parent window is visible on screen. When
revealed, typically in response to a button, menu, or action, the
drawer slides out from one of side of the parent window. A drawer
can’t be moved separately or detached from its parent window.
Avoid using drawers. Drawers are seldom used in modern apps and their
use is discouraged. Panels, popovers, sidebars, and split views are
preferred for displaying supplementary window content.
Quick solution
Example
The Flutter team has prepared a comprehensive example of Android / iOS multiplatform app design.
You can build this yourself. You can use Positioned and GestureDetector, for example. Than you can animate it's moving. Is done very easy.
If you really want, you can workaround by defining a page that you use in the drawer for Android and as just another page for iOS:
Widget settingsWheel = Platform.isAndroid
? Builder(builder: (BuildContext context) => IconButton(
icon: settingsIcon,
onPressed: () => Scaffold.of(context).openDrawer(),
tooltip: "Open App Settings",
))
: Builder(builder: (BuildContext context) => CupertinoButton(
child: settingsIcon,
onPressed: () => Navigator.pushNamed(context, AppSettings.pageRoute),
));
...and then give it a "drawer-ish" feel by sliding the page in from the left:
onGenerateRoute: (route){
if (route.name == AppSettings.pageRoute) {
return PageTransition(
child: AppSettings(),
type: PageTransitionType.leftToRight,
settings: route,);
}
Simply place the Drawer in the endDrawer attribute of Scaffold, example:
Drawer(
child: ListView(shrinkWrap: true,
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: myColour,
),
accountName:
Padding(child: Row(
children: <Widget>[
Text("Marcelo Augusto Elias"),
IconButton(
icon: Icon(
Icons.edit,
color: whiteColour,
),
onPressed: () {},
),
],
), padding: EdgeInsets.only(top: 10),),
accountEmail: Text("N° Cartão: XXXX XXXX XXXX 5154"),
currentAccountPicture: CircleAvatar(
backgroundColor:
Theme.of(context).platform == TargetPlatform.iOS
? myColour
: Colors.white,
child: Icon(
Icons.person,
size: 50,
),
),
),
ListTile(
dense: true,
title: Text("Fatura"),
leading: new Image.asset(
"assets/images/icon_fatura_barra_menu.png",
width: 20.0,
),
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Fatura()),
);
},
),
ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ConsultaMargem()),
);
},
dense: true,
title: Text("Extrato"),
leading: new Image.asset(
"assets/images/icon_barra_menu_extrato.png",
width: 20.0,
),
),
ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DesbloquearPrimeiraVia()),
);
},
dense: true,
title: Text("Desbloquear Cartão"),
leading: new Image.asset(
"assets/images/icon_barra_menu_desbloquearcartao.png",
width: 24.0,
),
),
ListTile(
dense: true,
title: Text("Meu Cartão"),
leading: new Image.asset(
"assets/images/icon_barra_menu_meucartao.png",
width: 20.0,
),
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Contracheques()),
);
},
),
ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HistoricoConsignacoes()),
);
},
dense: true,
title: Text("Adiantamento Salarial"),
leading: new Image.asset(
"assets/images/icon_barra_menu_adiantamentosalarial.png",
width: 20.0,
),
),
/* ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ConsultaMargem()),
);
},
dense: true,
title: Text("Consulta de Margem"),
leading: new Image.asset(
"assets/images/icon_consulta_margem.png",
width: 20.0,
),
), */
/* ListTile(
dense: true,
title: Text("Informe de Rendimentos"),
leading: new Image.asset(
"assets/images/icon_rendimento.png",
width: 20.0,
),
), */
/* ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SimularEmprestimos()),
);
},
dense: true,
title: Text("Simular Empréstimo"),
leading: new Image.asset(
"assets/images/Icon_cal.png",
width: 20.0,
),
), */
Divider(),
ListTile(
dense: true,
title: Text("Compartilhar"),
leading: new Image.asset(
"assets/images/icon_compartilhar.png",
width: 20.0,
),
),
ListTile(
dense: true,
title: Text("Avaliar"),
leading: new Image.asset(
"assets/images/icon_estrela.png",
width: 20.0,
),
),
Divider(),
ListTile(
onTap: () {
Navigator.pop(context);
},
dense: true,
title: Text("Sair"),
trailing: Text(
"Versão 2.0",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
),
leading: new Image.asset(
"assets/images/icon_porta_sair.png",
width: 20.0,
),
),
],
),
)
I am using bottom app bar for bottomnavigation in flutter. when tapped on one of the tab in the bottom app bar, i would still want the bottom app bar and app bar to remain as it is in it's fixed position but only the body content changes based on what is tapped.
I have tried to use push() method but it gives me a new page instead with a back button.
Navigation_tabs.dart:
import 'package:flutter/material.dart';
class NavigationTabs extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {},
),
appBar: AppBar(
title: Text('Dashboard'),
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 4.0,
child: new Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(
Icons.home,
color: Colors.cyan[700],
),
onPressed: () {},
),
new Container(
padding: EdgeInsets.only(left: 20),
child: IconButton(
icon: Icon(
Icons.list,
color: Colors.cyan[700],
),
onPressed: () => Navigator.pushNamed(context, '/login'),
)),
new Container(
padding: EdgeInsets.only(left: 120),
child: IconButton(
icon: Icon(
Icons.explore,
color: Colors.cyan[700],
),
onPressed: () {},
)),
new Container(
height: 22.0,
child: new RawMaterialButton(
onPressed: () {},
child: new Icon(
Icons.person,
color: Colors.white,
size: 20.0,
),
shape: new CircleBorder(),
elevation: 1.0,
fillColor: Colors.cyan[700],
))
],
),
));
}
}
I want to be able to only make the page content change without a back button instead of going to a completely new page when one of the tabs is pressed.
You can use a BottomNavigationBarItem instead of creating buttons and use the ontap of the bottomNavigationBar.
class _MyHomePageState extends State<MyHomePage> {
int _index = 0;
final List<Widget> _children = [
Center(child: Text("First Page"),),
Center(child: Text("Second Page"),),
Center(child: Text("Third Page"),)
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Bottom Navigation"),
),
body: Center(
child: (_children[_index ]),
),
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.looks_one),
title: Text('First'),
),
BottomNavigationBarItem(
icon: Icon(Icons.looks_two),
title: Text('Second'),
),
BottomNavigationBarItem(
icon: Icon(Icons.looks_3),
title: Text('Third'),
)
],
),
);
}
void onTabTapped(int index) {
setState(() {
_index = index;
});
}
}
For more detailed explanation:
Flutter documentation