Hi community, as you can see I would like to align text based on this red line, so if there is more text, they should go up, now i tried `textAlign: TextAlign.end // no align bottom? , but it seems not work for my case, plz help,Thank you!
return MaterialApp(
home:
Column(
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: const [
Text('asd asdk\n alksd\n alksd '),
Divider(
color: Colors.red,
)
],
),
),
const Expanded(child: SizedBox())
],
),
);
try this code:
Column(
children: [
Flexible(
child: SizedBox(height: MediaQuery.of(context).size.height,),
),
Text(...);
],
);
Related
I am following the example of this tutorial.
If I want to add two text components to a children array and I get the title warning.
For example:
Widget titleSection = Container(
child: Row(
//need to expand the rows on the column
children: [
Expanded(
child: Column(
children: [
const Text(
'Hello1',
),
const Text(
'Hello2',
),
],
)
],
),
);
What am I doing wrong?
In your case it should be
Widget titleSection = Container(
child: Row(
//need to expand the rows on the column
children: [
Expanded(
child: Column(
children: const [
Text(
'Hello1',
),
Text(
'Hello2',
),
],
),
)
],
),
);
I can't get this to layout properly.
I'm trying to achieve
This is what I tried so far that gets me the closest to it but isn't exactly right.
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Flexible(
child: Row(children: [
PrefixIcon(),
Flexible(
child: DefaultTextStyle(
overflow: TextOverflow.ellipsis,
child: TextGoesHere(),
),
),
SuffixIcon(),
]),
),
TrailingIcon(),
]),
But Flexible with FlexFit.loose acts like Expanded so the SuffixIcon gets pushed to the end even though TextGoesHere is a short text.
I got so far
Please help.
If you consider ..from TextOverflow.ellipsis, this I've got so far with row.
color container just for visual
Widget
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Prefix"),
Expanded(
child: Container(
color: Colors.deepOrange,
child: Row(
children: [
Flexible(
child: Text(
"Very LongggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggText",
maxLines: 1,
),
),
Icon(
Icons.tag_sharp,
)
],
),
),
),
Text("TrailingIcon"),
],
),
Else, we can use LayoutBuilder if we know the prefix and Icons size.
I am working on a flutter app and I need to make a part of the code scrollable. The full code:
return Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: Column(
children: [
Padding(
padding: EdgeInsets.only(bottom: 30),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
...
],
),
for (var day in data)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
day.getDate(),
style: getDataLabelStyle(),
),
Text(
day.getStarting(),
style: getDataLabelStyle(),
),
Text(
day.getEnding(),
style: getDataLabelStyle(),
),
],
),
],
),
);
And this part should be scrollable:
for (var day in data)
Row(
...
],
),
Also you can see what part should be scrollable:
Thanks in advance
Use ColumnBuilder and then Wrap it with singleChildScrollView like this:
Expanded(
child: SingleChildScrollView(
child: Column(children: List.generate(data.lenght, (index){
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
day.getDate(),
style: getDataLabelStyle(),
),
Text(
day.getStarting(),
style: getDataLabelStyle(),
),
Text(
day.getEnding(),
style: getDataLabelStyle(),
),
],
);
}),),
),
)
You can achieve your task using the SingleChildScrollView Class.
For your given code you can achieve this by wrapping your row into Column and again wrap it with SingleChileScrollView.
The full solution is:
....
SingleChildScrollView(
child: Column(
children: [
for (var day in data)
Row(
children: [
.......
],
),
],
),
),
Wrap the part with SingleChildScrollView. and if you are using SingleChildScrollView inside a Column, do not forget to wrap that with Expanded.
example,
Expanded(
child: SingleChildScrollView(
child: Container(
child: yourCustomWidget()
),
),
),
I am trying to use space between to separate two Text widgets but none of mainAxisAlignment options works.
Screenshot of code below.
In the picture, you can see Text2 and Text3 are glued together I want them separated. First child in main Row needs to be expanded 1. Second (the problematic one) needs to be like expanded 0.
Container(
color: Colors.blue,
child: Row(
children: [
Expanded(
child: Container(
color: Colors.orange,
child: Text('Text1'),
),
flex: 1,
),
Column(
children: [
Row(
children: [Text('Text2'), Text('Text3')],
),
Text('Long text Long text Long text'),
],
)
],
),
)
so I realized you used Expanded widget for the first child but not for the second. Also, you need to add mainAxisAlignment: MainAxisAlignment.spaceBetween to the Row widget. Below is a complete code for what you want to achieve.
Container(
color: Colors.blue,
child: Row(
children: [
Expanded(
child: Container(
color: Colors.orange,
child: Text('Text1'),
),
flex: 1,
),
Expanded(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Text2'),
Text('Text3')
],
),
Text('Long text Long text Long text'),
],
),
)
],
),
)
Use mainAxisAlignment to spaceBetween
Row(
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: [Text('Text2'), Text('Text3')],
),
Use Spacer() between two Text.
Text("Text2"),
Spacer(),
Text("Text3")
In my layout I have two Widgets in a row, one text and the an icon.
As shown below, assume that * refers to the icon, and using "-" to represent the row:
----------------------------
Text *
----------------------------
How do I make my text centered in the entire row, and the icon to the right end ?
The main thing you need to notice is that if you don't want to use Stack you should provide same width-consuming widgets both on left and right.
I would do this with either Expanded and Padding
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 32.0),
child: Text(
"Text",
textAlign: TextAlign.center,
),
),
),
Icon(Icons.add, size: 32.0,)
],
)
or with Row's mainAxisAlignment and a SizedBox
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
const SizedBox(width: 32.0),
Text("Text"),
Icon(Icons.add, size: 32.0)
],
)
or with Expanded and a SizedBox on the left instead of the padding :). The padding or extra container on the left is so that the textAlign will truly center the text in the row taking into account the space taken up by the Icon.
Simply use Expanded and Spacer widgets on left/right side and put your widget inside the Expanded:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Spacer(),
Text('Text'),
Expanded(
child: Text('*'),
),
),
],
),
Result:
1. Using Row (not very flexible though)
Row(
children: <Widget>[
Expanded(child: Center(child: Text('Center'))),
Text("#"),
],
)
2. Using Stack (flexible)
IntrinsicHeight(
child: Stack(
children: [
Align(child: Text('Center')),
Positioned(right: 0, child: Text('#')),
],
),
)
I found it necessary to use a Stack to get Text to be truly centered:
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Stack(
alignment: Alignment.center,
children: [
Align(
alignment: Alignment.center,
child: Text('Text'),
),
Align(
alignment: Alignment.centerRight,
child: Text('*'),
)
],
),
],
);
For flexibility reasons I recommend to use Expanded widgets:
Row(
children: [
Expanded(flex: 1, child: Container()),
Expanded(
flex: 8,
child: Text('Your Text',
textAlign: TextAlign.center,
),
),
Expanded(flex: 1, child: IconButton(...))
],
)
For my case, I solved my centering problem by adjusting the flex property of the Spacer widget -
Row(children: [
Spacer(flex: 3),//3 was for my case, It might be changed for your widgets
Text('Center'),
Spacer(flex: 1),//1 was also for my case, It might be changed on for your widgets
Text("*")]);
Add another icon in the start and set the opacity to zero.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CloseButton(
onPressed: () => Navigator.of(context).pop(),
),
Text('text',),
Opacity(
opacity: 0,
child: Icon(Icons.close),
),
],
)
This worked for me without Stack. But it is the other way around. "Text" goes to left "*" goes to center:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Text("text",
style: Theme.of(context).textTheme.caption),
),
Text("*"),
Spacer(),
],
)