what I am asking for is to add an icon in appBar in flutter ... I have active the localization property so my App is RTL Now
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
Locale("ar", "AR"), // OR Locale('ar', 'AE') OR Other RTL locales
],
locale: Locale("ar", "AR"), // OR Locale('ar', 'AE') OR Other RTL locales
... the problem is the drawer menu Icon in right which is right ... but when I add Icon in leading property in appBar it doesn't go to the left side ... but it replaced the drawer Icon !!!
// AppBar
appBar: new AppBar(
leading: Icon(Icons.person,),
title: new Text("الرئيسية",
style: new TextStyle(fontFamily: 'RPT Bold',
fontSize: 16.0,
color: Colors.amber
),
),
centerTitle: true,
iconTheme: new IconThemeData(color: Colors.amber),
),
Best regards
set automaticallyImplyLeading to false :
appBar: new AppBar(
automaticallyImplyLeading: false,
leading: Icon(Icons.person,),
title: new Text("الرئيسية",
style: new TextStyle(fontFamily: 'RPT Bold',
fontSize: 16.0,
color: Colors.amber
),
),
centerTitle: true,
iconTheme: new IconThemeData(color: Colors.amber),
),
you can wrap your Scaffold with Directionality and set text direction to RTL.
this way doesn't need localization property.
Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('title'),
),
body: Container(child: Text('text',
),
),
),
);
}
Related
I am using endDrawer and inside it I used Expansion Tile,But My Laguage is persian and it's Direction is rtl.
Expantion Tile's deafualt Direction is ltr but I want to be rtl
You must wrap ExpansionTile widget with Directionality and set textDirection: TextDirection.rtl.
child: Directionality(
textDirection: TextDirection.rtl,
child: ExpansionTile(
leading: ImageContainer(imageAddress: imageAddress),
title: const Text(
volleyballChampions,
textDirection: TextDirection.rtl,
),
subtitle: const Text(
testDateText,
textDirection: TextDirection.rtl,
),
trailing: GestureDetector(
onTap: () {
// TODO: develop dropdown container
},
child: SvgPicture.asset("assets/arrow_down.svg"),
),
),
),
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 have set the statusbar color to transparent. But still not the same with Appbar.
// on main method
if (Platform.isAndroid) {
SystemUiOverlayStyle systemUiOverlayStyle =
SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
// on a widget build method
Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
brightness: Brightness.light,
centerTitle: true,
backgroundColor: Colors.white,
elevation: 0,
title: Text('发现', style: BMTextStyle.black_56),
),
body: SafeArea(
top: false,
child: TabBarView(controller: _controller, children: <Widget>[
_buildPageContentAccordingIndex(0),
_buildPageContentAccordingIndex(1),
]),
),
),
The result is the statusbar color seems gray, and the Scaffold is white. So how to make them the same? Thank you!
You want to use AnnotatedRegion inside each Stateful Widget (basically every screen) you make adjustments to regarding the status bar. I previously did it some other way, but AnnotatedRegion makes sure the status bar updates its style again when you use Navigator.pop(context) to come back to this screen. Just wrap the Scaffold around with AnnotatedRegion and set the value to your systemUiOverlayStyle variable like so:
#override
Widget build(BuildContext context) {
SystemUiOverlayStyle _statusBarStyle = SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark,
);
return AnnotatedRegion(
value: _statusBarStyle,
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
brightness: Brightness.light,
centerTitle: true,
backgroundColor: Colors.white,
elevation: 0,
title: Text('发现', style: BMTextStyle.black_56),
),
body: SafeArea(
top: false,
child: TabBarView(controller: _controller, children: <Widget>[
_buildPageContentAccordingIndex(0),
_buildPageContentAccordingIndex(1),
]),
),
),
);
}
Hope this helped.
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,
);
},
),
)
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.