Proper text wrapping for right sided widget in a row - flutter

I have a layout as follows:
Widget1 is aligned to the left, Widget2 and the text widget - to the right.
How can I wrap the text with an ellipsis for example in case it doesn't fit into the row, as follows?


you can wrap 'Text with property...' inside ExpandedWidget.
Row(
children: [
WidgetA(),
WidgetB(),
Expanded(
child: Text("...."),
)
],
)


add your Text widget inside Expanded
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text('Atras'),
),
Expanded(
child: Text('Filtros offertos'),
),
Expanded(
child: Text('title'),
),
Expanded(
child: Text('titleasdas'),
),
Expanded(
child: Text('title'),
),
Expanded(
child: Text('titlesfsfsdf'),
),
],
),
Your result screen->

Related

flutter place widget on bottom of screen in expanded

like the title says is there a way to place a widget on bottom of screen in expanded
Expanded -> SingleChildScrollView() -> column(children: [ -> Container() -> ElevatedButton() ])
i want the ElevatedButton to be placed on the bottom of screen also i don't want to place it away of the Expanded widget, is there a way to do that ?

Expanded(
child: Column(
children: [
Container(),
//use Spacer(),
Spacer(),
ElevatedButton()
],
),
)
try use spacer inside column

SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height - APPBAR_SIZE,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(child: CHILD),
ElevatedButton(),
],
),
),
)
UPDATE:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: MediaQuery.of(context).size.height - APPBAR_SIZE - ElevatedButtonHeight,
child: SingleChildScrollView(
child: Container(child: CHILD),
),
),
ElevatedButton(),
],
),

Column isn't expanding

I'm trying to make a widget on the very bottom of the screen (above the bottomnavbar).
I added MainAxisAlignment.spaceBetween to the column, but it seems like the Column in the SingleChildScrollView is shrinking to fit. How can I make _BottomOne all the way on the bottom?
Column(children: [
_StayOnTopWidget(),
Expanded(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_FirstOne(),
_BottomOne(),
],
),
),
)
]),

Expanded widget should be the parent of _BottomOne, which will take remaining space will align itself at the bottom
Column(children: [
_StayOnTopWidget(),
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_FirstOne(),
Expanded(
child:
_BottomOne(),
),
],
),
)
]),

How to use space between and Text in Row?

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")

Flutter put row into row

I need to create the following:
I could do it with code:
Row(
children: <Widget>[
Container(
width: 30
),
Column(
children: <Widget>[
Text("label"),
Container(
width: screenSize.width - 30, // <- this is problem
child: Row(
children: <Widget>[
Expanded( child: TextField() ),
Expanded( child: TextField() ),
],
),
),
],
),
],
);
Is it possible to do it in a different way, namely the line width: screenSize.width - 30?

You can use crossAxisAlignment inside Column widget and make it Stretch to get all remaining width in screen
Row(
children: <Widget>[
Container(
width: 30
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch, // <- Add this
children: <Widget>[
Text("label"),
Container(
child: Row(
children: <Widget>[
Expanded( child: TextField() ),
Expanded( child: TextField() ),
],
),
),
],
),],);
[Please read official flutter documentation of Column widget]
Column Widget
CrossAxisAlignment

Solution
Row(
children: <Widget>[
Container(
color: Colors.red,
width: 50,
),
Expanded(
child: Column(
children: <Widget>[
Text("label"),
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: TextField()
),
Expanded(
child: TextField()
),
],
),
),
],
),
),
],
);
Explanation
It is about where you place Expanded instances.
You have a row, which can fill its parent if it included an Expanded child. So we defined the size of one of its children (Container), and the other is simply Expanded. The same goes for the Column child ..
Maybe starting with a simpler example makes it easier to understand. Please refer to this useful answer.
Output
P.S. Welcome to StackOverFlow, Dmitry!

How to center only one element in a row of 2 elements in flutter

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(),
],
)