Widget tree concept in Flutter - Mini App: Build & Ship

Build: Simple Widget Tree Screen

This screen shows a basic widget tree with a title and two buttons arranged vertically.

Target UI

---------------------
| Simple Widget Tree |
|                   |
|   [Button One]    |
|                   |
|   [Button Two]    |
|                   |
---------------------

Use a Column widget to arrange children vertically

Add a Text widget at the top with the title 'Simple Widget Tree'

Add two ElevatedButton widgets below the title with labels 'Button One' and 'Button Two'

Center the content vertically and horizontally on the screen

Starter Code

Flutter

import 'package:flutter/material.dart';

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

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class SimpleWidgetTreeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('Simple Widget Tree', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('Button One'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {},
              child: Text('Button Two'),
            ),
          ],
        ),
      ),
    );
  }
}

We use a Center widget to center the whole column on the screen. Inside it, a Column arranges children vertically. The mainAxisAlignment and crossAxisAlignment center the children inside the column. We add a Text widget for the title, then two ElevatedButton widgets with labels. SizedBox widgets add space between elements for better look.

This simple widget tree shows how widgets nest inside each other to build UI.

Final Result

Completed Screen

---------------------
| Simple Widget Tree |
|                   |
|   [Button One]    |
|                   |
|   [Button Two]    |
|                   |
---------------------

Tapping 'Button One' or 'Button Two' does nothing (empty onPressed)

The title text is centered above the buttons

Buttons are spaced vertically with some gap

Stretch Goal

Add a SnackBar that shows which button was pressed

💡 Hint

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