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.

Practice

1. What is the main characteristic of a StatelessWidget in Flutter?

easy

A. It builds UI that never changes after creation.

B. It can hold and update mutable state.

C. It requires a setState() method to update UI.

D. It automatically rebuilds when data changes.

Solution

1. Step 1: Understand StatelessWidget behavior

   A StatelessWidget builds UI that does not depend on any mutable state and does not change after it is created.

2. Step 2: Compare with StatefulWidget

   Unlike StatefulWidget, it does not have a setState() method and does not rebuild on data changes.

3. Final Answer:

   It builds UI that never changes after creation. -> Option A

4. Quick Check:

   StatelessWidget = UI never changes [OK]

Hint: StatelessWidget means no UI changes after build [OK]

Common Mistakes:

• Confusing StatelessWidget with StatefulWidget
• Thinking StatelessWidget can update UI dynamically
• Assuming setState() is used in StatelessWidget

2. Which of the following is the correct way to define a StatelessWidget in Flutter?

easy

A. class MyWidget extends StatelessWidget { Widget build() { return Text('Hi'); } }

B. class MyWidget extends StatelessWidget { Widget build(BuildContext context) { return Text('Hi'); } }

C. class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('Hi'); } }

D. class MyWidget extends StatelessWidget { @override Widget build() { return Text('Hi'); } }

Solution

1. Step 1: Check method signature

   The build method must override the parent and accept a BuildContext parameter.

2. Step 2: Verify syntax correctness

   class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('Hi'); } } correctly uses @override and the method signature Widget build(BuildContext context).

3. Final Answer:

   class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('Hi'); } } -> Option C

4. Quick Check:

   build method needs @override and BuildContext [OK]

Hint: build method must override and take BuildContext [OK]

Common Mistakes:

• Omitting @override annotation
• Missing BuildContext parameter in build method
• Incorrect method signature without parameters

3. What will be displayed when this StatelessWidget runs?

class HelloWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flutter!');
  }
}

medium

A. A blank screen

B. Text widget showing 'Hello, Flutter!'

C. Error: Missing MaterialApp wrapper

D. Nothing, because StatelessWidget cannot display text

Solution

1. Step 1: Analyze the build method

   The build method returns a Text widget with the string 'Hello, Flutter!'.

2. Step 2: Understand StatelessWidget output

   StatelessWidget can display static UI like text. It will show the text on screen.

3. Final Answer:

   Text widget showing 'Hello, Flutter!' -> Option B

4. Quick Check:

   StatelessWidget returns Text widget = shows text [OK]

Hint: build returns Text widget, so text appears on screen [OK]

Common Mistakes:

• Thinking StatelessWidget needs MaterialApp to display text
• Assuming StatelessWidget cannot show UI
• Confusing blank screen with error

4. Identify the error in this StatelessWidget code:

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return Text('Hi');
  }
}

medium

A. StatelessWidget cannot have a build method

B. build method must return a Container, not Text

C. Missing constructor for MyWidget

D. Missing @override annotation before build method

Solution

1. Step 1: Check for @override annotation

   The build method should have @override to indicate it overrides the parent method.

2. Step 2: Verify other parts

   Returning a Text widget is valid, and no constructor is required if no parameters.

3. Final Answer:

   Missing @override annotation before build method -> Option D

4. Quick Check:

   build method needs @override annotation [OK]

Hint: Always add @override before build method in widgets [OK]

Common Mistakes:

• Ignoring missing @override warning
• Thinking build must return Container only
• Assuming constructor is mandatory without parameters

5. You want to create a static welcome screen using StatelessWidget that shows a centered title and a subtitle below it. Which code snippet correctly implements this?

hard

A. class WelcomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Welcome'),
Text('Enjoy your stay')
],
),
);
}
}

B. class WelcomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Welcome'),
Text('Enjoy your stay')
],
);
}
}

C. class WelcomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: [
Text('Welcome'),
Text('Enjoy your stay')
],
);
}
}

D. class WelcomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('Welcome'),
subtitle: Text('Enjoy your stay'),
);
}
}

Solution

1. Step 1: Understand layout requirements

   The title and subtitle should be centered vertically and horizontally, stacked vertically.

2. Step 2: Analyze options

   class WelcomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Welcome'), Text('Enjoy your stay') ], ), ); } } wraps a Column inside a Center widget, centering the whole column on screen. This matches the requirement.

3. Step 3: Check other options

   class WelcomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Welcome'), Text('Enjoy your stay') ], ); } } lacks Center, so column aligns top-left. class WelcomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Row( children: [ Text('Welcome'), Text('Enjoy your stay') ], ); } } uses Row which arranges horizontally. class WelcomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Text('Welcome'), subtitle: Text('Enjoy your stay'), ); } } misuses Scaffold properties.

4. Final Answer:

   Correctly centers a column with title and subtitle. -> Option A

5. Quick Check:

   Center + Column = vertical centered texts [OK]

Hint: Use Center widget to center Column vertically and horizontally [OK]

Common Mistakes:

• Forgetting to wrap Column with Center
• Using Row instead of Column for vertical layout
• Misusing Scaffold properties like subtitle