I have a row where the children are 2 Texts. The first is fontsize 20 and the second is size 13. I'm trying to align both to bottom but so far no luck. It's like the first large one gets some additional padding.
Any good hints on how to align the two Text?
I think you need to play around with the crossAxisAlignment and textBaseline properties of your Row widget.
Try something like this:
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Text("foo", style: TextStyle(fontSize: 20)),
Text("bar", style: TextStyle(fontSize: 13)),
],
),
Related
I have a list of X widgets and want to show them in a ListView of Rows. I know that I can fit N widget in each Row.
I want to do:
var MyListOfRows = ListView(
children: intoSublists(widgetList,subListSize).map(
(sublist)=> Row(
children: sublist,
)
).toList()
);
I thought about implementing intoSublists with complex modulo magic but that seems to leave complicated code and I'm hoping that there's a easy way to implement this is dart. Is there?
(This is part of a component that I pass a minimum height and width together with a list of Widgets. The component is supposed to display the Widgets as big as possible and if there are too many Widgets because of the minimum dimensions display a scrollable list)
You are reinventing the wheel. Instead of a ListView and a bunch of Rows, use a SingleChildScrollView and a Wrap, and let the Wrap determine how many widgets can fit in a particular "row" based on the actual size of the screen.
var myList = SingleChildScrollView(
child: Wrap(
children: widgetList,
),
);
EDIT: If you want the widgets to stretch to fill the row (and all the widgets are going to be the same size), you can also use a GridView:
var myGrid = GridView(
crossAxisCount: subListSize, // How many widgets you want to be across
children: widgetList,
);
I know how to change the text color inside individual TextFormField using TextStyle but I can't figure out how to apply it app-wide using a theme.
You need to wrap your root widget in Theme and apply data as follows. Both TextField and TextFormField will have same color, common theme.
Theme(
data: Theme.of(context).copyWith(
textTheme: Theme.of(context).textTheme.apply(bodyColor: Colors.green),
),
child: Column(
children: <Widget>[
TextFormField(...),
TextField(...),
],
),
);
If you don't want to wrap every form/text field with a Theme widget, you can set the subhead property of textTheme in your original ThemeData as such:
ThemeData(
textTheme: TextTheme(
subhead: TextStyle(color: Colors.green),
),
Although, according to the docs subhead is used for the primary text in lists, so I imagine it might have some unwanted effects if you're using lists elsewhere
Sometimes I want to force a widget to take a specific size, which I usually do by using a SizedBox/ConstrainedBox/Container
But I've realized that in some situations, the widget merely ignores it and takes a different size. Why is that?
Example:
Expected behavior:
Actual behavior:
This situation happens when the parent and its child wants two different sizes; but the parent has no idea how it should align its child within its boundaries.
The following code doesn't give enough information to tell how to align the red box within the blue box:
Container(
color: Colors.blue,
width: 42,
height: 42,
child: Container(
color: Colors.red,
width: 24,
height: 24,
),
),
So while it could be centered as such:
it would also be perfectly reasonable to expect the following alignment instead:
In that situation, since Flutter doesn't know how to align the red box, it will go with an easier solution:
Don't align the red box, and force it to take all the available space; which leads to:
To solve this issue, the solution is to explicitly tell Flutter how to align the child within its parent boundaries.
The most common solution is by wrapping the child into an Align widget:
Container(
color: Colors.blue,
width: 42,
height: 42,
child: Align(
alignment: Alignment.center,
child: Container(
color: Colors.red,
width: 24,
height: 24,
),
),
),
Some widgets such as Container or Stack will also offer an alignment property to achieve similar behavior.
I know how to use ellipsis with the Text widget. overflow: TextOverflow.ellipsis does the job very well. But my problem is it actually displays only one line. I am trying to make a layout something similar to the below image:
How to do this in Flutter?
It is a common layout and it is sad that it isn't documented anywhere :(
use overflow in addition to maxlines. if you need to adhere to a really tight fixed height then you can easily calculate what maxlines should be based upon your font size.
Text(
'my super long string',
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
maxLines: 3,
),
Is there any flutter widget that prevents the children to paint outside a Container by any mean?
I have this container with a child that may get some transformations (such as scale and rotate) and therefore can be painted outside
I want to limit the children's painting to only inside the parent Container, just like a div with CSS overflow:hidden; would behave.
A sample:
return Container( // the one with overflow hidden -ish behavior
height: 300.0,
child: TheTransformingChild() // the one that can get bigger that container
)
I think it's easier to use clipBehavior: property in container
Container(
clipBehavior: Clip.hardEdge,
height: 400,
width: 400,
child :TheTransformingChild(),)
There is - what you're looking for is a combination of OverflowBox or SizedOverflowBox and ClipRect, or ClipOval, or ClipPath, or ClipRRect etc.
I'd recommend looking through the painting and layout sections of the flutter widget catalog (and the rest of it as well) as it generally does a pretty good job of showcasing the widgets you need.
An easy way is to use the Wrap component (below is your example).
return Container( // the one with overflow hidden -ish behavior
height: 300.0,
child: Wrap(
children: [
TheTransformingChild()
],
)
)
It also replaces the Column component in most cases:
Using Column
Using Wrap