Flutter Setup & Toolchain

Playground note: This is a setup and toolchain lesson — no runnable in-browser snippet applies here. Follow the steps in your terminal.

Setting up Flutter is closer to installing the Go or Rust toolchain than to npm install. You download one SDK, add it to your PATH, and the flutter CLI handles everything else — dependency management, device emulation, builds, and hot reload.

Install Flutter

Visit flutter.dev/docs/get-started/install and follow the guide for your OS (macOS, Windows, or Linux).

macOS shortcut (Homebrew):

brew install --cask flutter

After installation, run the doctor to verify your environment:

flutter doctor

flutter doctor is Flutter’s equivalent of npx create-react-app --check — it scans for missing dependencies (Xcode, Android Studio, connected devices) and tells you exactly what to fix.

Which versions this course targets

Everything here is written against Flutter 3.47 (the current stable) on the React 19 side of the comparison. Flutter’s stable channel ships roughly every quarter, so a few platform requirements are worth checking before you start:

Target	Requirement on Flutter 3.47
iOS	iOS 15 or later (raised from 13)
macOS	macOS 12 or later (raised from 10.15)
Xcode	Xcode 27 supported
Renderer	Impeller is the default on iOS, Android, macOS, Windows, and Linux
iOS plugins	Swift Package Manager; CocoaPods is in maintenance mode

Impeller replaced Skia as the renderer precisely to kill the “first animation stutters” problem: shaders are compiled at build time instead of being discovered at runtime. If you have read older Flutter posts complaining about jank on the first frame of an animation, that is the problem Impeller solves, and on 3.47 it is on by default everywhere.

The Swift Package Manager move matters the first time you add a plugin with native iOS code. Most popular plugins have already migrated; if you hit one that has not, you will see CocoaPods fall back in. That still works today, but treat an unmigrated plugin as a maintenance signal — the same way you would treat an npm package whose last publish was three years ago.

The flutter CLI vs npm / Vite

npm / Vite / CRA	flutter CLI	Purpose
npm create vite@latest my-app	flutter create my_app	Scaffold a new project
npm install	flutter pub get	Install dependencies
npm run dev	flutter run	Start dev server + hot reload
npm run build	flutter build apk / flutter build web	Production build
npm install package	flutter pub add package	Add a dependency
npm test	flutter test	Run tests
npx eslint .	flutter analyze	Lint / static analysis

Scaffold a new project

flutter create my_app
cd my_app
flutter run

flutter create generates a project similar to what create-react-app produces: an entry point, a sample widget, and all the platform-specific boilerplate (iOS Xcode project, Android Gradle files, web index.html).

Project structure vs React

flowchart TB
  root["my_app/"]
  lib["lib/"]
  mainDart["main.dart — entry point (≈ src/main.tsx)"]
  test["test/"]
  widgetTest["widget_test.dart — tests (≈ src/__tests__/)"]
  pubspec["pubspec.yaml — dependencies (≈ package.json)"]
  android["android/ — Android native shell"]
  ios["ios/ — iOS native shell"]
  web["web/ — Web shell"]
  root --> lib --> mainDart
  root --> test --> widgetTest
  root --> pubspec
  root --> android
  root --> ios
  root --> web

Flutter project structure vs React

Your Dart code lives entirely in lib/. You almost never touch android/ or ios/ unless you need platform-specific native code.

pubspec.yaml vs package.json

pubspec.yaml

name: my_app
dependencies:
  flutter:
    sdk: flutter
  dio: ^5.4.0          # HTTP client  (≈ axios)
  go_router: ^18.0.0   # routing      (≈ react-router-dom)

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^6.0.0

After editing pubspec.yaml run flutter pub get (≈ npm install) to fetch packages from pub.dev — Dart’s npm registry.

Adding a package

flutter pub add dio

This edits pubspec.yaml and runs pub get in one step — equivalent to npm install dio.

Editor setup

VS Code (recommended for React developers):

1. Install the Flutter extension (includes Dart language support).
2. Open the command palette → Flutter: Select Device to pick a simulator/emulator.
3. Press F5 or run Flutter: Run to start with hot reload.

Android Studio / IntelliJ: Install the Flutter and Dart plugins. This is the preferred IDE for Android-heavy work.

Hot Reload vs Fast Refresh

Both work the same way: edit a source file, save, and the running app updates in under a second without losing state. In Flutter:

• Hot Reload (r in the terminal, or Ctrl+S in VS Code with the extension) — injects updated code, preserves widget state.
• Hot Restart (R) — full restart, resets state. Equivalent to Ctrl+C + npm run dev.

Running on a device or emulator

# list available devices
flutter devices

# run on a specific device
flutter run -d "iPhone 16"
flutter run -d chrome
flutter run -d macos

🔀 React toolchain → Flutter toolchain

• No node_modules/ folder. Packages are stored in the global pub cache (~/.pub-cache). Your project folder stays lean.
• pubspec.lock is the equivalent of package-lock.json / yarn.lock. Commit it.
• Platform folders (android/, ios/) are generated by flutter create and managed by Flutter. You do not write Gradle or Xcode config unless you need native plugins.
• flutter analyze is the built-in linter. No separate ESLint setup required.
• flutter test runs all files matching test/**/*_test.dart — no Jest config needed.

What is the Flutter equivalent of `npm install`?

flutter install flutter pub get dart pub install flutter fetch

Where does your Dart application code live in a Flutter project?

src/ dart/ lib/ app/

Which command adds a new package to a Flutter project and updates pubspec.yaml?

flutter install <pkg> flutter pub add <pkg> dart add <pkg> pub install <pkg>

Flutter's Hot Reload preserves widget state. What does Hot Restart do?

Saves the current state to disk Only reloads changed files Performs a full restart and resets all state Rebuilds the native app binary

What problem does Impeller, the default renderer on Flutter 3.47, solve?

It lets Flutter run on the web without WebAssembly It compiles shaders at build time, removing the stutter on an animation’s first frame It replaces Dart with a faster language It removes the need for platform-specific folders

Submit

Mark as complete