Trying to right align a container with text view child, it has a row parent which is inside another column, tried number of solutions from Stack Overflow, didn't work.
Code
///Transactions Heading
new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Container(
alignment: Alignment.centerLeft,
margin: new EdgeInsets.only(top: 20.0, left: 10.0),
child: new Text(
"Transactions",
style: new TextStyle(
color: primaryTextColor,
fontSize: 25.0,
fontWeight: FontWeight.w700,
letterSpacing: 0.1,
),
),
),
new Container(
margin: new EdgeInsets.only(top: 25.0),
child: new Text(
currentGoalTransactions.length.toString() + " items",
style: new TextStyle(
color: darkHeadingsTextColor, fontSize: 15.0),
),
),
],
),
]);
Want to align the 2 items text to the right
Screenshot
Use the mainAxisAlignment property in Row widget.
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
...
)
Use Spacer which will get remaining space and will divide the widget equally
Row(
children: <Widget>[
Text("Text 1", style: TextStyle(fontSize: 20),),
Spacer(),
Text("Text 2", style: TextStyle(fontSize: 20),),
Spacer(),
Text("Text 3", style: TextStyle(fontSize: 20),),
],
),
Output:
Screenshot:
You can also try Wrap like this:
Wrap(
spacing: 50, // spacing between each of the widgets below
children: <Widget>[
Text("One"),
Text("Two"),
Text("Three"),
],
)
Related
Obviously, if two items only, MainAxisAlignment.space Between would be enough, but I have three items, so I have tried with Align:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Align(
alignment: Alignment.topLeft,
child: Text('Left',
style: TextStyle(
fontSize: 8.0,
fontWeight: FontWeight.bold,
),),
),
Align(
alignment:Alignment.center,
child: Text('Center',
style: TextStyle(
fontSize: 9.0,
fontWeight: FontWeight.bold),
),
),
Align(
alignment: Alignment.topRight,
child: Text('Right',
style: TextStyle(
fontSize: 9.0,
fontWeight: FontWeight.bold,
)),
),
],
),
But contents are still aligned to center in general, I also tried using Spacer() before and after the centered element, the result was much like spaceEvenly but with spaces in between.
What I want is the centered element to be fixed in the center no matter what other elements contentes, the left element to be fixed on the left, the right element on the right.
EDIT
space Between is not working for sure, see doc:
MainAxisAlignment.spaceBetween:
Divides the extra space evenly between children.
This does not garantie that the centered element go to center.
Try below code, remove Align Widget refer Flutter Layout here
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Left',
style: TextStyle(
fontSize: 8.0,
fontWeight: FontWeight.bold,
),
),
Text(
'Center',
style: TextStyle(fontSize: 9.0, fontWeight: FontWeight.bold),
),
Text(
'Right',
style: TextStyle(
fontSize: 9.0,
fontWeight: FontWeight.bold,
),
),
],
),
Result->
Answer Updated:
Wrap your Text widget inside Expanded or Flexible Widget
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
'Leftvsdvjwhgehdxuguhe duyxegfygwedue dw',
style: TextStyle(
fontSize: 8.0,
fontWeight: FontWeight.bold,
),
),
),
Expanded(
child: Text(
'Center',
style: TextStyle(fontSize: 9.0, fontWeight: FontWeight.bold),
),
),
Expanded(
child: Text(
'Right',
style: TextStyle(
fontSize: 9.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
Result Image->
Finally, to get rid of the equal space caused by Expanded, I removed Expanded from the centered element, then set the fit properly to loose for the left and right elements.
To align sides, I surrounded the left and right elements with 'Row', to set 'MainAxisAlignment' to start and end respectively, now it works:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
fit: FlexFit.loose,//Added this
child: Row(
//Surround the Left element with Row aligned to start
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Left',
style: TextStyle(
fontSize: 8.0,
fontWeight: FontWeight.bold,
),
),
]),
),
//No expanded needed to the centered child
Text( 'Center',style: TextStyle(
fontSize: 9.0,
fontWeight: FontWeight.bold,
),),
Expanded(
fit: FlexFit.loose,//Added this too
child: Row( //Surround the right element with Row aligned to end
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
'Right',
style: TextStyle(
fontSize: 9.0,
fontWeight: FontWeight.bold,
),
),
]),
),
],
)
Like #Yunus Emre Çelik said, you dont need to add Align, spaceBetween is already doing that. But, if your problem still persists, maybe you have a Column as parent of your Row that need crossAxisAlignment: CrossAxisAlignment.stretch,. Or if you dont, check if your Row can expand all width space available.
Anyway you can set your Row like that:
Row(
children: [
Expanded(...),
Expanded(...),
Expanded(...),
])
This force to set equals space to each child
But if you dont want to set equals space for all, can do that:
Row(
mainAxisAlignment: MainAxisAlignment.center, // <- center items
children: [
Flexible( // <-- flexible space
child: Container(
alignment: Alignment.centerLeft,
color: Colors.red,
child: Text('left left left left left left left left left left left '),
),
),
Container( // <-- center
alignment: Alignment.center,
color: Colors.blue,
child: Text('center'),
),
Flexible( // <-- flexible space
child: Container(
alignment: Alignment.centerRight,
color: Colors.green,
child: Text('right'),
),
),
],
),
When using Unicode text in flutter there seems to be a lot of whitespace in each character which makes it hard to align. In the code and picture below, I'm trying to get the 35m sit on the cross arrows with no space in between. I'm also trying to get the three stars at the start to center align vertically with the word starburst and then center align the (35m and arrows), starburst, and thee stars all to center align with each other vertically.
Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
children: [
Text(
'\u{2605}' * 3,
style: TextStyle(
fontSize: 18.0,
),
),
Text(
'Starburst',
style: TextStyle(
fontSize: 28.0,
),
),
Column(
children: [
Text(
'35m',
style: TextStyle(
fontSize: 18.0,
),
),
Text(
'\u{2194}',
style: TextStyle(fontSize: 35.0),
),
],
)
],
),
],
),
),
);
Make Row crossAxisAlignment property to CrossAxisAlignment.center
Row(
crossAxisAlignment: CrossAxisAlignment.center
children: [....
And
Make Column mainAxisAlignment propert to
MainAxisAlignment.center
Column(
mainAxisAlignment: MainAxisAlignment.center
children: [...
You can use Stack instead of Column and align the Text as per your UI specifications:
Output Using Column:
Output Using Stack:
Full code:
return Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'\u{2605}' * 3,
style: TextStyle(
fontSize: 18.0,
),
),
Text(
'Starburst',
style: TextStyle(
fontSize: 28.0,
),
),
// SizedBox(width: 5.0),
Container(
width: 50.0,
child: Center(
child: Stack(
children: [
Positioned(
top: 4,
child: Text(
'35m',
style: TextStyle(
fontSize: 18.0,
),
),
),
Text(
'\u{2194}',
style: TextStyle(fontSize: 40.0),
),
],
),
),
),
],
),
],
),
),
);
You might have to tweak Stack widget's children a bit, but I hope this answer gives the idea.
Now I am using this code to show text in flutter, this is my code:
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(top: 8, bottom: 8.0),
child: Text(
item.subName,
softWrap: true,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
],
),
sometimes the text item.subName is too long, how to make it auto expand or render in new line when the text overflow? I have tried to add this but still not work:
softWrap: true,
This is the error:
Try this
new Container(
child: Row(
children: <Widget>[
Flexible(
child: new Text("sample text"))
],
));
Row(
children: <Widget>[
Expanded(
child: new Text("your text"))
],
)
Widget build(BuildContext context){
final size = MediaQuery.of(context).size;
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: size.width * 0.4, // Choose a number that works for you
child: Text(
item.subName,
softWrap: true,
overflow: TextOverflow.clip,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
],
),
In my fluttr App, I want to display a text on the left side and a button on the right side of the same row. I gave the proper alignment but still its not coming, can any one let me know where I made the mistake, below is the code
Widget build(BuildContext context) {
return Scaffold(body:SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 80.0,
),
child: Container(
child: Row(children: <Widget>[
new Container(
alignment: Alignment.topLeft,
child: Align(
child: Text(
'Filters',
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
),
),
Container(
alignment: Alignment.topRight,
child: OutlineButton(
child: Text(
'Reset',
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
onPressed: null,
)),
]),
))));
}
output of code
how to align filter to left and Reset button to right of the screen?
Thank you
Couple of ways to get it:
1> use mainAxisAlignment: MainAxisAlignment.spaceBetween, in Row()
OR
2> Use Spacer() widget between your widgets.
Code:
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween, // first way
children: <Widget>[
new Container(
alignment: Alignment.topLeft,
child: Align(
child: Text(
'Filters',
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
),
),
Spacer(), // second way
Container(
alignment: Alignment.topRight,
child: OutlineButton(
child: Text(
'Reset',
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
onPressed: null,
)),
])
you can do that by providing an axis alignment to the row.
this will place items on both end of the row
Row{
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget>[
Text('Left Text'),
OutlineButton(
child:Text('Right Button',),
),
]}
i suggest reading this article to fully understand how layouts work in flutter [https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041][1]
Row{
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children:<Widget>[
Text('Left Text'),
OutlineButton(
child:Text('Right Button',),
),
]}
This should suffice your requirement I suppose
I have a column with three rows:
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print('card of course clicked');
},
child: Card(
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.circular(8.0)),
child: Container(
height: 144,
child: Row(children: [
Padding(
padding: EdgeInsets.all(16.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
child: Image.network(_model._schoolThumb))),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 16),
Align(
alignment: Alignment.center,
child: Text(_model._schoolName,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18)),
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.location_on, color: Colors.grey[700]),
Container(width: 8),
Text(_model._guides,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400)),
],
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.attach_money, color: Colors.grey[700]),
Container(width: 8),
Text(_model._priceFrom,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400))
],
)
],
)
]),
),
),
);
}
As a result, I have three rows aligned to start.
How can I align the first Text() in the center? Giving properties to the text and wrapping in Expanded, Container, Stack didn't help, or I did it in the wrong way. Thanks in advance!
EDIT
Whole build() method attached
Problem:
By default, the width of the Column is set to the width of the widest child widget of Column.
Solution:
You need to wrap your Column with either Expanded or Flexible.
Like below.
Expanded(
child: Column(
children: <Widget>[
...
],
),
)
or
Flexible(
child: Column(
children: <Widget>[
...
],
),
)
And then need to use the Align or Center widget to set the alignment to your child widget in your case the Text widget.
Like below:
Align(
alignment: Alignment.center,
child: Text(
"Test",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
),
or
Center(
child: Text(
"Test",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
),
UPDATE
You haven't given a width to the column so it does not know the remaining width that it can take. So wrap your column in a flexible which will give it the width remaining to expand.
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 16),
Row(