Flutter Cheat Sheet
Quick reference for Flutter — widgets, state management, layout, navigation, and common patterns. All essential Flutter/Dart patterns in one page.
Setup & CLI
| flutter create my_app | Create new Flutter project |
| flutter run | Run on connected device/emulator |
| flutter run -d chrome | Run as web app |
| flutter build apk | Build Android APK |
| flutter build ios | Build iOS app |
| flutter build web | Build web app |
| flutter pub add http | Add package dependency |
| flutter pub get | Install dependencies |
| flutter doctor | Check environment setup |
| flutter clean | Clean build cache |
Basic Widgets
| Text("Hello") | Display text |
| Text("Bold", style: TextStyle(fontWeight: FontWeight.bold)) | Styled text |
| Icon(Icons.star, color: Colors.amber) | Material icon |
| Image.network("https://...") | Network image |
| Image.asset("assets/logo.png") | Local asset image |
| ElevatedButton(onPressed: () {}, child: Text("Click")) | Raised button |
| TextButton(onPressed: () {}, child: Text("Link")) | Flat/text button |
| IconButton(icon: Icon(Icons.add), onPressed: () {}) | Icon button |
| TextField(controller: _ctrl, decoration: InputDecoration(labelText: "Name")) | Text input field |
| CircularProgressIndicator() | Loading spinner |
Layout Widgets
| Container(padding: EdgeInsets.all(16), child: child) | Box with padding/margin/decoration |
| Row(children: [w1, w2]) | Horizontal layout |
| Column(children: [w1, w2]) | Vertical layout |
| Expanded(child: widget) | Fill remaining space in Row/Column |
| SizedBox(width: 16) | Fixed-size spacer |
| Padding(padding: EdgeInsets.all(8), child: child) | Add padding around widget |
| Center(child: child) | Center child widget |
| Stack(children: [bg, fg]) | Overlapping widgets |
| ListView.builder(itemCount: n, itemBuilder: (ctx, i) => ...) | Scrollable list |
| GridView.count(crossAxisCount: 2, children: items) | Grid layout |
State Management
| class MyWidget extends StatelessWidget | Widget without state |
| class MyWidget extends StatefulWidget | Widget with state |
| setState(() { count++; }) | Update state and rebuild |
| initState() | Called once when state created |
| dispose() | Called when state destroyed (cleanup) |
| ValueNotifier<int>(0) | Simple observable value |
| ValueListenableBuilder(valueListenable: notifier, builder: ...) | Rebuild on value change |
| Provider.of<MyModel>(context) | Read from Provider |
| context.watch<MyModel>() | Watch Provider (rebuilds) |
| context.read<MyModel>() | Read Provider (no rebuild) |
Async & HTTP
| Future<String> fetchData() async { return "data"; } | Async function |
| final result = await fetchData() | Await async result |
| FutureBuilder(future: fetchData(), builder: (ctx, snap) => ...) | Build widget from Future |
| StreamBuilder(stream: myStream, builder: (ctx, snap) => ...) | Build widget from Stream |
| final response = await http.get(Uri.parse(url)) | HTTP GET request |
| final data = jsonDecode(response.body) | Parse JSON response |
Step-by-Step Guide
Read Guide →