I'm trying to space this two items inside a row, I need to fix the text on the center and the icon in the right in the Row, but it's not working.
Here is the image of how looks now
Here is the current code
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
myText(text, FontWeight.w700, Colors.white),
Icon(Icons.arrow_drop_down,color: Colors.white),
],
);
This Medium post is a cheat sheet for layouts in Flutter. Under the paragraph Expanded an attribute called flex is explained.
Play around with flex, but this example should get you going:
Row(
children: <Widget>[
Expanded(
child: Container(),
flex: 1,
),
Expanded(
child: myText(text, FontWeight.w700, Colors.white),
flex: 2,
),
Expanded(
child: Icon(Icons.arrow_drop_down,color: Colors.white),
flex: 1,
),
],
),
Related
recently I am moving on the Flutter , I am making one list but stuck with Overflow error even ellipsis is there.
My requirement is Icon must be stick with text so I cant use expanded.
Wrap Text widget with Expanded or Flexible because over only works when it's parent has Expanded or Flexible .
or try this.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Row(
children: const [
Flexible(
child: Text(
///your text here
'Yearly',
style: TextStyle(overflow: TextOverflow.ellipsis),
),
),
SizedBox(width: 10),
Icon(Icons.timer),
],
),
),
const SizedBox(width: 10),
Text('2', style: FontStyleUtility.blackInter18W600)
],
)
Wrap your text widget with the SizedBox() or Flexible() and give it a width with the max size of your choice
...
Flexible(
child: Text(
...
),
...
Or
...
SizedBox(
width: 180,
child: Text(
...
),
...
Try Wrapping the Text in a Container and provide the width you want then it will work.
I have a Row of 3 text widgets. I want the first two to stay together and the third one to be aligned at the end of the row. The first text has the potential to cause an overflow, and when that happens, I only want the first text to be clipped by an ellipsis. Note that the 2nd and 3rd text can vary in length too, so the width at which clipping should be done varies.
I have tried various things, with RichText, Spacer, Expanded, Flexible, etc. The closest I have come to a solution is with this:
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Flexible(
child: Text(
"Left most text that overflows the screen and creates an ellipsis",
overflow: TextOverflow.ellipsis,
),
),
Text(
"Xyz",
style: customStyle1,
),
Text(
" 10:20",
style: customStyle2,
),
],
),
This is what it leads to (with added colors). If the time stays to the right in the first row, the problem will be solved.
Adding a spacer between the last two texts causes the first to occupy just half the screen, i.e., the ellipsis gets added prematurely. Adding an Expanded to last Text causes the
"NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE" bug.
The first and the last row in this image are the desired outputs.
How do I accomplish this? And can anyone explain the issue with using a Spacer or an Expanded as mentioned above?
We can use two rows to align items, Flexible and Text softWrap to fix the overflow
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Flexible(
child: Text(
"Left most text that overflows the screen and creates an ellipsis",
overflow: TextOverflow.ellipsis,
softWrap: false,
),
),
Text("Xyz"),
],
),
),
Text(
" 10:20",
),
],
),
You can use a constrained box
Row(
children: [
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width / 2,
),
child: const Text(
"Left most text that overflows the screen and creates an ellipsis",
overflow: TextOverflow.ellipsis,
),
),
const Text('xyz'),
const Spacer(),
const Text('10:20'),
],
),
///you can use SizedBox and assign width and you can set your text. This is not the perfect solution but this works for me.
import 'package:flutter/material.dart';
class MyAseet extends StatefulWidget {
const MyAseet({Key? key}) : super(key: key);
#override
_MyAseetState createState() => _MyAseetState();
}
class _MyAseetState extends State<MyAseet> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(left:20.0,top: 50),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
width: 200,
child: Text(
"Left most text that overflows the screen and creates an ellipsis",
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
),
Text(
"Xyz",
style: TextStyle(color: Colors.grey),
),
Container(
color: Colors.blue,
child: Text(
" 10:20",
),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
width: 200,
child: Text(
"Left most text that overflows the screen and creates an ellipsis",
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
),
Text(
"Xyz",
style: TextStyle(color: Colors.grey),
),
Container(
color: Colors.blue,
child: Text(
" 10:20",
),
),
],
),
],
),
),
);
}
}
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 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")
I have a row in Flutter with two widgets. I'm trying to keep the first widget centered in the middle of the screen and the second widget forced to the far right of the screen.
I've tried using Spacer(). This results in the app returning a blank screen.
I've also tried using Expanded. This sends the second widget off the screen completely.
Trying mainAxisAlignment: MainAxisAlignment.spaceBetween did not seem to have any effect.
#override
Widget build(BuildContext context) {
return new Container(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Container(
child: new GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: Column(
children: <Widget>[
SizedBox(height: 40.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Column(
children: <Widget>[
new Container(
child: Row(
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(),
Container(
child: Text(
'Profile',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Lato',
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.w700,
),
),
),
Container(
child: IconButton(
icon: Icon(
Icons.settings,
color: Colors.white,
size: 30.0,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => OnBoarding()),
);
}),
),
]),
),
),
],
),
],
),
You can use a Row with an Expanded child that contains a Stack. Centre your text with Center and position the icon with Positioned, like so:
[...]
child: Column(
children: <Widget>[
SizedBox(height: 40.0),
Row(
children: <Widget>[
Expanded(
child: Stack(
children: [
Center(
child: Text(...),
),
),
Positioned(
right: 8,
child: IconButton(...),
[...]
Simply just add Spacer() between your main text and the Icon you want to the far right.
For example:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
),
Text(
'Random test text',
style: TextStyle(color: Colors.white),
),
Spacer(),
IconButton(
icon: Icon(Icons.more_vert_rounded),
color: Colors.white,
onPressed: () {},
),
],
)
I hope this helps you. And I hope the format of the code is readable. Still getting a hang of stackoverflow comments
I did this and worked in my project
child:Row(
**crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,**
children: [
Icon(MaterialCommunityIcons.comment_outline),
Text("0"),
Icon(Icons.favorite_border),
Text("0"),
],
),
I needed align Icons and Text at right in Row widget
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end
children: [ // put your widget list and be happy ]
)
)
enter image description here
Use a row with this following structure:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(),
Container(
child: Text(
'Profile',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Lato',
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.w700,
),
),
),
Container(
child: IconButton(
icon: Icon(
Icons.settings,
color: Colors.white,
size: 30.0,
),
),
),
]
),
what will happen is that the spaceBetween property will divide available space equally between the widgets in the row, so I put an empty Container, and this will force the Text widget to be in the middle of the row and the IconButton in the far end as you desire.
I noticed in your code snippet that you have a Column with a single Row which again contains a single Column , you should eliminate this redundancy to optimize your code and make it easier to debug:
Have you tried setting the mainAxisAlignment of the row to mainAxisAlignment.center?
Imo the easiest way to do this is to create a row with 2 children: The first child is an Expanded Row with all your "main" widgets. The second child is your widget which must be aligned to the end.
Row(
children: [
Expanded(
child: Row(
children: [...mainWidgets...],
),
),
...endWidget...
],
),
Note that Expanded is space-greedy. If you use e.g. MainAxisAlignment.center for your Expanded Row, then your children are drawn across the whole avialable width. If this is not to your liking, Id suggest to wrap the Expanded-Row (not Expanded) inside a Container with "constraints: BoxConstraints(maxWidth: 500)". Obviously Expanded shouldnt be Constrained.
Achieve using Expanded & Align like below inside Row:
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
...some other widgets,
Expanded(
//Expanded will help you to cover remaining space of Row
flex: 1,
child: Align(
//Align with alignment.centerRight property will move the child to righteous inside Expanded
alignment: Alignment.centerRight,
child: const Icon(Icons.arrow_back),
),
),
],
),
Note, the Expanded has to be just inside the Row children: <Widget>[],
othewise suppose you've put the GestureDetector inside Row children: <Widget>[], and inside GestureDetector you have put your Expanded, then it won't
work.
Hope this would help many one.