Flutter Row main axis alignment not working - dart

I'm trying to place two materialbuttons in a row with even space in between. But mainAxisAlignment widget is not working. Both the buttons are sticked to each other at the start of the row.
Widget _buildSignInButton() {
return Row(
children: <Widget>[
Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new SignInButton(
onPressed: () {
_googleSignIn();
},
imageUrl: 'assets/images/glogo.png',
),
new SignInButton(
onPressed: () {
_fbSignIn();
},
imageUrl: 'assets/images/fblogo.png',
),
],
),
)
],
);
}
Widget build(BuildContext context) {
return Container(
child: _buildSignInButton()
);
}


Try to simplify the code like this:
Row(
// children: <Widget>[
// new Container(
// child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Text('123'),
new Text('456'),
],
// ),
// ),
// ],
),
or replace the Container with Expanded:
Row(
children: <Widget>[
new Expanded(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Text('123'),
new Text('456'),
],
),
),
],
),
Checkout the doc for more details about the differences: https://flutter.io/docs/development/ui/layout/box-constraints#flex

Related

How to create beautiful alertDialog like in web(tooltip)?

I need to design something like an alert view for display password policy. But I don't know how to design like this. If press button view this kind of alert?
My design and code
viewPolicy() {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Password Policy"),
content: Container(
width: 10.0,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Text(
"Minimum Password Length : ${widget.minPwdlength}"),),],),
Row(
children: <Widget>[
Expanded(
child:
Text("Minimum Password Uppercase Characters : 1"),),],),
Row(
children: <Widget>[
Expanded(
child:
Text("Minimum Password lowercase Characters : 1"),),],),
Row(
children: <Widget>[
Expanded(
child: Text("Minimum Password Numeric Characters : 1"),),],),
Row(
children: <Widget>[
Expanded(
child: Text("Minimum Special Characters : 1"),),], ),
Row(
children: <Widget>[
Expanded(
child: Text(
"Allowed Characters : ! # # \$ & * ~ Password cannot contain spaces",
style: TextStyle(color: Colors.grey),
),),], ),], ), ),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
"OK",
style: TextStyle(fontWeight: FontWeight.bold),
))], ); });}
I need to design like this,

Here is the code, hope it will be helpful.
Screenshot
Dialog errorDialog = Dialog(
//this right here
child: Theme(
data: ThemeData().copyWith(
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(),
),
),
child: Container(
color: Colors.blueGrey[100],
height: MediaQuery.of(context).size.height / 3.5,
width: MediaQuery.of(context).size.width / 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Minimum Password Length"),
Text(": 6")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Minimum Password Uppercase Characters"),
Text(": 1")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Minimum Password lowercase Characters"),
Text(": 1")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Minimum Password Numeric Characters"),
Text(": 1")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Minimum Special Characters"),
Text(": 1")
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Expanded(
child: Text(
"Allowed Characters:\n! # # \$ & * ~\nPassword cannot contain spaces",
style: TextStyle(color: Colors.grey[700]),
),
),
],
),
),
// you can remove this Row if you don't want the ok button, the user can dismiss the dialog by pressing anywhere in the screen.
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
child: Text(
"Ok",
style: TextStyle(fontWeight: FontWeight.bold),
),
onPressed: () => Navigator.of(context).pop(),
)
],
)
],
),
),
),
),
);
showDialog(
context: context,
builder: (BuildContext context) => errorDialog);

How do I use different crossAxisAlignment for different rows on the same column?

I want to align two pieces of text differently, where each piece of text is in a different row but in the same column.
Here's a crudely illustrated structure for this widget
As you can see "info text" is next to "video duration", but I want it at the top, and I want to keep "video duration" at the bottom at all times.
I tried using alignment settings but I don't know why one doesn't seem to be working (I commented it in the code below)
class MiniVideoCell extends StatelessWidget {
final lesson;
MiniVideoCell(this.lesson);
#override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new Container(
padding: new EdgeInsets.all(12.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Column(
children: <Widget>[
new Image.network(
lesson.imageUrl,
width: 150.0,
),
],
),
new Column(
crossAxisAlignment: CrossAxisAlignment.start, //meant to align elements to the left - seems to be working
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.start, //trying to bring this text up, not working
children: <Widget>[
new Text("info text"),
],
),
new Row(
children: <Widget>[
new Text("video duration"),
],
),
],
),
],
),
),
new Divider(),
],
);
}
}

You can try to set your mainAxisAlignment property of your Column widget to MainAxisAlignment.spaceBetween. This would put all available space between your Row widgets.
new Column(
crossAxisAlignment: CrossAxisAlignment.start, //meant to align elements to the left - seems to be working
mainAxisAlignment: MainAxisAlignment.spaceBetween, // Add this line
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.start, //trying to bring this text up, not working
children: <Widget>[
new Text("info text"),
],
),
new Row(
children: <Widget>[
new Text("video duration"),
],
),
],
)
And also we need to specify the height and width of our Container widget like this:
Container(
padding: EdgeInsets.all(12.0),
width: double.infinity, // Added width
height: 124.0, // Set your preferred height
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
...
Output would look like this:
Here is the partial code:
Column(
children: [
Container(
padding: EdgeInsets.all(12.0),
width: double.infinity, // Added this
height: 124.0, // Set your preferred height
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Column(
children:[
Container(
color: Colors.blue,
width: 150.0,
height: 100.0, // Assuming that the height of the thumbnail is 100 pixels
)
]
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween, // Place all available space between the children
children:[
Row(
mainAxisAlignment: MainAxisAlignment.start, //trying to bring this text up, not working
children: <Widget>[
new Text("info text"),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start, //trying to bring this text up, not working
children: <Widget>[
new Text("video duration"),
],
),
]
)
]
),
),
Divider(),

Flutter - Fix Drawer Header

Following this link Add a Drawer to a screen I have created a drawer.
Following is my piece of code:
// FUNCTION CONTAINING LEFT SIDE MENU ITEMS
_drawerList() {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'John Doe',
),
],
),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/menu_bg.png'),
fit: BoxFit.cover,
),
),
),
ListTile(
// Some Code
),
],
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
// Some Code
drawer: Drawer(
child: _drawerList(),
),
// Some Code
}
}
Is there any way I can fix "DrawerHeader" so that it doesn't move with the drawer and list view.
P.S. I don't want to hold ListView. I just want to hold or fix "DrawerHeader".

Yes, move it out of the ListView widget and use Column to hold both DrawerHeader and ListView.
With items scrolling enabled
_drawerList() {
return Drawer(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
DrawerHeader(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'John Doe',
),
],
),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/menu_bg.png'),
fit: BoxFit.cover,
),
),
),
ListView(
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
// Some Code
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
],
),
],
),
);
}
With items scrolling disabled
_drawerList() {
return Drawer(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
DrawerHeader(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'John Doe',
),
],
),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/menu_bg.png'),
fit: BoxFit.cover,
),
),
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
],
),
);
}

Instead of wrapping inside ListView you can wrap it inside column and then add other widget inside that. Also if you want to divide header and other part in any ratio you can use Expanded widget.
_drawerList() {
return Drawer(
child: Container(
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: DrawerHeader(
padding: EdgeInsets.all(0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'John Doe',
),
],
),
),
),
Expanded(
flex: 2,
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
],
),
)
],
),
),
);
}

I use this code to pin DrawerHeader on top with fixed height and make list to fill rest of space below.
final drawer = Drawer(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 200,
child: DrawerHeader(
decoration: BoxDecoration(color: Colors.blue),
child: Text('Right Drawer Header',
style: TextStyle(color: Colors.white, fontSize: 24)))),
Expanded(
child: ListView(padding: EdgeInsets.zero, children: [
ListTile(leading: Icon(Icons.message), title: Text('Message')),
ListTile(
leading: Icon(Icons.account_circle), title: Text('Profile')),
ListTile(leading: Icon(Icons.settings), title: Text('Settings')),
]))
]));

flutter Floatingbutton overlap bottomnavigation bar item

how to set padding on bottombar with floating button. floatingbutton is overlaping tbottom bar item.
return new Scaffold(
appBar: AppBar(title: const Text('Bottom App Bar')),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
backgroundColor: Colors.red,
onPressed: () {},
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 5.0,
elevation: 5.0,
child: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text('Messages'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text('Messages'),
),
]),
),
);
here is a example. thank you for your help
please help!

BottomAppBar can have a notch along the top that makes room for an overlapping FloatingActionButton.
You should use BottomNavigationBar instead of BottomAppBar and the floating action button will be placed above the navigation bar

try this
#override
Widget build(BuildContext context) {
return Scaffold(
body: PageStorage(
child: currentScreen,
bucket: bucket,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.all_inclusive),
tooltip: 'Increment',
elevation: 2.0,
backgroundColor: Colors.purple[900],
onPressed: (){
setState(() {
currentScreen=Profile();
currentTab = 0;
},
);
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
notchMargin: 7,
shape: CircularNotchedRectangle(),
child: Container(
// color: Colors.black12,
// color: Colors.deepPurple[500],
height: 60,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
MaterialButton(
// minWidth: 40,
onPressed: (){
setState(() {
currentScreen=Profile();
currentTab = 0;
},
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.group,color: currentTab ==0 ? Colors.blue:Colors.grey[500]),
Text('Profile',style: TextStyle(color: currentTab ==0 ? Colors.blue:Colors.grey[500],
),
)
],
),
),
MaterialButton(
// minWidth: 40,
onPressed: (){
setState(() {
currentScreen=About();
currentTab = 2;
},);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.perm_contact_calendar,color: currentTab ==2 ? Colors.blue:Colors.grey[500]),
Text('Contact',style: TextStyle(color: currentTab ==2 ? Colors.blue:Colors.grey[500]),
),
],
),
)
],
),
// SizedBox(width: 48,),
Row(
// mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
MaterialButton(
// minWidth: 40,
onPressed: (){
setState(() {
currentScreen=About();
currentTab = 1;
},);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.info_outline,color: currentTab ==1 ? Colors.blue:Colors.grey[500]),
Text('About',style: TextStyle(color: currentTab ==1 ? Colors.blue:Colors.grey[500],
),
)
],
),
),
MaterialButton(
// minWidth: 40,
onPressed: (){
setState(() {
currentScreen=Noti();
currentTab = 3;
},);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.notifications,color: currentTab ==3 ? Colors.blue:Colors.grey[500]),
Text('Notification',style: TextStyle(color: currentTab ==3 ? Colors.blue:Colors.grey[500],
),
)
],
),
),
],
)
],
)
),
),
);
}
I have just created 2 different rows for items in bottomnav bar
i.e. one from left and one from right that's it

flutter all widgets on screen hides when keyboard appears

I am using TabBar and a custom searchview, when I click inside TextField to search and keyboard pops up my all view hides, am attaching screenshots below. Is this flutter issue or I am doing wrong in my code. Please have a look at my code. without popping up keyboard my this is working fine.
return new Scaffold(
body: new Container(
// margin: EdgeInsets.all(10.0),
//color: Colors.white30,
child: new Column(
children: <Widget>[
new Container(
height: 70.0,
color: Theme.of(context).primaryColor,
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Card(
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 3.0),
child: new Icon(Icons.search),
),
new Container(
width: MediaQuery.of(context).size.width - 100.0,
// Subtract sums of paddings and margins from actual width
child: new TextField(
controller: controller,
decoration: new InputDecoration(
hintText: 'Search', border: InputBorder.none),
// onChanged: onSearchTextChanged,
),
),
new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
controller.clear();
// onSearchTextChanged('');
FocusScope.of(context).requestFocus(new FocusNode());
},),
],
),
)
))),
new Flexible(
child: new ListView.builder(
itemCount: productList == null ? 0 : productList.length,
itemBuilder: (BuildContext context, int index) {
return new Container(
child: new Column(
children: <Widget>[
new Container(
margin: EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new Column(
children: <Widget>[
new Padding(padding: const EdgeInsets.only(top: 5.0)),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Container(
alignment: FractionalOffset.topLeft ,
width: 250.0,
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Text(productList[index].name,
style: new TextStyle(color: Colors.black,
fontSize: 18.0, fontWeight: FontWeight.bold),
)
],
),
),
new Text("£"+productList[index].price.toString(),
style: new TextStyle(color: Colors.black,
fontSize: 18.0, fontWeight: FontWeight.bold
),),
],
)
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start ,
children: <Widget>[
new Text(
productList[index].description,
overflow: TextOverflow.fade ,),
],
))
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new ListTileItemAddRemove(productList[index]),
new Padding(padding: EdgeInsets.only(bottom: 10.0))
],
)
],
),
),
new Divider(color: Colors.black,)
],
),
);
}),
),
],
)
),
);
when I click inside TextField all widgets disappears. please see below.

I think flutter widgets are resized when keyboard pops up, I've resolved this issue by setting value false of resizeToAvoidBottomPadding inside Scaffold. Issue has been resolved but still I am looking for the reason behind this issue.
return new Scaffold(
resizeToAvoidBottomPadding : false,
body: new Container(
-
-
-
-
}

Resources