Layouts
What is the equivalent of a StackLayout?
In Xamarin.Forms you can create a StackLayout
with an Orientation
of horizontal or vertical. Flutter has a similar approach, however you would use the Row
or Column
widgets.
If you notice the two code samples are identical with the exception of the “Row” and “Column” widget. The children are the same and this feature can be exploited to develop rich layouts that can change overtime with the same children.
@override
Widget build(BuildContext context) {
return new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text('Row One'),
new Text('Row Two'),
new Text('Row Three'),
new Text('Row Four'),
],
);
}
@override
Widget build(BuildContext context) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text('Column One'),
new Text('Column Two'),
new Text('Column Three'),
new Text('Column Four'),
],
);
}
What is the equivalent of a Grid?
The closest equivalent of a Grid
would be a GridView
. This is much more powerful than what you are used to in Xamarin.Forms. A GridView
provides automatic scrolling when the content exceeds its viewable space.
GridView.count(
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this would produce 2 rows.
crossAxisCount: 2,
// Generate 100 widgets that display their index in the List
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headline,
),
);
}),
);
You might have used a Grid
in Xamarin.Forms to implement widgets that overlay other widgets. In Flutter, you accomplish this with the Stack
widget
This sample creates two icons that overlap each other.
child: new Stack(
children: <Widget>[
new Icon(Icons.add_box, size: 24.0, color: const Color.fromRGBO(0,0,0,1.0)),
new Positioned(
left: 10.0,
child: new Icon(Icons.add_circle, size: 24.0, color: const Color.fromRGBO(0,0,0,1.0)),
),
],
),
What is the equivalent of a ScrollView?
In Xamarin.Forms, a ScrollView
wraps around a VisualElement
and, if the content is larger than the device screen, it scrolls.
In Flutter, the closest match is the SingleChildScrollView
widget. You simply fill the Widget with the content that you want to be scrollable.
@override
Widget build(BuildContext context) {
return new SingleChildScrollView(
child: new Text('Long Content'),
);
}
If you have many items you want to wrap in a scroll, even of different Widget
types, you might want to use a ListView
. This might seem like overkill, but in Flutter this is far more optimized and less intensive than a Xamarin.Forms ListView
, which is backing on to platform specific controls.
@override
Widget build(BuildContext context) {
return new ListView(
children: <Widget>[
new Text('Row One'),
new Text('Row Two'),
new Text('Row Three'),
new Text('Row Four'),
],
);
}
How do I handle landscape transitions in Flutter?
Landscape transitions can be handled automatically by setting the configChanges
property in the AndroidManifest.xml:
android:configChanges="orientation|screenSize"