Say there is a Scaffold with a bottomNavigationBar property that is populated. If you use a Stack with a Align widget inside its body set to Alignment.center, the Align widget gets centered accounting to the bottomNavigationBar and centers in the remaining space minus that.
How do I get it so that it centers according to the total screen height, using all these widgets?
Stack(
body: Align widget with center alignment and some child,
bottomNavigationBar: Bottom app bar
)
I'm not entirely sure what you mean in your question - but I think you want the body of a Scaffold (not Stack) to center a widget for the whole height available on the device.
Here's how you could do that using a Scaffold, SizedBox and Center widgets along with a MediaQuery
Scaffold(
body: SizedBox(
height: MediaQuery.of(context).size.height,
child: Center(
child: Text("CENTERED")),
),
bottomNavigationBar: BottomNavigationBar(items: []),
)
Scaffold
Sized Box
Center
Media Query
Hopefully that puts you on the right path.
I am having a problem with embedding a Row() widget as a child of parent Column() widget who was been constrained by a ConstrainedBox(maxHeight:150) widget.
With this scenario, I am getting a 'BoxConstraints forces an infinite height.' exception.
Here is the simplified code (I am only including the build() method for brevity):
#override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints(maxHeight: 150),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.yellow,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text("Hello"),
Text("There"),
],
),
),
],
),
);
}
I had read a previous post suggesting to use Expanded() to solve the exception so I wrapped the Container() widget above with Expanded() and that worked, but my question is WHY?
I was under the impression that Expanded() simply forces its associated child widget to occupy all of its parent's available space. But does it also get its child widget to recognize the constraints from its parent?
Another interesting aspect of this scenario is that if I wrap the Row() with Expanded() instead of Container(), it will not work and the exception will be thrown. For whatever reason, it has to be the Container().
All help greatly appreciated. I love Flutter, but I am still struggling with the nitty gritty of its layout algorithm.
/Joselito
This is because Rows and Columns will keep expanding based on their children,
for Row:- it will keep expanding horizontally and you'll usually see it overflows to the right of the screen.
For Column:- it will keep expanding vertically, and usually overflows the bottom.
By using Expanded, it will force Row and Column to expand infinitely, that is why there is an exception. It's different for container as it will follow it's parent's width and height.
https://flutter.dev/docs/development/ui/layout
I also had a lot of issues understanding constraints in flutter until I found this article. After a while I saw that the flutter team added the article in their documentation. Check it out, it's very good.
I want to create a scrollable content which include:
A header widget that includes several child widgets - which it's height is unknown
A list of rows widgets
The correct way to do that is using a CustomScrollView, like this:
Widget _buildView(BuildContext context) {
return (
slivers: <Widget>[
SliverToBoxAdapter(
child: Container(
height: 128.0,
child: _buildHeader(context),
),
),
_buildList(context),
],
);
}
My problem is that my unlike this code sample, my header's height is unknown, and should fit its children's height (which can change).
How do I achieve that?
Since the Sliver needs to adapt on the header's height, you can consider using ConstrainedBox on your header. Depending on your use case, you can set a minHeight and maxHeight to let the viewport know the widget's size to be rendered.
I have positioned(using Align) two child widgets within stack widget and one of it contains form TextField to take input. When I clicked to enter data, only it's parent widget is moved up on Keypad entered as in the below picture.
Is there any way to move/resize the child widgets of stack while entering data from keypad.
Source code:
return Scaffold(
body: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/playingboard2.jpg'),
fit: BoxFit.cover)),
child: null,
),
_buildSelfPlayer(), // Returns the widget with form input and other widgets
_buildBank(), // top center, shows two pictures of bank
],
),
);
I don't see another fix for this, while also making use of Stack widget.
So instead I'd suggest you to use Column widget wrapped inside a SingleChildScrollView. I tried it and it works as intended. The other children move up too along with the TextField, so maintaining the distance between them and not overlapping.
For the background image, you can wrap the Scaffold in a Container, use that image in the Column decoration and make the Scaffold's backgroundColor to Colors.transparent.
I've used both Expanded and Flexible widgets and they both seem to work the same.
What is the difference between Expanded and Flexible?
Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
Row(
children: <Widget>[
buildExpanded(),
buildFlexible(),
],
),
Row(
children: <Widget>[
buildExpanded(),
buildExpanded(),
],
),
Row(
children: <Widget>[
buildFlexible(),
buildFlexible(),
],
),
],
),
);
Expanded is just a shorthand for Flexible
Using Expanded this way:
Expanded(
child: Foo(),
);
is strictly equivalent to:
Flexible(
fit: FlexFit.tight,
child: Foo(),
);
You may want to use Flexible over Expanded when you want a different fit, useful in some responsive layouts.
The difference between FlexFit.tight and FlexFit.loose is that loose will allow its child to have a maximum size while tight forces that child to fill all the available space.
Widget under Flexible are by default WRAP_CONTENT although you can change it using parameter fit.
Widget under Expanded is MATCH_PARENT you can change it using flex.
Expanded - it is Flexible with set fit
class Expanded extends Flexible {
const Expanded({
Key key,
int flex = 1,
#required Widget child,
}) : super(
key: key,
flex: flex,
fit: FlexFit.tight,
child: child
);
}
You may use Flexible to resize the widgets in rows and columns. It's mainly used to adjust the space of the different child widgets while keeping the relation with their parent widgets.
Meanwhile, Expanded changes the constraints sent to the children of rows and columns; it helps to fill the available spaces there. Therefore, when you wrap your child in an Expanded widget it fills up the empty spaces.
Providing these videos from the Flutter's Official YouTube channel just to help out people, who might look for this in the upcoming future...
Expanded:
Flexible:
Expanded() is nothing more than Flexible() with
Flexible (fit: FlexFit.tight) = Expanded()
but, Flexible uses fit :FlexFit.loose by default.
FlexFit.tight = Wants to fit tight into parent taking as much space as possible.
FlexFit.loose = Wants to fit loose into parent taking as little space as possible for itself.
Expanded changes the constraints of a child widget so it fills any empty space. Expanded widget is a specialised Flexible widget with a set fit - Flexible(fit: FlexFit.tight. Expanded widgets also have a flex property.
Flexible makes the child widget flexible and resizable. You can add the flex or fit property to adjust the size and spacing.
Flexible fit properties include:
FlexFit.loose - The widget’s preferred size is used. (Default)
FlexFit.tight - Forces the widget to fill all of its extra space.
Flexible default will share the available space of the parent widget, but will NOT force the child to fit the space.
Expanded will share the available space of the parent widget, and force the child widget to change its width/height to fill the available space.
In fact, Expanded extends Flexible, which is a Flexible with FlexFit.tight. See the official document.
Here is a Container widget and three Flexible Widgets(flex = 1, fit = FlexFit.loose) in a row. We can see that the three flexible widgets share the same maxWidth (1/3 of the available screen width), and the blue one wants bigger than it, and the others want smaller. But as we can see, the blue guy has maxWidth as its width and the other widgets' width just fit their content.
Here is the code of the image above up:
Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.teal,
child: Text(
'Container Text ',
)),
Flexible(
child: Container(
color: Colors.blue,
child: Text(' Text.Flexible Text.Flexible Text.Flexible.')),
),
Flexible(
child: Container(
color: Colors.yellow, child: Text('Flexible Text.')),
),
Flexible(
child: Container(
color: Colors.lightGreen, child: Text('Flexible.')),
),
],
)