Why everything in Flutter is a widget - Build It to Prove It

Build: Widget Explanation Screen

This screen explains why everything in Flutter is a widget using simple text and examples.

Target UI

----------------------------------
| Widget Explanation Screen       |
|--------------------------------|
| Why everything in Flutter is a |
| widget:                       |
|                                |
| - Widgets build UI elements.   |
| - They are reusable blocks.     |
| - Everything is a widget: text, |
|   buttons, layout, even padding.|
|                                |
| [OK]                          |
----------------------------------

Display a title at the top

Show a short explanation in bullet points

Add an OK button at the bottom that closes the screen

Starter Code

Flutter

import 'package:flutter/material.dart';

class WidgetExplanationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Widget Explanation Screen'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add explanation text here
          ],
        ),
      ),
      // TODO: Add OK button here
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

class WidgetExplanationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Widget Explanation Screen'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Why everything in Flutter is a widget:', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            SizedBox(height: 12),
            Text('• Widgets build UI elements.'),
            Text('• They are reusable blocks.'),
            Text('• Everything is a widget: text, buttons, layout, even padding.'),
          ],
        ),
      ),
      bottomNavigationBar: Padding(
        padding: EdgeInsets.all(16),
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('OK'),
        ),
      ),
    );
  }
}

This screen uses a Scaffold with an AppBar for the title. The main content is a Column inside Padding to show bullet points explaining why Flutter uses widgets everywhere. The bullet points are simple Text widgets. At the bottom, an ElevatedButton labeled 'OK' closes the screen using Navigator.pop(). This shows how Flutter treats everything as widgets, even text and buttons, making UI building consistent and flexible.

Final Result

Completed Screen

----------------------------------
| Widget Explanation Screen       |
|--------------------------------|
| Why everything in Flutter is a |
| widget:                       |
|                                |
| • Widgets build UI elements.    |
| • They are reusable blocks.      |
| • Everything is a widget: text, |
|   buttons, layout, even padding.|
|                                |
| [       OK       ]              |
----------------------------------

Tapping the OK button closes the screen and returns to the previous screen

Stretch Goal

Add a toggle to switch between light and dark mode on this screen

💡 Hint

Use a Switch widget in the AppBar and wrap your app with a Theme widget that changes based on the toggle