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"),
),
),
),
Related
I wanna achieve this:
I'm new on Flutter and I'm trying do design some UI to learn; reading the documentation I was thinking of achieving this by using Column and Dividers but I don't know how to change the style of the column with rounded borders, background color and things like that + I don't know which widget should I use for the text. Can anyone help me please and maybe show me some examples?!
Instead of a Column widget, you can achieve the UI design by using the Card, ListView, and ListTile widgets.
Card - Provide the rounded border for its child.
ListView - Load the widgets as scrollable based on scroll direction.
ListTile - A build-in child widget for the ListView.
Find the code snippet below.
return Card(
margin: EdgeInsets.all(5.0),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
color: Colors.grey.withOpacity(0.25),
child: ListView(
scrollDirection: Axis.vertical,
children: [
ListTile(
title: Text('Title'),
subtitle: Text('Subtitle'),
),
Divider(),
ListTile(
title: Text('Title'),
subtitle: Text('Subtitle'),
),
Divider(),
ListTile(
title: Text('Title'),
subtitle: Text('Subtitle'),
),
Divider(),
ListTile(
title: Text('Title'),
subtitle: Text('Subtitle'),
),
Divider(),
ListTile(
title: Text('Title'),
subtitle: Text('Subtitle'),
),
Divider(),
ListTile(
title: Text('Title'),
subtitle: Text('Subtitle'),
),
Divider(),
ListTile(
title: Text('Title'),
subtitle: Text('Subtitle'),
),
],
),
);
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.
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.
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',
),
),
),
);
}
I am trying to implement a button without margin.
My code is :
#override
Widget build(BuildContext context) {
return new AppState(
child: new Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF031e39),
title: Text("MY APP"),
),
body:
ButtonTheme(
buttonColor: Color(0xFF031e39),
minWidth: double.infinity,
child: FlatButton(
color: Color(0xFF81A483),
onPressed: () {
launchSearch();
},
child: Text('Search',style: TextStyle(color: Colors.white),),
),
)
),
);
}
The result is :
I have tried all different ways but I cannot figure out a solution so the button has not margin.
If I put a widget on top of my button in a column I get the same results:
How can I have a FlatButton without any margin ?
According to the source. It looks like Flutter pads out buttons that are smaller than the target tap size (48 x 48), you can get around it by:
Make your button height larger than or equal to 48
or
Add materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, to your FlatButton.
I got it but making some modifications.
Instead of using a ButtonTheme and a FlatButton I used a Container and a FloatingActionButton
With Container you can set the size in the screen. With FloatingActionButton you can set the position of the button in the Scaffold, which in this case is in all the screen.
To make the button flat I putted the attribute elevation to 0.0, so the button looks like flat.
appBar: AppBar(
backgroundColor: Color(0xFF031e39),
title: Text("MY APP"),
),
body: new Container(
width: double.infinity,
child: FloatingActionButton(
backgroundColor: Color(0xFF81A483),
shape: new RoundedRectangleBorder(),
elevation: 0.0,
onPressed: () {
print("entra");
},
child: Text(
'Search',
style: TextStyle(color: Colors.white),
),
),
)
I hope this is helpful for you
use:
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
FlatButton(
textColor: GFColors.WHITE,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Text(
"BLOG",
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.normal
),
),
onPressed: () {
},
),