Flutter Cheat Sheet (2026): Widgets, Layout, State & Dart Basics

A Flutter cheat sheet maps widgets (immutable UI descriptions), layout (Row, Column, Expanded), and state (setState or a state library). You write Dart. The framework paints its own UI, so the app looks consistent on iOS and Android. Start with MaterialApp and a Scaffold, then learn lists and navigation.

This Flutter cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Widget: A class whose build returns UI. Rebuild often; keep them cheap.
• Stateless: No internal mutable state. UI is a function of props (final fields).
• Stateful: StatefulWidget + State class. Call setState to rebuild.
• Layout: Column/Row + Expanded/Flexible. Padding, SizedBox, Center.
• Text: Text("Hi"). Style with TextStyle or Theme.of(context).
• Gesture: InkWell / ElevatedButton / GestureDetector.
• Nav: Navigator.push(context, MaterialPageRoute(...)) or go_router.
• Hot reload: Preserves state when you change build. Restart after changing constructors or main.

Copy-paste examples

Stateful counter Scaffold

Every setState rebuilds this State’s widget subtree. Do not put heavy work in build.

import 'package:flutter/material.dart';

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});
  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int n = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: Text('Taps: $n', style: Theme.of(context).textTheme.headlineMedium)),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => n++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

Common mistakes

• Calling setState after dispose from a late async callback.
• Deep nesting of Columns without Expanded and hitting unbounded height errors.
• Putting new everywhere — Dart made new optional; follow current style.
• Blocking build with network calls instead of initState + FutureBuilder / a state library.

FAQ

1. Flutter vs React Native? Flutter draws its own widgets in Dart. RN uses native views and JavaScript. Both ship production apps; pick by language and team.

1. Do I need Android Studio? The Flutter SDK plus a device/emulator. Android Studio or VS Code with the Flutter plugin is the usual editor.

1. Is Flutter only mobile? Mobile is the core. Flutter also targets web and desktop with caveats. This sheet assumes iOS/Android.

Related Flutter cheat sheets

• Flutter Widgets Cheat Sheet
• Flutter Vs React Native Cheat Sheet
• Flutter Interview Questions Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds mobile app development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.