First Flutter app (Hello World)

Introduction

We create a simple app to learn how Flutter shows things on the screen. It helps us understand the basics of making mobile apps.

When you want to test if your Flutter setup works correctly.

When you want to learn how to display text on a mobile screen.

When you want to start a new Flutter project and see a simple output.

When you want to understand the structure of a Flutter app.

Syntax

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

runApp() starts the app and shows the widget you give it.

MaterialApp sets up basic app design and navigation.

Examples

This shows simple text on the screen.

Flutter

Text('Hello World')

This centers the text in the middle of the screen.

Flutter

Center(child: Text('Hello World'))

Scaffold provides a basic page layout with a body area.

Flutter

Scaffold(body: Center(child: Text('Hello World')))

Sample App

This program shows the text "Hello World" centered on a white screen. It uses MaterialApp for app basics, Scaffold for page layout, and Center to put the text in the middle.

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Important Notes

Use const for widgets that don't change to make your app faster.

Every Flutter app starts with runApp() to show the first widget.

Widgets are the building blocks of Flutter apps, like LEGO pieces.

Summary

Flutter apps start with runApp() and a widget tree.

Use MaterialApp and Scaffold for basic app structure.

Text is shown using the Text widget inside layout widgets like Center.