Flutter Cheatsheet: Widgets, State and Navigation Reference

# Install (macOS shown — Windows/Linux similar)
brew install --cask flutter             # or download from flutter.dev
flutter --version
flutter doctor                          # verifies Xcode / Android SDK / chrome

# New app
flutter create my_app
cd my_app
flutter run                             # picks the only attached device
flutter run -d chrome                   # explicit target
flutter devices                         # list available targets

# Daily loop
r       # hot reload in the running shell
R       # hot restart (resets state)
q       # quit

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      theme: ThemeData(colorSchemeSeed: Colors.indigo, useMaterial3: true),
      home: const Counter(),
    );
  }
}

class Counter extends StatefulWidget {
  const Counter({super.key});
  @override
  State createState() => _CounterState();
}

class _CounterState extends State {
  int n = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: Text('$n', style: const TextStyle(fontSize: 48))),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => n++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class Feed extends StatelessWidget {
  final List items;
  final Future Function() onRefresh;
  const Feed({super.key, required this.items, required this.onRefresh});

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: onRefresh,
      child: ListView.separated(
        itemCount: items.length,
        itemBuilder: (ctx, i) => ListTile(
          title: Text(items[i]),
          onTap: () => Navigator.pushNamed(ctx, '/detail', arguments: items[i]),
        ),
        separatorBuilder: (_, __) => const Divider(height: 1),
      ),
    );
  }
}

// For infinite-scroll, swap to ListView.builder + a ScrollController
// that calls fetchMore() when controller.position.pixels >= maxScrollExtent - 200.

// pubspec.yaml: go_router: ^14.0.0
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

final _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (ctx, st) => const HomeScreen(),
      routes: [
        GoRoute(
          path: 'item/:id',
          builder: (ctx, st) => DetailScreen(id: st.pathParameters['id']!),
        ),
      ],
    ),
  ],
);

class App extends StatelessWidget {
  const App({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp.router(routerConfig: _router);
}

// Navigate from any widget:
// context.go('/item/42');           // replace stack
// context.push('/item/42');         // push on top
// context.pop();                    // pop

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class Posts extends StatefulWidget {
  const Posts({super.key});
  @override
  State createState() => _PostsState();
}

class _PostsState extends State {
  late Future> _future;

  @override
  void initState() {
    super.initState();
    _future = _load();
  }

  Future> _load() async {
    final r = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts?_limit=10'));
    return jsonDecode(r.body) as List;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder>(
      future: _future,
      builder: (ctx, snap) {
        if (snap.connectionState != ConnectionState.done) return const CircularProgressIndicator();
        if (snap.hasError) return Text('Error: ${snap.error}');
        final items = snap.data!;
        return ListView(
          children: [for (final p in items) ListTile(title: Text(p['title']))],
        );
      },
    );
  }
}

// pubspec.yaml: http, shared_preferences, go_router
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';

void main() => runApp(const App());

final _router = GoRouter(routes: [
  GoRoute(path: '/', builder: (c, s) => const ListScreen()),
  GoRoute(
    path: '/detail',
    builder: (c, s) => DetailScreen(post: s.extra as Map),
  ),
]);

class App extends StatelessWidget {
  const App({super.key});
  @override
  Widget build(BuildContext c) => MaterialApp.router(routerConfig: _router);
}

class ListScreen extends StatefulWidget {
  const ListScreen({super.key});
  @override
  State createState() => _ListScreenState();
}

class _ListScreenState extends State {
  List items = [];

  @override
  void initState() {
    super.initState();
    http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts?_limit=10'))
        .then((r) => setState(() => items = jsonDecode(r.body)));
  }

  @override
  Widget build(BuildContext c) => Scaffold(
        appBar: AppBar(title: const Text('Posts')),
        body: ListView(children: [
          for (final p in items)
            ListTile(title: Text(p['title']), onTap: () => c.push('/detail', extra: p)),
        ]),
      );
}

class DetailScreen extends StatelessWidget {
  final Map post;
  const DetailScreen({super.key, required this.post});

  Future _fav() async {
    final p = await SharedPreferences.getInstance();
    await p.setBool('fav:${post['id']}', true);
  }

  @override
  Widget build(BuildContext c) => Scaffold(
        appBar: AppBar(title: Text(post['title'])),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Text(post['body']),
            TextButton(onPressed: _fav, child: const Text('Save ★')),
          ]),
        ),
      );
}