Skip to content

Flutter Cheat Sheet

Last verified September 2026 — runs in your browser

Flutter Cheatsheet

Search code, tasks or categories in English or Spanish. Each entry has a link to save or share it.

Showing 51 of 51 entries

Flutter: import package:flutter/material.dart. Snippets belong inside your app; patterns need variables or ellipses filled in.

Build release iOS

Setup · Pattern / syntax
flutter build ios --release

Requires macOS, Xcode and signing configuration for a device build.

Documentation

Text widget

Widgets · Pattern / syntax
Text('Hello', style: TextStyle(fontSize: 20))

Icon widget

Widgets · Pattern / syntax
Icon(Icons.star, color: Colors.amber)

Load local image

Widgets · Pattern / syntax
Image.asset('assets/logo.png')

Declare assets/logo.png in pubspec.yaml under flutter: assets:.

Flat text button

Widgets · Pattern / syntax
TextButton(onPressed: () {}, child: Text('Go'))

Icon button

Widgets · Pattern / syntax
IconButton(icon: Icon(Icons.add), onPressed: () {})

Text input field

Widgets · Pattern / syntax
TextField(decoration: InputDecoration(labelText: 'Name'))

Toggle switch

Widgets · Pattern / syntax
Switch(value: on, onChanged: (v) {})

Checkbox

Widgets · Pattern / syntax
Checkbox(value: checked, onChanged: (v) {})

Wrap with padding

Layout · Pattern / syntax
Padding(padding: EdgeInsets.all(8), child: ...)

Vertical stack

Layout · Pattern / syntax
Column(children: [w1, w2, w3])

Stateless widget

State · Complete example
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Greeting()));

class Greeting extends StatelessWidget {
  const Greeting({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Center(child: Text('Hello')));
  }
}

Standalone lib/main.dart for a Flutter project. Other widget snippets on this page belong inside an existing app.

Documentation

Stateful widget

State · Pattern / syntax
class MyWidget extends StatefulWidget {
  State<MyWidget> createState() => _S();
}

Text field controller

State · Pattern / syntax
final _controller = TextEditingController();

Keep the controller in State, pass it to TextField(controller: ...) and dispose it in State.dispose().

Simple reactive state

State · Pattern / syntax
final count = ValueNotifier<int>(0);

ValueListenableBuilder<int>(
  valueListenable: count,
  builder: (context, value, child) => Text('$value'),
)

Keep count as a State field, change count.value to update, and call count.dispose() from State.dispose().

Documentation

Async data widget

State · Pattern / syntax
FutureBuilder(future: fetch(), builder: (c, snap) => ...)

Stream data widget

State · Pattern / syntax
StreamBuilder(stream: s, builder: (c, snap) => ...)

Push new route

Navigation · Pattern / syntax
Navigator.push(context, MaterialPageRoute(builder: (c) => NextPage()))

Use inside a callback with a BuildContext below a Navigator. Define NextPage or value where used.

Documentation

Go back

Navigation · Pattern / syntax
Navigator.pop(context)

Call from a callback on a route that can be popped. The context must be below its Navigator.

Documentation

Push named route

Navigation · Pattern / syntax
Navigator.pushNamed(context, '/details')

Register '/details' in MaterialApp.routes or provide onGenerateRoute. Named routes are not recommended for most new apps; use a routing package for complex deep links.

Documentation

Replace current route

Navigation · Pattern / syntax
Navigator.pushReplacement<void, void>(
  context,
  MaterialPageRoute<void>(builder: (_) => NextPage()),
);

Inside a callback with a context below Navigator; define NextPage in your app.

Documentation

Push and wait for result

Navigation · Pattern / syntax
final result = await Navigator.push<String>(
  context,
  MaterialPageRoute<String>(builder: (_) => NextPage()),
);
if (!context.mounted) return;

Use an async callback. NextPage can return a String with Navigator.pop(context, value); going back without a value returns null.

Documentation

Padding shorthand

Styling · Pattern / syntax
EdgeInsets.symmetric(horizontal: 16, vertical: 8)

Rounded box

Styling · Pattern / syntax
BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(8))

Access theme

Styling · Pattern / syntax
Theme.of(context).textTheme.headlineLarge

Flutter Cheat Sheet — Widgets, State Management, Navigation & Layout

Find Flutter CLI commands, widgets, layout, state and navigation patterns. Search by category or code, copy a snippet, or save its entry link. Patterns require your own variables, widget tree and application context.

Common pitfalls in Flutter

Use Expanded inside Row, Column or Flex with bounded constraints. Dispose controllers owned by State. After an asynchronous operation, check context.mounted before using that context. Named routes need registration; complex deep links usually need a routing solution. Documentation links beside the relevant entries provide context.

  • 50+ Flutter widgets and patterns
  • CLI setup commands
  • Layout widgets (Column, Row, Stack)
  • State lifecycle and builders
  • Navigator and named routes
  • One-click copy to clipboard

Free. No signup. Your inputs stay in your browser. Ads via Google AdSense (consent required).

By ·