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),
),
)
],
);
Related
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)),
],
),
)
],
),
);
I have this but when i show on the screen, it shows everything in vertical no wrap. and i need it to show like a row everything. i am creating a list of widgets first with all the information that i need for presenting the information with a wrap widget but went i take the list it shows all the information but no wraping.
Widget _calcularPrecios(int i, double valor) {
double trimestral = valor *3;
double semestral = trimestral *2;
double anual = semestral *2;
double contado = anual-anual*0.12;
if(i==1) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 5,
height: 50,
color: Color(0xFF1BB394),
),
Container(
decoration: BoxDecoration(
color: Color(0xFFE0F7FA)
),
width: 120,
height: 50,
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Mensual', style: TextStyle(
fontSize: 15, fontWeight: FontWeight.bold),),
Text('\$'+valor.toStringAsFixed(2), style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w500))
],
),
),
)
],
);
}else if(i==2) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 5,
height: 50,
color: Color(0xFF1BB394),
),
Container(
decoration: BoxDecoration(
color: Color(0xFFE0F7FA)
),
width: 120,
height: 50,
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Trimestral', style: TextStyle(
fontSize: 15, fontWeight: FontWeight.bold),),
Text('\$'+trimestral.toStringAsFixed(2), style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w500))
],
),
),
)
],
);
}else if(i==3) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 5,
height: 50,
color: Color(0xFF1BB394),
),
Container(
decoration: BoxDecoration(
color: Color(0xFFE0F7FA)
),
width: 120,
height: 50,
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Semestral', style: TextStyle(
fontSize: 15, fontWeight: FontWeight.bold),),
Text('\$'+semestral.toStringAsFixed(2), style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w500))
],
),
),
)
],
);
}else if(i==4) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 5,
height: 50,
color: Color(0xFF1BB394),
),
Container(
decoration: BoxDecoration(
color: Color(0xFFE0F7FA)
),
width: 120,
height: 50,
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Anual', style: TextStyle(
fontSize: 15, fontWeight: FontWeight.bold),),
Text('\$'+anual.toStringAsFixed(2), style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w500))
],
),
),
)
],
);
}else if(i==5) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 5,
height: 50,
color: Color(0xFF1BB394),
),
Container(
decoration: BoxDecoration(
color: Color(0xFFE0F7FA)
),
width: 120,
height: 50,
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Contado', style: TextStyle(
fontSize: 15, fontWeight: FontWeight.bold),),
Text('\$'+contado.toStringAsFixed(2), style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w500))
],
),
),
)
],
);
}
}
List <Widget> _calcular(double valor){
List<Widget> temporal =[];
for(var i = 1; i<6;i++){
temporal.add(_calcularPrecios(i,valor));
}
return temporal;
}
(_calcular(valor).isNotEmpty)? Wrap(
children: _calcular(valor),
): Center(child: Text('Presione boton calcular')),
I fixed the problem was that all the widgets in the list takes the size of the screen width
so all the rows in the list i put in a SizedBox
Desired result is to align the Container in the middle of the screen. Vertical alignment is done. But horizontal alignment is not happening.
I expected that crossAxisAlignment.center would take care of it.
Desired result:
Current outcome:
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text(
'Failed to login. Try again later.',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
decoration: BoxDecoration(
color: Colors.red[800],
),
padding: EdgeInsets.symmetric(vertical: 100, horizontal: 30),
),
],
);
You need to wrap your container with a Center widget.
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Container(
child: Text(
'Failed to login. Try again later.',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
decoration: BoxDecoration(
color: Colors.red[800],
),
padding:
EdgeInsets.symmetric(vertical: 100, horizontal: 30),
),
),
],
),
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 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)")),
],
),
),
],
),
);
}