Row and Column
MainAxisAlignment
MainAxisAlignment.start
new Row /*or Column*/(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
MainAxisAlignment.center
new Row /*or Column*/(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
MainAxisAlignment.end
new Row /*or Column*/(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
MainAxisAlignment.spaceEvenly
new Row /*or Column*/(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
MainAxisAlignment.spaceBetween
new Row /*or Column*/(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
MainAxisAlignment.spaceAround
new Row /*or Column*/(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
CrossAxisAlignment
CrossAxisAlignment.baseline
new Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
new Text(
'Baseline',
style: Theme.of(context).textTheme.display3,
),
new Text(
'Baseline',
style: Theme.of(context).textTheme.body1,
),
],
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
CrossAxisAlignment.start
new Row /*or Column*/(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 200.0),
new Icon(Icons.star, size: 50.0),
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
CrossAxisAlignment.center
new Row /*or Column*/(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 200.0),
new Icon(Icons.star, size: 50.0),
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
CrossAxisAlignment.end
new Row /*or Column*/(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 200.0),
new Icon(Icons.star, size: 50.0),
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
CrossAxisAlignment.stretch
new Row /*or Column*/(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 200.0),
new Icon(Icons.star, size: 50.0),
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
MainAxisSize
MainAxisSize.max
new Row /*or Column*/(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
MainAxisSize.min
new Row /*or Column*/(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
new Icon(Icons.star, size: 50.0),
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
IntrinsicWidth and IntrinsicHeight
让一行或者一列中的组件同高或者同宽
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('IntrinsicWidth')),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text('Short'),
),
RaisedButton(
onPressed: () {},
child: Text('A bit Longer'),
),
RaisedButton(
onPressed: () {},
child: Text('The Longest text button'),
),
],
),
),
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('IntrinsicWidth')),
body: Center(
child: IntrinsicHeight(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text('Short'),
),
RaisedButton(
onPressed: () {},
child: Text('A bit Longer'),
),
RaisedButton(
onPressed: () {},
child: Text('The Longest text button'),
),
],
),
),
),
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Stack
Widget build(BuildContext context) {
Widget main = Scaffold(
appBar: AppBar(title: Text('Stack')),
);
return Stack(
fit: StackFit.expand,
children: <Widget>[
main,
Banner(
message: "Top Start",
location: BannerLocation.topStart,
),
Banner(
message: "Top End",
location: BannerLocation.topEnd,
),
Banner(
message: "Bottom Start",
location: BannerLocation.bottomStart,
),
Banner(
message: "Bottom End",
location: BannerLocation.bottomEnd,
),
],
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(title: Text('Stack')),
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Material(color: Colors.yellowAccent),
Positioned(
top: 0.0,
left: 0.0,
child: Icon(Icons.star, size: 50.0),
),
Positioned(
top: 340.0,
left: 250.0,
child: Icon(Icons.call, size: 50.0),
),
],
),
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Widget build(BuildContext context) {
const iconSize = 50.0;
return Scaffold(
appBar: AppBar(title: Text('Stack with LayoutBuilder')),
body: LayoutBuilder(
builder: (context, constraints) =>
Stack(
fit: StackFit.expand,
children: <Widget>[
Material(color: Colors.yellowAccent),
Positioned(
top: 0.0,
child: Icon(Icons.star, size: iconSize),
),
Positioned(
top: constraints.maxHeight - iconSize,
left: constraints.maxWidth - iconSize,
child: Icon(Icons.call, size: iconSize),
),
],
),
),
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Expanded
new Row(
children: <Widget>[
new Expanded(
child: new Container(
decoration: const BoxDecoration(color: Colors.red),
),
flex: 3,
),
new Expanded(
child: new Container(
decoration: const BoxDecoration(color: Colors.green),
),
flex: 2,
),
new Expanded(
child: new Container(
decoration: const BoxDecoration(color: Colors.blue),
),
flex: 1,
),
],
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ConstrainedBox
new Card(child: const Text('Hello World!'), color: Colors.yellow)
1
2
2
new ConstrainedBox(
constraints: new BoxConstraints.expand(),
child: const Card(
child: const Text('Hello World!'),
color: Colors.yellow,
),
),
1
2
3
4
5
6
7
2
3
4
5
6
7
new ConstrainedBox(
constraints: new BoxConstraints.expand(height: 300.0),
child: const Card(
child: const Text('Hello World!'),
color: Colors.yellow,
),
),
/// same as -------
new ConstrainedBox(
constraints: new BoxConstraints(
minWidth: double.infinity,
maxWidth: double.infinity,
minHeight: 300.0,
maxHeight: 300.0,
),
child: const Card(
child: const Text('Hello World!'),
color: Colors.yellow,
),
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Container
Container as a layout tool
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Container as a layout')),
body: Container(
color: Colors.yellowAccent,
child: Text("Hi"),
),
);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Container as a layout')),
body: Container(
height: double.infinity,
width: double.infinity,
color: Colors.yellowAccent,
child: Text("Hi"),
),
);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Container as decoration
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Container.decoration')),
body: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(color: Colors.yellowAccent),
child: Text("Hi"),
),
);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Container.foregroundDecoration')),
body: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(color: Colors.yellowAccent),
foregroundDecoration: BoxDecoration(color: Colors.red.withOpacity(0.5)),
child: Text("Hi"),
),
);
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Container as Transform
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Container.transform')),
body: Container(
height: 300.0,
width: 300.0,
transform: Matrix4.rotationZ(pi / 4),
decoration: BoxDecoration(color: Colors.yellowAccent),
child: Text(
"Hi",
textAlign: TextAlign.center,
),
),
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
SizedBox
SizedBox as ConstrainedBox
SizedBox.expand(
child: Card(
child: Text('Hello World!'),
color: Colors.yellowAccent,
),
),
1
2
3
4
5
6
2
3
4
5
6
SizedBox as padding
Column(
children: <Widget>[
Icon(Icons.star, size: 50.0),
const SizedBox(height: 100.0,),
Icon(Icons.star, size: 50.0),
Icon(Icons.star, size: 50.0)
],
),
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
SizedBox as an Invisible Object
Widget build(BuildContext context) {
bool isVisible = ...
return Scaffold(
appBar: AppBar(
title: Text('isVisible = $isVisible'),
),
body: isVisible
? Icon(Icons.star, size: 150.0)
: const SizedBox(),
);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
SafeArea
Widget build(BuildContext context) {
return Material(
color: Colors.blue,
child: SafeArea(
child: SizedBox.expand(
child: Card(color: Colors.yellowAccent),
),
),
);
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
