Layoutbuilder is used to choose if the two child-widgets will use a row or a column layout.
A streamcontroller is used to communicate between the child-widgets.
Row layout Column layout
Dart
x
119
119
1
import 'dart:async';
2
import 'package:flutter/material.dart';
3
4
void main() {
5
runApp(MyApp());
6
}
7
8
class MyApp extends StatelessWidget {
9
10
Widget build(BuildContext context) {
11
return MaterialApp(
12
title: 'Photodesk Demo',
13
theme: ThemeData(
14
primarySwatch: Colors.blue,
15
visualDensity: VisualDensity.adaptivePlatformDensity,
16
),
17
home: Demo(),
18
);
19
}
20
}
21
22
class Demo extends StatelessWidget {
23
24
Widget build(BuildContext context) {
25
return Scaffold(
26
appBar: AppBar(
27
title: Text('Layout Building in Row/Column'),
28
),
29
body: LayoutBuilder(
30
builder: (context, constraints) {
31
if (constraints.maxWidth < 800) {
32
return layout('column');
33
} else {
34
return layout('row');
35
}
36
},
37
),
38
);
39
}
40
}
41
42
Widget layout(String layoutType) {
43
var _streamController = StreamController<String>.broadcast();
44
45
List<Widget> myChildren = [
46
Flexible(
47
child: Container(
48
color: Colors.black26,
49
width: double.infinity,
50
height: 500,
51
//color: Colors.pink,
52
child: Column(
53
children: [
54
ListTile(
55
leading: Icon(Icons.people),
56
title: Text('Svænd Bent'),
57
onTap: () {
58
_streamController.add('Svænd Bent');
59
},
60
),
61
ListTile(
62
leading: Icon(Icons.my_location),
63
title: Text('Yrsa Tusse'),
64
onTap: () {
65
_streamController.add('Yrsa Tusse');
66
},
67
),
68
ListTile(
69
leading: Icon(Icons.landscape),
70
title: Text('Thormod Fuss'),
71
onTap: () {
72
_streamController.add('Thormod Fussit');
73
},
74
),
75
],
76
),
77
),
78
flex: 2,
79
),
80
Flexible(
81
child: Container(
82
padding: EdgeInsets.all(10),
83
width: double.infinity,
84
height: 500,
85
color: Colors.black12,
86
child: Center(
87
child: StreamBuilder(
88
stream: _streamController.stream,
89
builder: (context, snapshot) {
90
if (!snapshot.hasData) {
91
return CircularProgressIndicator();
92
} else {
93
return Text(
94
snapshot.data.toString(),
95
style: TextStyle(
96
fontSize: 20,
97
),
98
);
99
}
100
},
101
),
102
),
103
),
104
flex: 4,
105
),
106
];
107
108
print('Rebuilding layout');
109
if (layoutType == 'row') {
110
return Row(
111
children: myChildren,
112
);
113
} else {
114
return Column(
115
children: myChildren,
116
);
117
}
118
}
119