I faced a few times already a quite big wall in Flutter. Animating or building widgets, that depends on other widgets to get their size/position.
A few examples of what could be my worst nightmares in a flutter : Snaping widgets next to each other dynamically. In css we'd have this :
.root {
display: flex;
background: grey;
padding: 4px;
}
.root > div {
background: lightgrey;
margin-right: 5px;
padding: 5px;
}
<div class="root">
<div>
dynamic height
<br/>
dynamic width
<br/>
fat
<br/>
super fat
</div>
<div>
dynamic width
<br/>
dynamic height
</div>
</div>
In flutter, I don't think we can have all 4 points at once.
And now what if we have 2 of this list and an animation where one element goes from one list to the other one? example
Another example. What if we wanted to have a SlideTransition
that finish vertically aligned with another widget that has nothing in common?
Like this :
These are totally random examples. I don't need to reproduce the same thing. The real question here is: Is there a generic way to do something similar (get the screen size/position)? Something that will not be specific for this use case and will be easily maintainable later?
To answer your original layout question, you can accomplish this layout using the IntrinsicHeight
widget together with CrossAxisAlignment.stretch
. It looks like this:
Here's the code:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Padding(
padding: new EdgeInsets.all(10.0),
child: new IntrinsicHeight(
child: new Container(
color: Colors.grey,
padding: new EdgeInsets.all(4.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Container(
padding: new EdgeInsets.all(5.0),
margin: new EdgeInsets.only(right: 5.0),
color: Colors.grey[200],
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text('dynamic height'),
new Text('dynamic width'),
new Text('fat'),
new Text('super fat'),
],
),
),
new Container(
padding: new EdgeInsets.all(5.0),
color: Colors.grey[200],
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text('dynamic width'),
new Text('dynamic height'),
],
),
),
],
),
),
),
),
);
}
}
To implement your more advanced animation examples, I would recommend using CustomMultiChildLayout
to position the boxes. See the Gallery's animation demo for an example of advanced animation using this class:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With