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)
],
),
)
],
)
])),
);
Related
I want to position my time text on top or bottom on the left side of the bubble chat like Line app messanger.
Here is what I have:
Currently it is positioned on the center on the left side of the bubble.
This is what I want:
And this is my code:
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(sendStatus,
style: TextStyle(
fontSize: 11
),),
Text(date,
style: TextStyle(
fontSize: 11
),)
],
),
Container(
child: Align(
alignment: Alignment.topRight,
child : Column(
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
child: Align(
alignment: Alignment.topRight,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(horizontal: 12,vertical: 12,),
margin: EdgeInsets.symmetric(horizontal: 10,vertical: 2),
decoration: BoxDecoration(
color: Color(0xFF2381d0),
borderRadius: BorderRadius.circular(5),
),
child: Container(
constraints: BoxConstraints(maxWidth: 250),
child: Text(
message,
style: TextStyle(fontSize: 16,color: Colors.white),
textAlign: TextAlign.left,
maxLines: 100,
overflow: TextOverflow.ellipsis,
),
),
),
SizedBox(width: 5,),
],
),
),
),
...
],
),
],
),
),
),
],
);
Is there any solution?
Check the example below I have made some changes taking your example:
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Column(mainAxisAlignment: MainAxisAlignment.end, children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"Brian Miller",
style: TextStyle(fontSize: 11),
),
Text(
"14/11/2021",
style: TextStyle(fontSize: 11),
)
],
),
),
Align(
alignment: Alignment.topRight,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(
horizontal: 12,
vertical: 12,
),
margin: EdgeInsets.symmetric(
horizontal: 10, vertical: 2),
decoration: BoxDecoration(
color: Color(0xFF2381d0),
borderRadius: BorderRadius.circular(5),
),
child: Container(
constraints: BoxConstraints(maxWidth: 250),
child: Text(
"This is the message for the recasdflasndfjansdkfkadf sadfaw eroisad faoisdf weorieiving end person",
style: TextStyle(
fontSize: 16, color: Colors.white),
textAlign: TextAlign.left,
maxLines: 100,
overflow: TextOverflow.ellipsis,
),
),
),
SizedBox(
width: 5,
),
],
),
),
],
),
],
),
],
)
]),
),
),
);
}
}
This has the functionality for making the time on bottom of the left card.
I have a column in and in column i have rows. I want to make rows start in same line.The problem is i cannot put in line the rows.Normally without rows column's texts were in line but i needed to put icons in front of the text so make them as row.I need help with this problem.
This is my code:
Container(
margin: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 58,
),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/images/foldertree.png', scale: 3),
Text('Sınırsız belge',
textAlign: TextAlign.center,
style:
TextStyle(fontSize: 18, color: Colors.white)),
],
)),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/images/t.png', scale: 3),
Text('Metin Algılama (OCR)',
textAlign: TextAlign.center,
style:
TextStyle(fontSize: 18, color: Colors.white)),
],
)),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.ac_unit,
color: Colors.blue,
size: 10.0,
),
Text('Word\'e Dönüştür',
textAlign: TextAlign.center,
style:
TextStyle(fontSize: 18, color: Colors.white)),
],
)),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/images/prohibited.png', scale: 3),
Text('Reklam YOK',
textAlign: TextAlign.center,
style:
TextStyle(fontSize: 18, color: Colors.white)),
],
))
],
)),
This how it looks:
This is how i want it to look like:
Just replace mainAxisAlignment.center to mainAxisAlignment.start for the rows.
...
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [...
Replace mainAxisAlignment.center with mainAxisAlignment: MainAxisAlignment.start, on Row.
Container(
margin: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 58,
),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.asset('assets/images/foldertree.png', scale: 3),
// Icon(Icons.ac_unit),
Text('Sınırsız belge',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, color: Colors.white)),
],
)),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.asset('assets/images/t.png', scale: 3),
// Icon(Icons.ac_unit),
Text('Metin Algılama (OCR)',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, color: Colors.white)),
],
)),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(
Icons.ac_unit,
color: Colors.blue,
size: 10.0,
),
Text('Word\'e Dönüştür',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, color: Colors.white)),
],
),
),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.asset('assets/images/prohibited.png', scale: 3),
// Icon(Icons.ac_unit),
Text('Reklam YOK',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, color: Colors.white)),
],
),
)
],
),
);
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('='), //
],
),
)
I am new to flutter and I am building my first app.
I use Staggered Grid View (https://pub.dev/packages/flutter_staggered_grid_view#-readme-tab-) which should behave like the normal Grid View.
My settings are: body: StaggeredGridView.count( crossAxisCount: 4 ...
which means, that I can arrange 4 elements next to each other. Everything is working fine.
But now I want to force one element in the next column and place it in the middle and not next to the other ones. How can I do that?
Thanks for help!
body: StaggeredGridView.count(
crossAxisCount: 4,
crossAxisSpacing: 12.0,
mainAxisSpacing: 12.0,
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
children: <Widget>[
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Row
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Material
(
child: Padding(
child: Icon(Icons.store, color: Colors.black54, size: 40.0),
padding: const EdgeInsets.only(right: 15.0),)
),
Column
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Text('Test', style: TextStyle(color: Colors.redAccent)),
Text('Test', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 20.0))
],
),
]
),
),
onTap: () => print('Not set yet'),
),
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Row
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Material
(
child: Padding(
child: Icon(Icons.store, color: Colors.black54, size: 40.0),
padding: const EdgeInsets.only(right: 15.0),)
),
Column
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Text('Test', style: TextStyle(color: Colors.redAccent)),
Text('Test', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 20.0))
],
),
]
),
),
onTap: () => print('Not set yet'),
),
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Row
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Material
(
child: Padding(
child: Icon(Icons.store, color: Colors.black54, size: 40.0),
padding: const EdgeInsets.only(right: 15.0),)
),
Column
(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>
[
Text('test', style: TextStyle(color: Colors.redAccent)),
Text('test', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontSize: 20.0))
],
),
]
),
),
onTap: () => print('Not set yet'),
),
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Column
(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>
[
Material
(
color: Colors.teal,
shape: CircleBorder(),
child: Center
(
child: Icon(Icons.settings_applications, color: Colors.white, size: 30.0),
)
)
]
),
),
),
_buildTile(
Padding
(
padding: const EdgeInsets.all(24.0),
child: Column
(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>
[
Material
(
color: Colors.teal,
shape: CircleBorder(),
child: Center
(
child: Icon(Icons.settings_applications, color: Colors.white, size: 30.0),
)
)
]
),
),
),
//THIS IS THE ELEMENT I WANT TO FORCE TO THE NEXT COLUMN AND CENTER
_buildTile(QrImage(data: "1234567890", version: QrVersions.auto, size: 200.0,),),
],
staggeredTiles: [
StaggeredTile.extent(4, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(4, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(4, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(1, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(1, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
StaggeredTile.extent(1, (MediaQuery.of(context).size.height-kToolbarHeight-MediaQuery.of(context).padding.top-(8+12)*2)/6),
],
),
);
}
Widget _buildTile(Widget child, {Function() onTap}) {
return Material(
elevation: 14.0,
borderRadius: BorderRadius.circular(12.0),
shadowColor: Color(0x802196F3),
child: InkWell
(
// Do onTap() if it isn't null, otherwise do print()
onTap: onTap != null ? () => onTap() : () { print('${MediaQuery.of(context).padding.top}'); },
child: child
)
);
}
}
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)")),
],
),
),
],
),
);
}