Layout
Column(children: [ ... ]) // vertical
Row(children: [ ... ]) // horizontal
Stack(children: [ ... ]) // overlapping
Expanded(child: ...) // fill remaining space
Padding(padding: EdgeInsets.all(16), child: ...)
Container(width: 100, height: 100, color: Colors.blue)
State
class Foo extends StatefulWidget {
@override
State<Foo> createState() => _FooState();
}
class _FooState extends State<Foo> {
int count = 0;
void increment() => setState(() => count++);
@override
Widget build(BuildContext context) => Text('$count');
}
Lists
ListView.builder(
itemCount: items.length,
itemBuilder: (context, i) => ListTile(title: Text(items[i])),
)
GridView.count(crossAxisCount: 2, children: [ ... ])
Navigation
Navigator.push(context, MaterialPageRoute(builder: (_) => DetailScreen()));
Navigator.pop(context, 'result');
MaterialApp(routes: {'/': (_) => Home(), '/details': (_) => Details()});
Navigator.pushNamed(context, '/details');
Networking
final res = await http.get(Uri.parse(url));
if (res.statusCode == 200) {
final data = jsonDecode(res.body);
}
Futures & Streams
FutureBuilder<T>(
future: myFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) return Loading();
if (snapshot.hasError) return ErrorText('${snapshot.error}');
return Text('${snapshot.data}');
},
)
StreamBuilder<T>(stream: myStream, builder: (context, snapshot) => ...)
Theming
MaterialApp(
theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal)),
darkTheme: ThemeData.dark(),
)
Theme.of(context).colorScheme.primary
