Related
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 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),
),
)
],
);
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)),
],
),
),
)
],
),
),
),
),
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)
],
),
)
],
)
])),
);
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>[],
....