Flutter mainaxisAlignment.spaceEvenly not working on multiple flex(Row & Column) - flutter

I am creating a screen like Instagram profile but mainaxisAlignment.spaceEvenly is not working. It works just fine if the row is not inside any other row or column but in this case It didn't.
How can I solve this? Please Help.
Container(
margin: EdgeInsets.all(15.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.only(
right: 10.0,
),
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new CachedNetworkImageProvider(
profile.dp,
scale: 100.0,
),
),
),
),
Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Text(
profile.postcount.toString(),
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('posts'),
],
),
Column(
children: <Widget>[
Text(
profile.followers.toString(),
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('followers'),
],
),
Column(
children: <Widget>[
Text(
profile.followings.toString(),
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('following'),
],
),
],
),
new RaisedButton(
child: Text('Edit Profile'),
onPressed: () {},
),
],
)
],
)
],
)),
Expectation:
Reality:

Here you go
Widget _buildRow() {
return Container(
padding: const EdgeInsets.all(16),
child: Row(
children: <Widget>[
CircleAvatar(
radius: 40,
backgroundImage: AssetImage("your_image_asset"),
),
SizedBox(width: 12),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Text("2", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Gold", style: TextStyle(color: Colors.grey)),
],
),
Column(
children: <Widget>[
Text("22", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Silver", style: TextStyle(color: Colors.grey)),
],
),
Column(
children: <Widget>[
Text("5464", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Reputation", style: TextStyle(color: Colors.grey)),
],
),
],
),
OutlineButton(onPressed: () {}, child: Text("CopsOnRoad (Edit Profile)")),
],
),
),
],
),
);
}

Related

Flutter: Place a particular widget in a row at center

How to place the "question mark" at center of row?
Expected result is "?" are all at center regardless of the values on left/right.
body: ListView.builder(
itemCount: testList.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.green,
child: Text(testList[index].n1.toString(), style: TextStyle(fontSize: 80,)),
),
Container(
color: Colors.red,
child: Text(testList[index].x, style: TextStyle(fontSize: 80,)),
),
Container(
color: Colors.green,
child: Text(testList[index].n2.toString(), style: TextStyle(fontSize: 80, )),
),
],
),
Text('>'),
Text('<'),
Text('='), //
],
),
);
}),
You can use row and Expanded with flex widget to achieve your desire output.
Following minimal code help you more.
Card(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 1,
child: Row(
children: [
Expanded(child: Container()),
Container(
color: Colors.green,
child: Text('10',
style: TextStyle(
fontSize: 80,
)),
),
],
),
),
Container(
color: Colors.red,
child: Text("?",
style: TextStyle(
fontSize: 80,
)),
),
Expanded(
flex: 1,
child: Row(
children: [
Container(
color: Colors.green,
child: Text('100',
style: TextStyle(
fontSize: 80,
)),
),
Expanded(child: Container()),
],
),
),
],
),
Text('>'),
Text('<'),
Text('='), //
],
),
)

set data inside row and column in flutter

i need to set data like this
i have tried taken row first then column then again row, but in row i am unable to set space between job id and 011.
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: EdgeInsets.only(right: 10.0),
width: 50.0,
height: 50.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: AssetImage('assets/noimage.jpg'),
))),
Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Job id',
style: TextStyle(
color: Colors.grey.shade700,
fontSize: 16.0,
fontWeight: FontWeight.normal)),
Text('011',
style: TextStyle(
color: Colors.grey.shade700,
fontSize: 16.0,
fontWeight: FontWeight.normal)),
],
),
],
),
],
),
set space between job id and it's data but in my case it will jobid011 .
Try like this :
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(padding: EdgeInsets.only(left: 10.0),),
Container(
margin: EdgeInsets.only(right: 10.0),
width: 50.0,
height: 50.0,
color: Colors.red
),
Expanded(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Job id',
style: TextStyle(
color: Colors.grey.shade700,
fontSize: 16.0,
fontWeight: FontWeight.normal)),
Text('011',
style: TextStyle(
color: Colors.grey.shade700,
fontSize: 16.0,
fontWeight: FontWeight.normal)),
],
)
],
),
),
Padding(padding: EdgeInsets.only(right: 10.0),)
],
),
You can use Spacer() Widget to make this work
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: EdgeInsets.only(right: 10.0),
width: 50.0,
height: 50.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: AssetImage('assets/noimage.jpg'),
))),
Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('Job id',
style: TextStyle(
color: Colors.grey.shade700,
fontSize: 16.0,
fontWeight: FontWeight.normal)),
Spacer(),
Text('011',
style: TextStyle(
color: Colors.grey.shade700,
fontSize: 16.0,
fontWeight: FontWeight.normal)),
],
),
],
),
],
),
see more about this here
You can use crossAxisAlignment: CrossAxisAlignment.start for space between Text Widget
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Text(heading,
style: AppTheme.textStyleWith(15, Colors.black)
.copyWith(fontWeight: FontWeight.bold)),
),
Expanded(
child: Text(
details,
style: AppTheme.textStyleWith(15, Colors.black),
),
)
],
);

Flutter align widget to centre and another to the right - impossible

I'm trying to do something which should be extremely simple but can't see how it is done.
I need to align the large text to the centre and the buttons to the right so it looks like image below:
With the code below the widgets are aligned left and right:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colour.darkBlue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
],
),
),
I tried the following method:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colour.darkBlue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: Container()),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
),
],
),
),
But it resulted in this:
Not sure how or whether it can be done without manually setting a width for the container on the left which is clearly a far from ideal method. Flutter seems to desperately need float:right...
You was almost there. Just "Expanded" in the middle should be removed:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: Container()),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
),
],
),
),
Try with ListTile Widget, I have made changes using ListTile, please check if it works for you
Center(
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(15),
width: 300,
height: 150,
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: ListTile(
title: Text('Centred',
textAlign: TextAlign.center, style: TextStyle(fontSize: 30)),
subtitle: Text('24.6 %',
textAlign: TextAlign.center, style: TextStyle(fontSize: 48)),
trailing: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 15)),
Text('BtnB', style: TextStyle(fontSize: 15)),
Text('BtnC', style: TextStyle(fontSize: 15)),
],
),
),
),
)
child: Center(
child: Container(
width: 300,
height: 150,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Container(
child: Stack(
children: <Widget>[
Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Text('Centred',
style: TextStyle(fontSize: 32)),
),
Flexible(
child: Text('24.6 %',
style: TextStyle(fontSize: 48)),
),
],
),
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
margin: const EdgeInsets.only(right: 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 15)),
Text('BtnB', style: TextStyle(fontSize: 15)),
Text('BtnC', style: TextStyle(fontSize: 15)),
],
),
),
)
],
),
),
),
),

How to position these icons in Flutter?

I'm trying to re-create layout from Gmail, but I don't know how to position icons in my layout.
Here's an Image how I want these icons to look like:
Here's an image of what I already did in Flutter:
I want the icons to have a space between them and I'd like them to be at the same level of height as "McDonald Poland".
Is there anyone, who can help me?
Code:
import 'package:flutter/material.dart';
class GeneratedMailCouponScreen extends StatelessWidget {
final String couponImage;
GeneratedMailCouponScreen({Key key, #required this.couponImage}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(
Icons.arrow_back
)
],
),
Row(
children: [
Icon(
Icons.archive
),
SizedBox(width: 5.0),
Icon(
Icons.delete
),
SizedBox(width: 5.0),
Icon(
Icons.mail
),
SizedBox(width: 5.0),
Icon(
Icons.more_vert
)
],
)
],
),
SizedBox(height: 16.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text('Voucher', style: TextStyle(color: Colors.black, fontSize: 18.0)),
SizedBox(width: 8.0),
Container(
color: Colors.grey[200],
child: Padding(
padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 12.0),),
),
)
],
),
Row(
children: [
Icon(
Icons.star_border
)
],
)
],
),
SizedBox(height: 16.0),
Row(
children: [
Container(
height: 45.0,
width: 45.0,
decoration: BoxDecoration(
color: Colors.blue[100],
shape: BoxShape.circle
),
child: Center(
child: Text('M', style: TextStyle(fontSize: 20.0),),
)
),
Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('McDonalds Poland', style: TextStyle(color: Colors.black)),
SizedBox(width: 8.0),
Text('Wczoraj', style: TextStyle(color: Colors.grey))
],
),
Row(
children: [
Text('do mnie', style: TextStyle(color: Colors.grey)),
Icon(
Icons.expand_more
)
],
)
],
),
Row(
children: [
Icon(
Icons.reply
),
Icon(
Icons.more_vert
)
],
)
],
)
],
)
],
),
),
),
);
}
}
I have made some modifications to your code please check is it works for you
import 'package:flutter/material.dart';
class GeneratedMailCouponScreen extends StatelessWidget {
final String couponImage;
GeneratedMailCouponScreen({Key key, #required this.couponImage})
: super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [Icon(Icons.arrow_back)],
),
Row(
children: [
Icon(Icons.archive),
SizedBox(width: 5.0),
Icon(Icons.delete),
SizedBox(width: 5.0),
Icon(Icons.mail),
SizedBox(width: 5.0),
Icon(Icons.more_vert)
],
)
],
),
SizedBox(height: 16.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text(
'Voucher',
style: TextStyle(color: Colors.black, fontSize: 18.0),
),
SizedBox(width: 8.0),
Container(
color: Colors.grey[200],
child: Padding(
padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
child: Text(
'Odebrane',
style:
TextStyle(color: Colors.black, fontSize: 12.0),
),
),
)
],
),
Row(
children: [Icon(Icons.star_border)],
)
],
),
SizedBox(height: 16.0),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 45.0,
width: 45.0,
decoration: BoxDecoration(
color: Colors.blue[100], shape: BoxShape.circle),
child: Center(
child: Text(
'M',
style: TextStyle(fontSize: 20.0),
),
),
),
SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'McDonalds Poland',
style: TextStyle(color: Colors.black),
),
SizedBox(width: 8.0),
Text(
'Wczoraj',
style: TextStyle(color: Colors.grey),
)
],
),
Row(
children: [
Text('do mnie',
style: TextStyle(color: Colors.grey)),
Icon(Icons.expand_more)
],
)
],
),
Spacer(flex: 1,),
Row(
children: [Icon(Icons.reply), Icon(Icons.more_vert)],
)
],
)
],
),
),
),
);
}
}
I made a some changes. Now these icons are same height as text height, I hope works for you
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [Icon(Icons.arrow_back)],
),
Row(
children: [
Icon(Icons.archive),
SizedBox(width: 5.0),
Icon(Icons.delete),
SizedBox(width: 5.0),
Icon(Icons.mail),
SizedBox(width: 5.0),
Icon(Icons.more_vert)
],
)
],
),
SizedBox(height: 16.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text('Voucher',
style:
TextStyle(color: Colors.black, fontSize: 18.0)),
SizedBox(width: 8.0),
Container(
color: Colors.grey[200],
child: Padding(
padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
child: Text(
'Odebrane',
style:
TextStyle(color: Colors.black, fontSize: 12.0),
),
),
)
],
),
Row(
children: [Icon(Icons.star_border)],
)
],
),
SizedBox(height: 16.0),
Container(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
height: 45.0,
width: 45.0,
decoration: BoxDecoration(
color: Colors.blue[100], shape: BoxShape.circle),
child: Center(
child: Text(
'M',
style: TextStyle(fontSize: 20.0),
),
)),
SizedBox(
width: 16,
),
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Text('McDonalds Poland',
style:
TextStyle(color: Colors.black)),
SizedBox(width: 8.0),
Text('Wczoraj',
style:
TextStyle(color: Colors.grey)),
],
),
),
Container(
child: Row(
children: <Widget>[
Icon(Icons.reply),
Icon(Icons.more_vert)
],
),
)
],
),
),
Container(
child: Row(
children: [
Text('do mnie',
style: TextStyle(color: Colors.grey)),
Icon(Icons.expand_more)
],
),
)
],
),
),
),
],
),
),
],
),
),
),
);
}
this is work! You have to put the 'M' Container inside the Row and put the icons inside a Container
return Scaffold(
body: Container(
padding: EdgeInsets.only(top: 50),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
height: 45.0,
width: 45.0,
decoration: BoxDecoration(
color: Colors.blue[100], shape: BoxShape.circle),
child: Center(
child: Text(
'M',
style: TextStyle(fontSize: 20.0),
),
)),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('McDonalds Poland',
style: TextStyle(color: Colors.black)),
SizedBox(width: 8.0),
Text('Wczoraj',
style: TextStyle(color: Colors.grey))
],
),
Row(
children: [
Text('do mnie',
style: TextStyle(color: Colors.grey)),
Icon(Icons.expand_more)
],
)
],
),
],
),
Container(
padding: EdgeInsets.only(top: 50),
child: Row(
children: [
Icon(Icons.reply),
Icon(Icons.more_vert)
],
),
)
],
)
])),
);

Flutter Row Not Aligning to the Left

I'm having trouble aligning a row with text to the left of a column.
The layout looks like the following:
However, I would like the user's name ("Peter Jonathan") and the user's handle ("#pj"), to align to the left most side. Any advice on how I can do this?
Here is the current code I have:
class ProfilePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
elevation: 0.0,
// title: Text('Profile'),
),
body: new Container(
padding: EdgeInsets.fromLTRB(25.0, 0.0, 25.0, 10.0),
child: new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Container(
width: 100.0,
height: 100.0,
child: new Center(
child: new Text(
"PJ",
style: new TextStyle(fontSize: 40.0),
),
),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: new Border.all(color: Colors.purple),
),
),
new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Padding(
padding: EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new Text(
'100',
style: new TextStyle(fontSize: 20.0),
),
new Text('Followers'),
],
),
),
new Padding(
padding: EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new Text(
'100',
style: new TextStyle(fontSize: 20.0),
),
new Text('Following'),
],
),
),
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Text("Peter Jonathan",
style: new TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.left,
),
],
),
new Row(
children: <Widget>[
new Text("#pj",
style: new TextStyle(
fontSize: 18.0,
fontStyle: FontStyle.italic,
color: Color.fromRGBO(155, 155, 155, 1.0),
),
),
],
)
],
),
],
),
],
),
),
);
}
}
I've heard that using a flexible is key, but when I do that it's not compiling correctly. Do I need to wrap the name and handle in containers?
In your Code under second Column: Add - crossAxisAlignment: CrossAxisAlignment.start,
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[],
....