TodayTools

Flutter flashcards

One Dart codebase for fast, beautiful apps on Android, iOS, web and desktop.

Donate
Beginner friendly, starts from zero
Section
How to study
0
FlutterStart from zero · 1 of 11

What is Flutter, in one plain sentence?

Flutter is a free toolkit from Google for building apps for Android phones, iPhones, the web and computers from one set of code.

Write once, run on every screen in your house.

All topics

Flutter at a glance

Flutter is a free toolkit for building apps for phones, the web and computers from one set of code.

Like building with LEGO: every button, picture and gap is a brick, and you snap bricks together into a whole app.

Words you will meet

Widget
One building block of the screen, like a text, a button or a whole page
Dart
The programming language Flutter apps are written in
State
Data that can change while the app is open, like a counter or typed text
Null
Empty, no value yet
Compile
Translate your code into the language the phone chip understands
SDK
The box of tools you download to build apps
Hot reload
See your code change on the phone in about a second, without restarting

The steps

  1. 1. Start from zero (11 cards): What Flutter is, why it exists, and the plain words the core basics use.
  2. 2. Core basics (15 cards): Dart, widgets, state, hot reload and layout: a real screen from the first card.
  3. 3. Next steps (16 cards): Packages, navigation, context, networking and async UI, state management, forms, theming, responsive layout and storage.
  4. 4. Go deeper (16 cards): Rendering internals, layout rules, keys, performance and isolates, native interop, testing, build modes and store releases.
All 11 cards in Start from zero
What is Flutter, in one plain sentence?
Flutter is a free toolkit from Google for building apps for Android phones, iPhones, the web and computers from one set of code.
How were phone apps made before tools like Flutter?
Twice. One team wrote the Android app, another wrote the iPhone app in a different language. Double the work, and the two apps slowly drifted apart.
Where might you already be using a Flutter app?
Many shopping, banking, food and payment apps on your phone are built with it, including Google Pay. They look and feel like any other app.
What is a widget?
A widget is one building block of the screen: a piece of text, a button, a gap, even a whole page. You snap widgets inside each other, and together they form a tree.
What is Dart, and what does a first line of Dart look like?
Dart is the programming language Flutter apps are written in. Here print shows a message, and the text in quotes is the message.
What do Android, iOS, compile and native mean?
Android and iOS are the two phone systems; iOS runs iPhones. Compile means translating your code into the phone chip's own language. Native code runs directly on the chip, so it is fast.
What is state, and what does rebuild mean?
State is any data that can change while the app is open, like a like count or typed text. When state changes, Flutter rebuilds, meaning it draws that part of the screen again.
What does null mean?
Null means "empty, no value yet", like a blank box on a form. Dart makes you say which values may be null, so you cannot forget to handle the empty case.
What are the SDK, the terminal and hot reload?
The SDK is the free box of Flutter tools you download. The terminal is a text window where you type commands like flutter run. Hot reload shows your code change on the phone in about a second.
What do you need before starting?
A Windows, Mac or Linux computer, the free Flutter SDK, a code editor, and an Android phone or an emulator (a pretend phone on your screen). Building iPhone apps needs a Mac.
What will you be able to do after this topic?
Set up Flutter, build screens from widgets, make buttons that change what is shown, show long lists smoothly, and run your app on a real phone.
Flutter cheatsheet

Command line

  • flutter doctor -v Check the whole toolchain
  • flutter create --org dev.acme app_name New app with bundle id
  • flutter run -d chrome Run on a chosen device
  • flutter pub add go_router Add a package
  • flutter pub outdated See available upgrades
  • flutter analyze && flutter test Lint and test
  • dart run build_runner build -d Run code generators
  • dart fix --apply Apply automated fixes

Layout

  • Row / Column Children across or down
  • Expanded(child: ...) Fill remaining space
  • Stack + Positioned Layer widgets
  • SizedBox(height: 16) Fixed gap
  • Center / Align Loosen tight constraints
  • ListView.builder Lazy long lists
  • LayoutBuilder Layout by available width
  • SafeArea Avoid notches and system bars

State and async

  • setState(() => count++) Local state change
  • initState / dispose Create and free resources
  • if (!context.mounted) return; Guard context after await
  • FutureBuilder / StreamBuilder Build from async data
  • Isolate.run(() => heavyWork()) CPU work off the UI isolate
  • ref.watch(cartProvider) Read Riverpod state
  • ValueKey(item.id) Keep state with the item

Keys during flutter run

  • r Hot reload, keep state
  • R Hot restart, reset state
  • p Show layout guidelines
  • o Switch between Android and iOS look
  • v Open DevTools
  • q Quit

Release builds

  • flutter build appbundle --release Android AAB for Play
  • flutter build ipa --release iOS archive for App Store
  • flutter build web --wasm Web build compiled to WebAssembly
  • --build-name=1.4.0 --build-number=28 Override pubspec version
  • --obfuscate --split-debug-info=build/symbols Obfuscate, keep symbols
  • --dart-define-from-file=config/prod.json Build-time config
Donate