Dart programming language overview in Flutter - Mini App: Build & Ship

Build: Dart Overview

This screen shows a simple introduction to the Dart programming language with key features listed.

Target UI

-------------------------
| Dart Programming       |
| --------------------- |
| - Easy to learn       |
| - Optimized for UI    |
| - Supports async code |
| - Strong typing       |
|                       |
| [Close]               |
-------------------------

Display a title 'Dart Programming'

Show a vertical list of 4 bullet points describing Dart features

Add a Close button at the bottom that closes the screen

Starter Code

Flutter

import 'package:flutter/material.dart';

class DartOverviewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dart Programming'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add bullet points here
            Spacer(),
            ElevatedButton(
              onPressed: () {
                // TODO: Close screen
              },
              child: Text('Close'),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

class DartOverviewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dart Programming'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('• Easy to learn', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            Text('• Optimized for UI', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            Text('• Supports async code', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            Text('• Strong typing', style: TextStyle(fontSize: 18)),
            Spacer(),
            Center(
              child: ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text('Close'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This screen uses a Scaffold with an AppBar titled 'Dart Programming'. The body has padding and a vertical column aligned to the start. Four bullet points are shown as Text widgets with a bullet character '•' and spacing between them. A Spacer pushes the Close button to the bottom. The Close button uses Navigator.pop() to close the screen when tapped.

This simple layout introduces Dart's key features in a clean, readable way.

Final Result

Completed Screen

-------------------------
| Dart Programming       |
| --------------------- |
| • Easy to learn       |
| • Optimized for UI    |
| • Supports async code |
| • Strong typing       |
|                       |
|         [Close]       |
-------------------------

Tapping the Close button closes the Dart Overview screen and returns to the previous screen.

Stretch Goal

Add a dark mode toggle switch that changes the screen background and text colors.

💡 Hint

Use a StatefulWidget and Theme.of(context).brightness to toggle colors. Wrap text and background colors with conditional checks.