StatelessWidget in Flutter - Mini App: Build & Ship

Build: Simple Greeting Screen

This screen shows a greeting message using a StatelessWidget. It displays a centered text that says Hello, Flutter!

Target UI

-----------------------
|                     |
|                     |
|   Hello, Flutter!    |
|                     |
|                     |
-----------------------

Create a StatelessWidget named GreetingScreen

Display a Scaffold with an AppBar titled 'Greeting'

Center a Text widget in the body with the message 'Hello, Flutter!'

Use default styling for the text

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 const MaterialApp(
      home: GreetingScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // TODO: Implement the UI here
    return Container();
  }
}

Task 1

Task 2

Task 3

Task 4

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 const MaterialApp(
      home: GreetingScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Greeting'),
      ),
      body: const Center(
        child: Text('Hello, Flutter!'),
      ),
    );
  }
}

We created a GreetingScreen class that extends StatelessWidget. This means the UI does not change after it is built. Inside the build method, we return a Scaffold which provides the basic visual layout structure. The AppBar shows the title 'Greeting'. The body uses a Center widget to place the Text widget in the middle of the screen. The text says 'Hello, Flutter!'. This is a simple static screen perfect for learning how to use StatelessWidget.

Final Result

Completed Screen

-----------------------
| Greeting             |
|---------------------|
|                     |
|   Hello, Flutter!    |
|                     |
-----------------------

The screen shows a top bar with the title 'Greeting'.

The text 'Hello, Flutter!' is centered on the screen.

No buttons or interactive elements are present.

Stretch Goal

Add a FloatingActionButton that shows a SnackBar with message 'Hello from button!' when tapped.

💡 Hint

Use ScaffoldMessenger.of(context).showSnackBar inside the onPressed callback of FloatingActionButton.