Flutter First App Hello World

You have Flutter installed. Now you write your first real Flutter app from scratch — not the default counter, but a clean "Hello World" app you build line by line so you understand every part.

The Structure of a Flutter Project

When you run flutter create myapp, Flutter creates a folder with many files. You only need to focus on one file to start: lib/main.dart.

  myapp/
  ├── lib/
  │   └── main.dart   ◄── You write code here
  ├── android/
  ├── ios/
  ├── pubspec.yaml    ◄── App settings and packages
  └── test/

Open main.dart and Delete Everything

The default main.dart contains the counter app. Delete all of it. You will write a simpler, cleaner version.

Your First Flutter App — Full Code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First App'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

What Each Line Does

Line 1 — Import

import 'package:flutter/material.dart';

This brings in Flutter's Material Design library — the toolkit of buttons, text styles, and layouts you will use in every app.

The main() Function

void main() {
  runApp(MyApp());
}

Every Dart program starts at main(). runApp() tells Flutter to put your widget on the screen.

The Widget Tree

Think of widgets like Russian nesting dolls. Each widget sits inside another.

  MaterialApp
  └── Scaffold
      ├── AppBar
      │   └── Text ('My First App')
      └── body: Center
              └── Text ('Hello, World!')

• MaterialApp — Wraps the whole app with Material Design settings.
• Scaffold — Provides the basic screen structure: app bar, body, floating button.
• AppBar — The top bar you see in most apps.
• Center — Places its child in the middle of the screen.
• Text — Displays a string on screen.

Run the App

Save the file and run:

flutter run

Your emulator shows a white screen with a blue app bar titled "My First App" and the words "Hello, World!" in the center.

Try Hot Reload

Change 'Hello, World!' to 'Hello, Flutter!' and save the file. Press r in the terminal. The screen updates instantly — no restart needed. That is hot reload.

Understanding StatelessWidget

MyApp extends StatelessWidget means this widget has no changing data. It just draws the same screen every time. The build() method returns the widget tree to display.

  StatelessWidget Lifecycle:
  ─────────────────────────────
  App Starts → build() runs → Screen Appears
       (build() runs only once for static content)

The pubspec.yaml File

The pubspec.yaml file is your app's configuration file. It stores the app name, version, and any external packages you want to add.

name: myapp
version: 1.0.0
dependencies:
  flutter:
    sdk: flutter

You edit this file later when adding packages like icons, fonts, or HTTP networking tools.

Key Takeaways

• All Flutter apps start at main() and call runApp()
• Widgets nest inside each other to build the UI
• Scaffold gives you the basic screen frame
• Hot reload speeds up development significantly