Flutter Hello World

Understanding the Code

import 'package:flutter/material.dart';

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

MaterialApp(
  home: ...
)

Scaffold(
  body: ...
)

🔹 Step-by-Step Breakdown

Let's understand each part of the Hello World app:

Step 1: Import Material Package

import 'package:flutter/material.dart';

// This imports Flutter's Material Design widgets
// Material Design provides beautiful, pre-built UI components
                            

Step 2: Define main() Function

void main() {
  // main() is the starting point of every Dart program
  // Flutter apps start here
}
                            

Step 3: Run the App

void main() {
  runApp(MyApp());
  // runApp() takes a widget and makes it the root of the app
}
                            

Step 4: Create MaterialApp

MaterialApp(
  home: Scaffold(...),
  // MaterialApp provides Material Design styling
  // 'home' is the default route (first screen)
)
                            

Step 5: Add Scaffold

Scaffold(
  body: Center(...),
  // Scaffold provides basic page structure
  // It can have AppBar, Body, BottomNavigationBar, etc.
)
                            

Step 6: Center the Text

Center(
  child: Text('Hello World!'),
  // Center widget centers its child
  // Text widget displays the text
  //After return you can add one widgets with "child:" attribute,
  //and many widgets with "children:" attribute.
)
                            

🔹 Enhanced Hello World

Let's add more features to our Hello World app:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                  color: Colors.blue,
                ),
              ),
              SizedBox(height: 20),
              Text(
                'Welcome to Flutter',
                style: TextStyle(fontSize: 18),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
                            

🔹 Adding Interactivity

Let's make our app interactive with a button. In this example we use a StatefulWidget to keep mutable state (the displayed message). When the button is pressed we call setState() to update the message and tell Flutter to rebuild the UI. Read the inline comments in the code to understand each part.

        import 'package:flutter/material.dart';

        void main() => runApp(MyApp()); // Entry point: launch the app

        class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
          return MaterialApp(
            home: HelloWorld(), // Home screen is our interactive widget
          );
          }
        }

        class HelloWorld extends StatefulWidget {
          @override
          _HelloWorldState createState() => _HelloWorldState();
        }

        class _HelloWorldState extends State<HelloWorld> {
          // This variable holds the current message shown on screen.
          String message = 'Hello World!';

          // Called when the button is pressed. Updating state inside setState()
          // tells Flutter to re-run build() and reflect the new message.
          void changeMessage() {
          setState(() {
            message = 'You clicked the button!';
          });
          }

          @override
          Widget build(BuildContext context) {
          return Scaffold(
            appBar: AppBar(
            title: Text('Interactive Hello World'),
            ),
            body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center, // center vertically
              children: [
              Text(
                message, // Displays the current state
                style: TextStyle(fontSize: 24),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: changeMessage, // Triggers state change on tap
                child: Text('Click Me'),
              ),
              ],
            ),
            ),
          );
          }
        }
                      

🔹 Running Your App

How to run your Hello World app:

Using Command Line:

# Create a new Flutter project
flutter create hello_world

# Navigate to project directory
cd hello_world

# Replace lib/main.dart with your code

# Run the app
flutter run

# Run on specific device
flutter run -d chrome        # Web
flutter run -d emulator-5554 # Android Emulator
                            

Using Android Studio / VS Code:

🔹 Common Mistakes to Avoid