I made a row and I need to separate its children with space between, but it's not separating.
This is the code:
Container(
height: 51,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(width: 56, height: 51, child: ImageIcon(AssetImage("assets/images/treadmill.png"))),
SizedBox(width: 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text(
"EQUIPMENT",
style: TextStyle(
fontSize: 16,
fontFamily: "OpenSans",
fontWeight: FontWeight.w600
),
),
ImageIcon(AssetImage("assets/icons/delete.png"), color: Colors.red)
],
),
Text(
"1234567891235896211234E",
style: TextStyle(
fontSize: 14,
fontFamily: "OpenSans",
fontWeight: FontWeight.normal
),
),
],
)
],
),
),
And this is the result:
(ignore the "A" in the word)
I tried to put expanded, spacer, but all the attempts gave an error.
(I don't want to put SizedBox to make this space because there are several types of cell phone screens)
Why does this happen and what to do?
You can use IntrinsicWidth(have some cost)..
Container(
height: 51,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 56,
height: 51,
color: Colors.red,
),
IntrinsicWidth(
child: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"EQUIPAMENT",
style: TextStyle(
fontSize: 16,
fontFamily: "OpenSans",
fontWeight: FontWeight.w600),
),
Container(
width: 4,
height: 33,
color: Colors.red,
),
],
),
Text(
"1234567891235896211234E",
style: TextStyle(
fontSize: 14,
fontFamily: "OpenSans",
fontWeight: FontWeight.normal),
),
],
),
)
],
),
),
Give your right size all available space, and then your Equipament and trash can all available space. Wrap them both with expanded:
Container(
height: 51,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(width: 56, height: 51, child: ImageIcon(AssetImage("assets/images/treadmill.png"))),
SizedBox(width: 20),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Expanded(
child: Text(
"EQUIPMENT",
style: TextStyle(
fontSize: 16,
fontFamily: "OpenSans",
fontWeight: FontWeight.w600
),
),
),
ImageIcon(AssetImage("assets/icons/delete.png"), color: Colors.red)
],
),
Text(
"1234567891235896211234E",
style: TextStyle(
fontSize: 14,
fontFamily: "OpenSans",
fontWeight: FontWeight.normal
),
),
],
),
)
],
),
),
Related
I am supporting an app for landscape mode in which I want to align Text widgets in my custom List Tile(a container widget), but for some reason the alignment does not match and I get the following output
The out put I want is as follows
I use the following code to display the first output.
Container buildTile(Employee employee) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
border: Border.all(color: Colors.black, width: 1),
boxShadow: [
//BoxShadow
BoxShadow(
color: Colors.white,
offset: const Offset(0.0, 0.0),
blurRadius: 0.0,
spreadRadius: 0.0,
),
]),
width: MediaQuery.of(context).size.width * 0.7,
height: MediaQuery.of(context).size.height * 0.1,
margin: EdgeInsets.only(top: 10),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("ID:${employee.employeeId}",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 24)),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text("Mobile Number:",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20)),
Text("${employee.employeePhone}",
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 20))
],
),
],
),
),
Container(
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.height * 0.25),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text("Name:",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 24)),
Text("${employee.employeeName}",
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 24))
],
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text("Weekly Off:",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20)),
Text("${employee.employeeWeeklyOff}",
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 20))
],
),
],
),
),
Container(
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.width * 0.10),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"${employee.employeeRole}",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
Text(" ")
],
),
),
],
));
}
I tried wrapping the column in alignment widget but that didn't work. When I try to add margin/padding the entire tile contents are shifted.
Please help
In each column set crossAxisAlignment to start like this:
Column(
crossAxisAlignment: CrossAxisAlignment.start, // <-- add this
mainAxisSize: MainAxisSize.min,
children: [
Text("ID:${employee.employeeId}",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 24)),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text("Mobile Number:",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20)),
Text("${employee.employeePhone}",
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 20))
],
),
],
)
Use this Widget tree
N.B: it's simple. I didn't make it stylest
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
border: Border.all(color: Colors.black, width: 1),
boxShadow: const [
//BoxShadow
BoxShadow(
color: Colors.white,
offset: const Offset(0.0, 0.0),
blurRadius: 0.0,
spreadRadius: 0.0,
),
]),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
margin: EdgeInsets.all(8),
child: Padding(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
children: [
Text("data"),
Text("data"),
],
),
Spacer(),
Column(
children: [
Text("data"),
Text("data"),
],
),
Spacer(),
Column(
children: [
Text("data"),
Text("data"),
],
),
Spacer(),
IconButton(onPressed: () {
}, icon: Icon(Icons.edit))
],
),
),
),
I'm new to flutter and currently practicing the layout options. I need help with layout from the image below, I used a Row that has 2 children, 2 Columns with 4 Text Widgets. The first column has the text PASSENGER, CONTACT, ETC. and the second columns contains 4 other Text Widgets Jessica Hyde, Numbers and Luggage (I've nested '3 big suitcases and 1 carry on' Text in a Column and in a Row the Text 'French speaker, smoker').
The problem I have is that they are not aligned like in the picture, PASSENGER with the name, CONTACT with the number and etc. My results look like this:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'PASSENGER',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
),
// SizedBox(
// height: 10.0,
// ),
Text(
'CONTACT',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
),
SizedBox(
height: 10.0,
),
Text(
'LUGGAGE',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
),
SizedBox(
height: 20.0,
),
Text(
'OTHER',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 12.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Wade Wilson',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
Text(
'+1 212+759-3000',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
SizedBox(
height: 10.0,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'3 big suitcases',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
SizedBox(
height: 2.0,
),
Text(
'1 carry on',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
],
),
SizedBox(
height: 10.0,
),
Row(
children: [
Text(
'French speaker, ',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
Text(
'smoker',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
],
),
],
),
),
],
);
What is the best way to fix this?
Thanks in advance for your help!
import 'package:flutter/material.dart';
class something extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"The Header",
style: TextStyle(
fontSize: 16,
color: Colors.black87,
fontWeight: FontWeight.bold),
),
Padding(padding: EdgeInsets.only(top: 20)),
_forRows(),
_forRows(),
_forRows(),
_forRows(),
],
);
}
}
Widget _forRows() {
return Row(
children: [
Expanded(
child: Text(
"BANANAS1",
style: TextStyle(fontSize: 16, color: Colors.black87),
),
flex: 2,
),
Expanded(
child: Text("bananas2"),
flex: 6,
)
],
);
}
This might solve your problem.
I think you need to pass width to first text. Ty with below line it will help you
return Scaffold(
body: SafeArea(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Passengers Info"),
Container(height: 50,),
Row(
children: <Widget>[
Container(width: 5,),
Container(child: Text("PASSENGER"),width: 100,),
Expanded(child: Text("Jessica Hyde")),
]
),
Container(height: 5,),
Row(
children: <Widget>[
Container(width: 5,),
Container(child: Text("CONTACT"),width: 100,),
Expanded(child: Text("+ your number")),
]
),
Container(height: 5,),
Row(
children: <Widget>[
Container(width: 5,),
Container(child: Text("LUGGAGE"),width: 100,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("3 big suitcases"),
Text("1 carry on"),
],
)
]
),
Container(height: 5,),
Row(
children: <Widget>[
Container(width: 5,),
Container(child: Text("OTHER"),width: 100,),
Expanded(child: Text("French speaker, smoker")),
]
),
],
)
),
)
);
I am trying to align the name of the food and the price to the left side and the Icon to the right. I can't seem to get it with Row, Stack, or a mixture of Container and Column Widgets.
Here is the code:
return Container(
decoration: BoxDecoration(
color: Colors.blue
),
child: Column(
children: <Widget>[
Container(
width: 175,
height: 175,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(90),
image: DecorationImage(fit: BoxFit.cover, image: img)),
),
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(name,
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
)),
SizedBox(height: 4),
Row(
children: <Widget>[
Text("\$" + price.toString(),
style: GoogleFonts.ubuntu(
fontSize: 16,
fontWeight: FontWeight.w600,
)),
Text("/kg",
style: GoogleFonts.ubuntu(
fontSize: 14,
fontWeight: FontWeight.w400,
))
],
)
],
),
Icon(Icons.add_circle_outline, size: 32)
],
),
],
),
);
}
Here is what it looks right now: https://cdn.discordapp.com/attachments/626321327791538188/727585975349280889/Capture10.PNG
You can force widgets in Columns and Rows to take up as much available space as possible with the Expanded, Flexible, and Spacer(which is just an empty expanded) widgets. There are multiple ways to accomplish what you need, each with their own benefits, but should all accomplish what you need.
Probably the easiest method is to add a Spacer in between the Icon and Column containing Text:
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(name,
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
)),
SizedBox(height: 4),
Row(
children: <Widget>[
Text("\$" + price.toString(),
style: GoogleFonts.ubuntu(
fontSize: 16,
fontWeight: FontWeight.w600,
)),
Text("/kg",
style: GoogleFonts.ubuntu(
fontSize: 14,
fontWeight: FontWeight.w400,
))
],
)
],
),
Spacer(),
Icon(Icons.add_circle_outline, size: 32)
],
),
The alternative is to wrap either the Column containing Text or Icon in Expanded, though I would recommend wrapping the Column to give the Text extra room.
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(name,
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
)),
SizedBox(height: 4),
Row(
children: <Widget>[
Text("\$" + price.toString(),
style: GoogleFonts.ubuntu(
fontSize: 16,
fontWeight: FontWeight.w600,
)),
Text("/kg",
style: GoogleFonts.ubuntu(
fontSize: 14,
fontWeight: FontWeight.w400,
))
],
)
],
),
),
Icon(Icons.add_circle_outline, size: 32)
],
),
I have the following container and in it I call a function to create child widget. The issue it that child row always remain as center align. I have tried two methods
alignment:Alignment.topLeft,
I have tried to embed it further into a column and tried crossAxisAlignment: CrossAxisAlignment.start.
Both methods fails to align the element to the left. It keep remains into the center part of the container. What could be wrong below is my codes.
Container(
alignment:Alignment.topRight,
margin: const EdgeInsets.fromLTRB(10, 10, 0, 0),
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildDateTime("datetime"),
]
)
],
)
),
Below is the widget which I call to build the row.
Widget buildDateTime(String plate) {
return new Container(
child: Container(
color: Colors.transparent,
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.access_time, size: 15.0, color: lightGrey),
Text(
' 23/01/20202',
style: new TextStyle(
color: lightGrey,
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
Text(
' 09:00',
style: new TextStyle(
color: lightGrey,
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
],
),
),
);
}
Here is the screen shot.
I've made the Clock icon align to the left, Date centered and time aligned to the right. Is this what you are trying to achieve?
Container(
color: Colors.grey,
alignment:Alignment.topRight,
padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
child: buildDateTime("datetime")
);
Widget buildDateTime(String plate) {
return new Container(
child: Container(
color: Colors.transparent,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(Icons.access_time, size: 15.0, color: Colors.grey[100]),
Text(
' 23/01/20202',
style: new TextStyle(
color: Colors.grey[100],
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
Text(
' 09:00',
style: new TextStyle(
color: Colors.grey[100],
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
],
),
),
);
}
My result:
I am unable to reproduce the issue you mentioned. For me, its occupies full width.
Try this,
Widget buildDateTime(String plate) {
return Align(
alignment: Alignment.centerLeft,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(Icons.access_time, size: 15.0, color: Colors.grey),
Text(
' 23/01/20202',
style: const TextStyle(
color: Colors.grey,
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
Text(
' 09:00',
style: const TextStyle(
color: Colors.grey,
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
],
),
);
}
Here is what my container looks like on the emulator (Pixel 3) :
And now this is what it looks like on my Galaxy S9 :
The text of my column is overflowing. I thought it would "adapt" automatically, but it seems that it's not the case.
The code of the 4 elements that are overflowing is :
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
//mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.turned_in_not,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'Economy',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'Terminal 1',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.airline_seat_legroom_normal,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'Standard legroom',
style: TextStyle(
//fontFamily: 'SamsungSans',
fontSize: 14.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
),
SizedBox(
height: 15.0,
),
Row(
children: <Widget>[
Icon(
Icons.card_travel,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'1 included',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
)
],
)
],
),
Any idea on what should I change so that the text doesn't overflow its container ?
Thank you.
I would suggest to wrap your overflowing widgets with Expanded widget. Hope it will help.
UPD
I just used code above on some old device with mdpi resolution. To fix overflow I've added Expanded to the second Column, it solves the overflow issues, but it 'Standard legroom' text is still overflowing. So in case of really long String I would suggest to add overflow: TextOverflow.ellipsis for your Text.
In case you want to keep whole string, just add Expanded to the overflowing Text widget. But in this case there will be to lines text, and it could not be a solution.
Anyway here is my final code:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
//mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.turned_in_not,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Text(
'Economy',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
],
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Text(
'Terminal 1',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
],
),
],
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.airline_seat_legroom_normal,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Expanded(
child: Text(
'Standard legroom',
overflow: TextOverflow.ellipsis,
style: TextStyle(
//fontFamily: 'SamsungSans',
fontSize: 14.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
),
],
),
SizedBox(
height: 15.0,
),
Row(
children: <Widget>[
Icon(
Icons.card_travel,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Text(
'1 included',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
],
)
],
),
)
],
);
]2