iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Get Started

Install Flutter, set up devices, run a starter app, and ship a release build.

Flutter — getting started

EXAMPLE
# ===== 1. Install =====
# macOS / Linux: download Flutter SDK from flutter.dev; add to PATH:
export PATH="$PATH:$HOME/flutter/bin"

# Windows: download zip from flutter.dev, extract, add bin to PATH.

# Verify + doctor:
flutter doctor
# Resolve missing pieces (Xcode for iOS, Android Studio for Android, etc).

# ===== 2. Required tooling =====
# iOS (macOS only): Xcode + iOS Simulator + CocoaPods
sudo gem install cocoapods
# Android: Android Studio (or just SDK + emulator)
flutter doctor --android-licenses        # accept

# Web: Chrome
# Desktop: per-platform toolchain (Visual Studio Build Tools / Xcode / GTK)

# ===== 3. Create + run =====
flutter create my_app
cd my_app

# Connect a device or open a simulator. Then:
flutter run
# Press 'r' for hot reload; 'R' for hot restart.

# ===== 4. The starter app =====
# lib/main.dart already has a counter. Replace:
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: 'Hello Flutter',
      theme: ThemeData(useMaterial3: true),
      home: const Home(),
    );
  }
}

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

class _HomeState extends State<Home> {
  int _n = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: Text('Clicks: $_n', style: const TextStyle(fontSize: 24))),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _n++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

# ===== 5. Packages =====
flutter pub add http
flutter pub add provider
flutter pub get

# ===== 6. Build for release =====
flutter build apk --release             # Android APK
flutter build appbundle --release       # Android AAB (Play Store)
flutter build ios --release             # iOS (open Runner.xcworkspace to archive)
flutter build web --release             # Web bundle
flutter build macos / windows / linux   # Desktop

# ===== 7. Useful CLI =====
flutter analyze       # lint + type check
dart format .         # format code
flutter test          # run tests
flutter devices       # list connected targets

# ===== Patterns to internalise =====
# - Run on a REAL device early (simulators / emulators lie)
# - const constructors everywhere they fit (free perf wins)
# - One state-management library per app (Provider / Riverpod / Bloc)
# - flutter analyze in CI as a required check

# ===== Pitfalls =====
# - Skipping flutter doctor; subtle setup gaps bite later
# - Using setState for app-wide state -> rebuilds galore
# - Forgetting to dispose controllers (Animation, TextEditing, etc)
# - Bundling huge fonts/images without optimisation

Why it matters

Install Flutter, run flutter doctor, fix every red line. Then flutter create, flutter run, hot reload — and you have a real mobile app running. From there pick a state lib, follow Dart formatting rules, and the cross-platform story takes care of itself.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
# Install Flutter SDK + Android Studio / Xcode
flutter doctor
flutter create myapp
cd myapp
flutter run
Try it Yourself »

Discussion

Loading…