Text widget and styling in Flutter - Mini App: Build & Ship

Build: Styled Text Screen

This screen shows a text widget with custom styling including font size, color, and weight.

Target UI

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

Display a Text widget with the text 'Hello, Flutter!'

Set the font size to 24

Make the text color blue

Make the text bold

Center the text horizontally and vertically on the screen

Starter Code

Flutter

import 'package:flutter/material.dart';

class StyledTextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // TODO: Add your Text widget here with styling
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class StyledTextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(
            fontSize: 24,
            color: Colors.blue,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

We use a Text widget to show the string 'Hello, Flutter!'. The TextStyle sets the font size to 24, color to blue, and makes the text bold by setting fontWeight to FontWeight.bold. The Center widget centers the text horizontally and vertically on the screen.

Final Result

Completed Screen

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

The text is displayed in blue, bold, and large font size

Text is centered on the screen

Stretch Goal

Add a button below the text that changes the text color to red when tapped.

💡 Hint

Use a StatefulWidget and update the TextStyle color inside setState when the button is pressed.