Getting Started with Flutter: Install, Your First App and Project Structure

Flutter is Google's toolkit for building Android, iOS, web and desktop apps from one codebase, written in Dart. This guide takes you from installation to your first running app.

#What exactly is Flutter?

Flutter is a UI framework. Instead of wrapping the operating system's native widgets, it draws everything itself. The result is a consistent look and near-native performance on every platform.

#Installing

• Download the Flutter SDK from the official site and add its folder to your PATH.
• Install Android Studio for the Android SDK and an emulator (or connect a real phone with USB debugging).
• Run the command below and fix issues until everything is green:

flutter doctor

If the default servers are slow or blocked where you live, the PUB_HOSTED_URL and FLUTTER_STORAGE_BASE_URL environment variables let you use a trusted mirror.

#Create and run your first project

flutter create my_app
cd my_app
flutter run

These three lines generate a sample counter app and run it on the connected device. Open lib/main.dart. The smallest possible Flutter app looks like 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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Hello Flutter')),
        body: const Center(child: Text('My first app')),
      ),
    );
  }
}

#Project structure

• lib/: all your Dart code; main.dart is the entry point.
• pubspec.yaml: project name, version, dependencies (packages), fonts and images.
• android/, ios/, web/, windows/: the shell for each platform; you mostly visit them for configuration and publishing.
• test/: your tests.

#Everything is a widget

Everything you see on screen is a widget: text, buttons, spacing, even the theme. Widgets come in two kinds: StatelessWidget for UI built from fixed input, and StatefulWidget for UI that changes over time (like a counter). You nest widgets to build the full interface.

#Hot reload, the biggest win

After changing code, press r (or save in your IDE) and the change shows up in under a second without losing app state. R, or Hot Restart, restarts the app from scratch and is useful after you change your state structure.

#What next?

Once your first app runs, learn three things: layout (Row, Column, Expanded), navigation between screens, and state management. Master those and you can build most real-world apps.