Why Dart is built for UI development in Flutter - Build It to Prove It

Build: Dart UI Explanation

This screen explains why Dart is a good choice for building user interfaces in Flutter apps.

Target UI

┌───────────────────────────────┐
│ Why Dart is built for UI dev  │
├───────────────────────────────┤
│ • Fast compilation            │
│ • Hot reload for quick update │
│ • Optimized for animations    │
│ • Easy to learn and read      │
│ • Supports reactive programming│
│                               │
│ [Close]                      │
└───────────────────────────────┘

Display a title at the top

Show a bullet list of 5 reasons why Dart is good for UI

Add a Close button at the bottom that closes the screen

Starter Code

Flutter

import 'package:flutter/material.dart';

class DartUIExplanation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Why Dart is built for UI dev'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add bullet list of reasons here
            Spacer(),
            Center(
              child: ElevatedButton(
                onPressed: () {
                  // TODO: Close the screen
                },
                child: Text('Close'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

class DartUIExplanation extends StatelessWidget {
  final List<String> reasons = [
    'Fast compilation',
    'Hot reload for quick update',
    'Optimized for animations',
    'Easy to learn and read',
    'Supports reactive programming',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Why Dart is built for UI dev'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ...reasons.map((reason) => Padding(
              padding: EdgeInsets.symmetric(vertical: 4),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('• ', style: TextStyle(fontSize: 20)),
                  Expanded(child: Text(reason, style: TextStyle(fontSize: 16))),
                ],
              ),
            )),
            Spacer(),
            Center(
              child: ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text('Close'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This screen uses a simple Column to list reasons why Dart is great for UI development. Each reason is shown with a bullet point using a Row with a dot and text. The Spacer pushes the Close button to the bottom center. The Close button uses Navigator.of(context).pop() to close the screen, which is a common way to go back in Flutter apps.

This approach keeps the UI clean and easy to read, showing the key points clearly. Using Dart's list and map features makes the code concise and easy to update.

Final Result

Completed Screen

┌───────────────────────────────┐
│ Why Dart is built for UI dev  │
├───────────────────────────────┤
│ • Fast compilation            │
│ • Hot reload for quick update │
│ • Optimized for animations    │
│ • Easy to learn and read      │
│ • Supports reactive programming│
│                               │
│           [Close]             │
└───────────────────────────────┘

Tapping the Close button closes this screen and returns to the previous screen

Stretch Goal

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

💡 Hint

Use a StatefulWidget and a Switch widget to toggle a boolean. Change Scaffold backgroundColor and text colors based on this boolean.