First Flutter app (Hello World) - Mini App: Build & Ship

Build: Hello World Screen

This screen shows a simple greeting message in the center.

Target UI

---------------------
|                   |
|                   |
|    Hello World    |
|                   |
|                   |
---------------------

Display a centered text that says 'Hello World'.

Use a Scaffold with an AppBar titled 'Welcome'.

Text should be large and easy to read.

Starter Code

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 MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome'),
        ),
        body: Center(
          // TODO: Add your code here
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

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 MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome'),
        ),
        body: const Center(
          child: Text(
            'Hello World',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

We use a MaterialApp as the root widget to provide material design styling. Inside it, a Scaffold gives us a basic page layout with an AppBar titled 'Welcome'. The main content is centered using Center, and inside it, a Text widget displays 'Hello World' with a font size of 24 to make it easy to read.

Final Result

Completed Screen

---------------------
| Welcome           |
|-------------------|
|                   |
|    Hello World    |
|                   |
---------------------

The screen shows a top app bar with the title 'Welcome'.

The text 'Hello World' is centered on the screen.

No interactive elements on this screen.

Stretch Goal

Change the text color to blue and make it bold.

💡 Hint

Use the TextStyle property with color: Colors.blue and fontWeight: FontWeight.bold.