Flutter Cheatsheet

Flutter Notes

Goals

I'd like to learn how to get the environment set up and how to do lots of boilerplate-y things:

• how to set up a strict linter (possibly https://pub.dev/packages/very_good_analysis)

  flutter pub add --dev very_good_analysis

  analysis_options.yaml:

  include: package:very_good_analysis/analysis_options.yaml

  flutter analyze

• how to ignore a false positive

  // ignore unused_field, this is just for testing the linter
  final unused = 0;

• how to build for different environments (url and key ids for prod vs staging vs local)

  flutter --dart-define-from-file=./dart_defines/dev.json

  ./lib/main.dart:

  const titleSuffix = String.fromEnvironment(
     'titleSuffix',
     defaultValue: ' - Local Build',
  );

  ./dart_defines/prod.json:

  {
     "API_URL": "https://api.example.com",
     "titleSuffix": ""
  }

  ./dart_defines/dev.json:

  {
     "API_URL": "https://api.example.com",
     "titleSuffix": " - Dev Build"
  }

  ./.vscode/launch.json

  {
     "version": "0.2.0",
     "configurations": [
        {
           "name": "Flutter (dev)",
           "request": "launch",
           "type": "dart",
           "flutterMode": "debug",
           "args": ["--dart-define-from-file=dart_defines/dev.json"]
        },
        {
           "name": "Flutter (prod)",
           "request": "launch",
           "type": "dart",
           "flutterMode": "release",
           "args": ["--dart-define-from-file=dart_defines/prod.json"]
        }
     ]
  }

• how to set a better default theme (possibly https://rydmike.com/flexcolorscheme/themesplayground-latest/)
• global error handling, notification, and logging to server
  • https://docs.flutter.dev/testing/errors
• background notification / background tasks
• Provider or Signal state management (I'd prefer to avoid a heavy framework)
• layout fundamentals - how to not be surprised
• credentials (especially Passkeys)
• user preferences (e.g. light / dark theme)
• deep linking
• read local files and priority-upload to file storage API

Dart Packages

• https://dart.dev/tools/pub/package-layout
• https://docs.flutter.dev/packages-and-plugins/developing-packages

Understanding GUI layout

• From web: https://docs.flutter.dev/get-started/flutter-for/web-devs
• Layout: https://docs.flutter.dev/ui/layout
• Lab: https://docs.flutter.dev/ui/layout/tutorial

Preview

• https://m3.material.io/components/chips/overview
• https://rydmike.com/flexcolorscheme/themesplayground-latest/

Sharing

• https://www.widgetbook.io/

Gemini

npm install -g @google/gemini-cli
gemini extensions install https://github.com/gemini-cli-extensions/flutter.git --auto-update

Context7 MCP for up-to-date docs (API Key is optional for higher rate limits)

~/.gemini/settings.json:

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp@latest"
      ]
    }
  }
}

Flutter
- Install Extensions
  - Gemini CLI Companion

/ide enable

Build issues

flutter clean
flutter pub get

very_good_analysis

1. Open your pubspec.yaml file.
2. Add very_good_analysis: ^10.0.0 under the dev_dependencies: section.
3. Run the command flutter pub get in your terminal.

multiple builds

• dev: flutter build --dart-define-from-file=dart_defines/dev.json
• prod: flutter build --release --dart-define-from-file=dart_defines/prod.json

// MUST be const otherwise spooky things happen
const apiUrl = String.fromEnvironment('API_URL', defaultValue: 'https://default.api.example.com');

More Notes

Code with Andrea

• https://codewithandrea.com/articles/vscode-shortcuts-extensions-settings-flutter-development/

Very Good Analysis

• https://pub.dev/packages/very_good_analysis

Harrison Pope says

Your Flutter journey should begin with the Google-provided well-written up-to-date documentation. To install Dart and Flutter, visit https://docs.flutter.dev/get-started/install and read the section for your operating system. Then:

• On https://dart.dev/:
• Read the entire Dart Language Tour.
• Skim the Core Libraries.
• Do the Dart Codelabs.
• On https://flutter.dev/:
• Read the overview material.
• Do the Flutter Codelabs.
• Skim the Cookbook.

Flutter changes fast, with releases happening almost monthly. Because of this we recommend you use caution when looking at content that is more than 6 months old as it may no longer be accurate/current. Here are some list of videos, courses and books that are curated by Flutter:

• https://docs.flutter.dev/resources/videos
• https://docs.flutter.dev/resources/books

# Web
flutter build web --wasm

# iOS
flutter build ios

# Android
flutter build apk  # For a single APK
flutter build appbundle  # For an app bundle (recommended for Google Play)

# macOS
flutter build macos

# Windows
flutter build windows

# Linux
flutter build linux

Tooling

• Xcode
• Android Studio / Android SDK
  • commandline tools
    • Settings => Language & Frameworks => Android SDK => SDK Tools => Android SDK Command-line Tools
• Chromium
• cmd + . => wrap in widget
• ctrl + space => show constructor

New Project

• Flutter, Dart, CoPilot
• Choose Flutter AGAIN

Project Anatomy

• Project
• Plugin
  • cross-platform module, platform-specific bits
  • bi-directional messaging system
• Package
  • The thing that contains code that installs
  • Pure dart / flutter
• pub.dev Package
  • Maybe platform, maybe Flutter
• Module
  • pre-built binary
  • embed / "Add to App"

Widget

• App
• Stateless
• Stateful
• Constraints
  • https://docs.flutter.dev/ui/layout/constraints
• Theme
  • https://rydmike.com/flexcolorscheme/themesplayground-latest/
• Architecture
  • https://docs.flutter.dev/app-architecture/case-study
  • https://engineering.verygood.ventures/architecture/
  • https://docs.flutter.dev/cookbook/design/tabs

Generated code to commit

• android, ios, web, linux, windows, etc
• lib (the code)

Splash screen is native

• https://pub.dev/packages/flutter_native_splash

Bloc Streams

• Producer
• Consumer

Responsive