I have a row im trying to align correctly. It holds two cards id like to be spaced evenly, and an icon button aligned to the right side of the row.
With just the cards using the following code,
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Card(...),
Card(...),
],
),
it looks like this:
But When i add an icon button with the following code
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Card(),
Card(),
Spacer(),
IconButton(
icon: Icon(Icons.close),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
it looks like this:
Any idea what I'm doing wrong? Thanks!
A note from Spacer
MainAxisAlignment.spaceBetween, or MainAxisAlignment.spaceEvenly will not have any visible effect: the Spacer has taken up all of the additional space, therefore there is none left to redistribute.
As for the you are trying to archive, I am using nested row for this
Row(
children: [
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Card(
child: Text("A"),
),
Card(
child: Text("A"),
),
],
),
),
IconButton(
icon: Icon(Icons.close),
onPressed: () {},
),
],
),
It is caused by the Spacer widget.
The Spacer widget will use all the space available by default.
You can remove the Spacer widget so all your child will be evenly-spaced.
It is because of the spacer widget, Spacer widget by default took the whole width. give it a specific width, instead use sizedBox and give it a width for horizontal space.
Related
I want the long texts to be clipped and continue from the down line. How can I do this in flutter?
I have tried all the features of "textoverflow" but no changes
ListTile(
onTap: () {},
visualDensity: VisualDensity(vertical: 4),
leading: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Text(
"Cari Kodu: ${item.cariKod.toString()}",
),
),
],
),
trailing: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"Bakiye: ${item.bakiye.toString()}" +
"${item.dovizIdStr != null ? " ${item.dovizIdStr}" : ""}",
),
],
),
),
just wrap your text inside an Expanded. because the Text widget is inside a Row the widget doesn't know how much horizontal space it has.
ConstrainedBox( constraints: BoxConstraints.expand(width: // your Width //),child:// your TextWidget //)
you can try this with ConstrainedBox Widget you have to give the width whatever you want, it will be automatically wrapped the text inside the given width
In Flutter, how do I make the third column fill the width? I'm trying to right-align the edit icon.
Row(
children: [
Column(
children: [ SizedBox(width: 10) ]
),
Column(
children: [ Text("example") ]
),
Column(
children: [ IconButton(icon: Icon(Icons.edit)) ],
),
],
);
All of the things I've tried such as putting it in Expanded() or IntrinsicWidth() or Column(..., crossAxisAlignment: CrossAxisAlignment.stretch) have resulted in "Cannot hit test a render box that has never been laid out."
Place Spacer() before last Column.
wrap your column with Align and then Expanded and then set Alignment:Alignment.centerRight
. this will give you the flexibility to place your widget any place you want.
see Align from Flutter Docs.
Row(
children: [
Column(children: [SizedBox(width: 10)]),
Column(children: [Text("example")]),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Column(
children: [
IconButton(
icon: Icon(Icons.edit),
onPressed: () {},
)
],
),
),
),
],
),
In a Column there's a group of FlatButtons created with FlatButton.icon()
so that it has image and text laid beside each other,
I need the FlatButton's contents to be aligned to the left, but the button is stretched horizontally,
setting the column's crossAxisAlignment to CrossAxisAlignment.stretch stretches the button's width as I want, but centers the button's content:
and setting it to CrossAxisAlignment.start aligns the button's contents to the left but the button's width gets shrinked:
is it possible to align the button contents to the left but the button be stretched? or I have to use other combinations of widgets (InkWell for example?)
you can use a normal FlatButton() constructor that has the child property and then you can have a row as the child and make it's mainAxisAlignment:MainAxisAlignment.start and make your text and icon it's children's, like below:
Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
FlatButton(
color: Colors.grey,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(Icons.check),
SizedBox(width: 10),
Text('Recharge and balance')
],
), onPressed: () {},
)
],
),
)
the result:
It is a bit of a hack, but you could use a regular FlatButton widget and do something like this could work:
class SampleWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 200,
),
child: FlatButton(
onPressed: () {},
child: Row(
children: <Widget>[
Icon(Icons.home),
Text('Recharge and balance'),
Spacer(),
],
),
),
),
],
);
}
}
Spacer widget will take up the remaining space of row. All you have to do from here is just adjust the padding of the Icon to be the same as FlatButton.icon
Try changing padding property of Flatbutton to Edgeinsets.only(left: 0.0)
padding: Edgeinsets.only(left: 0.0),
Im trying to wrap some content in flutter without success.
I found i can't Wrap Rows like i do with Chips or Text widgets.
Anybody knows why?
These are three sets of Rows , each one with an Icon and a Text, that sits side by side. But in smaller screens it overflows, because there is not enough space (width).
I'd like that the last set of rows (one icon and a label) jumps to next line when the space in current line is over.
Thank you
I have tried to Wrap the Rows with Container, but didn't work.
Row(
children: <Widget>[
Wrap(
children: <Widget>[
Row(
children: <Widget>[
Text('long text 1'),
Text('an icon here'),
],
),
Row(
children: <Widget>[
Text('Anoter Label'),
Text('Anoter icon'),
],
),
// I want this row to jump to next line when there is not space in
// current line
Row(
children: <Widget>[
Text('More Text'),
Text('Moire icon'),
],
),
],
)
],
),
Flutter layout ok large screen
Overflow on smaller screens
When i'm on smaller screens, the image with caption resizes and fits well. But the labels and icons above the image overflow. So id like that the last set of icon/ label the one with $ simbol e price, jumps to a new row. I can wrap when using only text widgets and it works, but then i loose the alignment i have on rows like mainAxisAlignment: MainAxisAlignment.spaceAround
Updated: this is somehow a solution
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
child: Wrap(
children: <Widget>[
Icon(Icons.alarm),
Text('60 Minutes'),
],
),
),
Expanded(
child: Wrap(
children: <Widget>[
Icon(Icons.shop),
Text('Lorem ipsumssssssssssssssssssssssssssssssss'),
],
),
),
Expanded(
child: Wrap(
children: <Widget>[
Icon(Icons.attach_money),
Text('Very expensive'),
],
),
)
],
);
...
You can do this
Row(
children: <Widget>[
Expanded(
child: Wrap(
children: <Widget>[
Text('long text 1'),
Text('an icon here'),
Text('Anoter Label'),
Text('Anoter icon'),
// I want this row to jump to next line when there is not space in
// current line
Text('More Text'),
Text('Moire icon'),
],
),
)
],
),
or this
Row(
children: <Widget>[
Expanded(
child: Wrap(
children: <Widget>[
Row(
children: <Widget>[
Text('long text 1'),
Text('an icon here'),
],
),
Row(
children: <Widget>[
Text('Anoter Label'),
Text('Anoter icon'),
],
),
// I want this row to jump to next line when there is not space in
// current line
Row(
children: <Widget>[
Text('More Text'),
Text('Moire icon'),
],
),
],
),
)
],
),
The width of the Row is determined by the mainAxisSize property. If
the mainAxisSize property is MainAxisSize.max, then the width of the
Row is the max width of the incoming constraints. If the mainAxisSize
property is MainAxisSize.min, then the width of the Row is the sum
of widths of the children subject to the incoming constraints.
To resolve your problem just set the mainAxisSize property to MainAxisSize.min on your Row Widget
Consider
new ListView(
children: <Widget>[
new RaisedButton(child: const Text('1')),
],
)
How to make the button occupy only its natural width?
Consider wrapping your RaisedButton in a Row. In addition to letting the button be its intrinsic width, you can use the Row to position the button horizontally using the mainAxisAlignment constructor argument. e.g. to right-align the button, use this:
new ListView(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
new RaisedButton(
child: const Text('1'),
onPressed: () { /* ... */ },
),
],
),
],
),