I'm a little stumped here but i'm trying to align two text widgets at the vertical start in a row in Flutter but no matter what I try to do the text is centred in the text widget with less text. I'm trying to get the 'Address' title and the actual address to both start at the top vertically in the row but because the actual address is longer it always centres the Address title (in below image address is centred in the first job in the list).
This is the code that I am using:
Column(children: <Widget>[
Row(children: <Widget>[
Text('Status: ', style: TextStyle(fontWeight: FontWeight.bold),),
Text(job['status'])
],),
Row(children: <Widget>[
Text('Engineer: ', style: TextStyle(fontWeight: FontWeight.bold),),
Flexible(child: Text(job['eng']))
],),
Row(mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[
Text('Address: ', style: TextStyle(fontWeight: FontWeight.bold),),
Flexible(child: Text(job['address']))
],)
],)
I've tried to mainaxisalignment.start on the row but its not working...any ideas anyone?
Try crossAxisAlignment: CrossAxisAlignment.start on your Row
I'm not sure i understand what exactly do you want to do but maybe you want to use Column instead of Row for Address with crossAxisAlignment
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Address: ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(job['address'])
],
)
or maybe
Row(
children: <Widget>[
Flexible(
child: RichText(
text: TextSpan(
text: 'Address: ',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
children: [
TextSpan(
text: '23 Test Street, Test City',
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.black),
),
],
),
),
),
],
)
Related
Does anybody knows how to make (in a easy way) upper index in text field?
My code:
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text(
widget.weather.temp.round().toString(),
style: TextStyle(
color: Colors.white,
fontSize: 150,
),
Text(
'°C',
style: TextStyle(
fontSize: 50.0,
),
)
],
),
This code gives me bottom aligmnet (index)
and how to make upper index like this:
Try this text
Text("${widget.weather.temp.round().toString()}\u00b0\u1d9c")
I would like to align left elements vertically and same with right one with padding, here is what I got as a result, the elements are not aligned and I cannot insert padding in the second row so that left elements are aligned
return InkWell(
child: Column(
children: <Widget>[
Row(
children:<Widget> [
Padding(padding:EdgeInsets.fromLTRB(18.0, 0.0, 0.0, 0.0)),
Text(
product.libelle,
style: theme.textTheme.title,
maxLines: 1,
textAlign: TextAlign.left,
),]),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget> [
Text(
product.description,
style: theme.textTheme.subtitle,
maxLines: 1,
),
RaisedButton( onPressed: () {},
child: new Text("S\'abonner"),
)
]),
),
);
Use Text Widget and TextAlign.justify :)
Text('my String', textAlign: TextAlign.justify),
Text( 'Vinay',
**textAlign: TextAlign.justify,**
style:TextStyle() ),
incase of Rich Text
RichText(
**textAlign: TextAlign.justify,**
text: TextSpan( style: TextStyle(color: Colors.black, fontSize: 36),
children: <TextSpan>[
TextSpan(text: 'Woolha ', style: TextStyle(color: Colors.blue)),
TextSpan(text: 'dot '),
TextSpan(text: 'com', style: TextStyle(decoration: TextDecoration.underline))]))
Would you try to wrap second row with Padding widget?
Padding(
padding: EdgetInsets.symmetric(horizontal: 18.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget> [
Text(
product.description,
style: theme.textTheme.subtitle,
maxLines: 1,
),
RaisedButton( onPressed: () {},
child: new Text("S\'abonner"),
)
]),
)
Your top level widget should be a Row, since you want to horizontally position your widgets next to each others. So what you should do instead is use the following structure (pseudocode):
Row
Column
Text (title)
Text (subtitle)
Button
It's also important to use the correct alignment properties (MainAxisAlignment.spaceBetween on Row so that there is a space between the two main elements and CrossAxisAlignment.start + MainAxisAlignment.center on Column to center things).
I created a pen to demonstrate it: https://codepen.io/rbluethl/pen/QWyNQjE
Hope that helps!
Please try this
Just add below 2 line of code inside you Column Widget.
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
So, I want the row with a string of 2 lines ("Some long string with 2 lines heres") to be properly aligned with the string of 1 line: ("Name:"), but I want to do this WITHOUT checking the string length.
This is my code for the row:
Row(
children: <Widget>[
Text(
title,
style: Theme.of(context).textTheme.headline6.copyWith(height: 1.24),
),
Spacer(),
Container(
width: 242.0,
alignment: Alignment.bottomRight,
child: Text(
text,
textAlign: TextAlign.end,
maxLines: 2,
style: Theme.of(context).textTheme.bodyText1.apply(
color: kGrey,
),
),
),
],
);
As for the result I want, here's an image example:
Use crossAxisAlignment Row parameter to align the text to start crossAxisAlignment: CrossAxisAlignment.start
Solution-
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: Theme.of(context)
.textTheme
.headline6
.copyWith(height: 1.24),
),
Spacer(),
Container(
width: 242.0,
alignment: Alignment.bottomRight,
child: Text(
text,
textAlign: TextAlign.end,
maxLines: 2,
style: Theme.of(context).textTheme.bodyText1.apply(
color: kGrey,
),
),
),
],
),
Hope this will help you If you have any doubts ask in comment.
I'm having trouble aligning widgets. I have seen questions on here asking about similar things, however, none of them seem to work for my specific task. I'm trying to create a widget containing an icon and two text widgets. The icon is supposed to be centered over the first text widget, and the other text widget is supposed to be aligned with the baseline of the first.
The way I have gone about doing this is to place the icon and the first text widget in a column, and then place that column in a row together with the second text widget. I'm using crossAxisAlignment: CrossAxisAlignment.baseline and textBaseline: TextBaseline.ideographic in the row widget but for some reason the second text aligns with the icon. It looks like this:
If I instead use crossAxisAlignment: CrossAxisAlignment.end the text widgets do not align properly:
I have tried to put the text widgets in a row and place them in a column together with the icon, but then the icon is no longer centered over the first text widget:
Here's the code used for the first image, the other images are just rearrangements of the same code.
return Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
widget.icon,
color: color_text_highlight,
size: 20,
),
Text(
widget.data,
style: TextStyle(
fontSize: 28,
fontFamily: 'Quicksand',
color: color_text_highlight,
),
),
],
),
SizedBox(width: 5),
Text(
widget.label,
style: TextStyle(
fontSize: 12,
fontFamily: 'Roboto',
color: color_text_dark,
)
),
],
);
Any help is appreciated!
Column defines its own baseline as a baseline of its first child*. That's why the label at right gets aligned to the bottom of icon:
A simple fix is to make "17:59" the first child of the Column (the icon will go below now) and then use VerticalDirection.up to swap them back:
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Column(
mainAxisSize: MainAxisSize.min,
verticalDirection: VerticalDirection.up, // <-- reverse direction
children: [
Text('17:59', style: TextStyle(fontSize: 32)), // <-- first child
Icon(Icons.timer),
],
),
Text('mm:ss'),
],
)
* actually, of first child that has a baseline itself, anyway Icon does have it
There may be a solution like this, but the solution may cause problems because it depends on the font size. You will need to change the padding value accordingly.
Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Column(
children: [
Icon(
Icons.timer,
color: Colors.lightGreen,
size: 20,
),
Text(
"17:59",
style: TextStyle(
fontSize: 28,
fontFamily: 'Quicksand',
color: Colors.lightGreen,
),
),
],
),
SizedBox(width: 5),
Padding(
padding: EdgeInsets.only(bottom: 4),
child: Text("mm:ss",
style: TextStyle(
fontSize: 12,
fontFamily: 'Roboto',
color: Colors.white70,
)),
),
],
),
],
)
Google Nexus 9 Tablet
Google Pixel 3a XL
Google Pixel 2
Row allows for a crossAxisAlignment of baseline, set the text baseline too or it will throw an error
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
I am using row widget with three child widgets:
Text
Icon
Text
I want all of them to appear in single line same level horizontally and drop to new line if text increases.
I am using below code for Row widget but last Text widget is not aligned correctly
The text dropping should start below the "Tap" and "on the right hand" is not aligned
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Tap ',
style: TextStyle(
fontSize: 17,
),
),
Icon(Icons.add),
Expanded(
child: Text(
'on the right hand corner to start a new chat.',
style: TextStyle(
fontSize: 17,
),
),
)
],
)
Use Text.rich with WidgetSpan to put icon inside text (inline)
Text.rich(
TextSpan(
style: TextStyle(
fontSize: 17,
),
children: [
TextSpan(
text: 'Tap',
),
WidgetSpan(
child: Icon(Icons.add),
),
TextSpan(
text: 'on the right hand corner to start a new chat.',
)
],
),
)
Flutter has WidgetSpan() to add a widget inside the RichText().
RichText(
text: TextSpan(
children: [
TextSpan(
text: "Click ",
),
WidgetSpan(
child: Icon(Icons.add, size: 14),
),
TextSpan(
text: " to add",
),
],
),
)
Above code will produce:
Click > to add
You can treat the child of WidgetSpan like the usual widget.
You need put sinlein line crossAxisAlignment: CrossAxisAlignment.start inside
Row
Row (
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add, size: 14),
Expanded(
child: Text("your multiline text "),
),
),
],
)