Flutter from Scratch: Dart Installation, First Widget, and Hot Reload — Hands-On Guide

You've been trying to install Flutter for an hour, and flutter doctor still shows red errors. Or maybe you already have a working SDK but you don't understand how the development cycle works: write code, save, and the app reloads automatically? It's not magic — it's hot reload. This guide walks you through exactly what to install, how to write your first widget, and why Flutter saves you hours of compilation time.

At Meteora Web, we chose Flutter for several proprietary platforms because we control the entire stack without lifetime subscriptions. The same applies to you: learn Dart, own your code, and don't depend on closed platforms.

Why Dart Is the Heart of Flutter

Dart isn't a niche language. It was designed by Google for fast, predictable UI. Unlike JavaScript, Dart compiles both JIT (Just‑In‑Time) and AOT (Ahead‑Of‑Time): during development you use JIT for hot reload, in production AOT gives native performance. This means you can change code and see results in milliseconds without recompiling the whole app.

Why Dart over JavaScript? Because Flutter’s graphics engine talks directly to the GPU, bypassing the bridges that slow down React Native or Ionic. Dart compiles to machine code, not an interpreter. Result: 60 fps animations without jank.

Installation: From Zero to a Working Command

You don't need a powerful IDE, but you must prepare your environment. Follow this checklist.

1. Download the Flutter SDK

Go to flutter.dev and choose the download for your OS. Extract the archive to a folder like C:\src\flutter (Windows) or /Users/your-user/development/flutter (macOS/Linux).

2. Add Flutter to PATH

Windows: Set environment variables PUB_HOSTED_URL and FLUTTER_STORAGE_BASE_URL if you're in a region with slow access to Flutter servers. Then add C:\src\flutter\bin to PATH.

macOS/Linux: Add to .bashrc or .zshrc:

export FLUTTER_ROOT="/Users/your-user/development/flutter"
export PATH="$PATH:$FLUTTER_ROOT/bin"

3. Run flutter doctor

Open a terminal and type:

flutter doctor

It shows all prerequisites: Android SDK, Xcode (macOS), Chrome for web, and other tools. Fix any errors. Don't proceed until you see all green. A common issue is not accepting Android licenses. Fix with:

flutter doctor --android-licenses

4. Create your first project

flutter create my_app
cd my_app
code .

If you have Visual Studio Code with the Flutter extension, it opens the editor. Otherwise use Android Studio or your preferred IDE.

First Widget: From Scratch to Something Visible

Open lib/main.dart. Replace the contents with this:

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: 'My first app',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text(
            'Hello, world!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

What's happening:

• main() is the entry point. It calls runApp() with the root widget.
• MyApp is a StatelessWidget: it never changes its internal state.
• MaterialApp sets up Material Design theming and navigation.
• Scaffold provides the basic structure (app bar, body).
• Center and Text are layout widgets.

Why all this code for a simple “Hello world”? Because Flutter builds the UI as a widget tree. Every UI element is a widget: a button, a padding, an icon. There is no separation between layout and logic — it’s all Dart, all under your control.

Hot Reload: The Superpower That Saves Hours

Now run the app on an emulator or physical device:

flutter run

The app compiles and loads. Now change the text from 'Hello, world!' to 'Flutter is blazing fast!' and save the file. Don't stop the execution. In under a second you'll see the change on screen without losing the app’s state (unless you rebuilt the UI from scratch).

How does it work? The Dart VM keeps the widget tree in memory. When you save the file, the JIT compiler calculates the diff between the new and old code and sends only the modified bytecodes. The Flutter engine rebuilds only the affected widgets and redraws them on the GPU.

When to use hot reload vs hot restart? Use hot reload (type r in the terminal or save with the extension) for UI updates and function changes. If you modify global variables, constructors with required parameters, or change the main() configuration, use hot restart (R or Shift+R), which reloads everything from scratch.

Real-world example: In a catalog app, we added a complex filter using the write → save → see cycle and completed the feature in 20 minutes instead of an hour with full rebuilds.

Common Mistakes to Avoid

• Not updating PATH after installation. Without PATH, the flutter command won't be found.
• Using hot reload on changes that require hot restart. If you add a new global state, the app may behave weirdly. Restart fully.
• Forgetting to accept Android licenses. flutter doctor --android-licenses is the first step after installation.
• Using an emulator without GPU support. On Windows, choose an x86_64 emulator with Google APIs. Otherwise animations will be slow and hot reload might time out.

In Summary: What to Do Now

1. Install the Flutter SDK and make sure flutter doctor is all green.
2. Create a project with flutter create and open main.dart.
3. Write your first widget as shown above.
4. Run with flutter run and modify the text: experience hot reload in action.
5. Explore the official docs: flutter.dev/docs to learn about Stateful widgets and animations.

For a deeper look at how full control over your tech stack compares to no‑code solutions, read our article on No‑Code vs Low‑Code – the principles of ownership are the same even though Flutter is pure code.