Flutter SDK installation - Mini App: Build & Ship

Build: Flutter SDK Setup Guide

This screen guides users through the steps to install the Flutter SDK on their computer.

Target UI

----------------------------------
| Flutter SDK Setup Guide          |
|--------------------------------|
| 1. Download Flutter SDK          |
| 2. Extract the zip file          |
| 3. Add flutter/bin to PATH      |
| 4. Run flutter doctor           |
|                                |
| [Next]                         |
----------------------------------

Display numbered steps for installing Flutter SDK

Show a Next button at the bottom

Use a clean and readable layout

Make the Next button tappable (no action needed)

Starter Code

Flutter

import 'package:flutter/material.dart';

class FlutterSdkSetupGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter SDK Setup Guide'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add numbered steps here
            Spacer(),
            Center(
              child: ElevatedButton(
                onPressed: () {},
                child: Text('Next'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

class FlutterSdkSetupGuide extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter SDK Setup Guide'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('1. Download Flutter SDK', style: TextStyle(fontSize: 18)),
            SizedBox(height: 12),
            Text('2. Extract the zip file', style: TextStyle(fontSize: 18)),
            SizedBox(height: 12),
            Text('3. Add flutter/bin to PATH', style: TextStyle(fontSize: 18)),
            SizedBox(height: 12),
            Text('4. Run flutter doctor', style: TextStyle(fontSize: 18)),
            Spacer(),
            Center(
              child: ElevatedButton(
                onPressed: () {},
                child: Text('Next'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This screen uses a Scaffold with an AppBar titled "Flutter SDK Setup Guide". The body has padding and a vertical Column layout. Four numbered steps are shown as Text widgets with spacing between them using SizedBox. The Next button is centered at the bottom using Spacer and Center widgets. The button is tappable but does not perform any action yet.

This simple layout clearly shows the installation steps in order, making it easy for beginners to follow.

Final Result

Completed Screen

----------------------------------
| Flutter SDK Setup Guide          |
|--------------------------------|
| 1. Download Flutter SDK          |
|                                |
| 2. Extract the zip file          |
|                                |
| 3. Add flutter/bin to PATH      |
|                                |
| 4. Run flutter doctor           |
|                                |
|           [ Next ]              |
----------------------------------

User can scroll if screen is small

Tapping Next button does nothing for now

Stretch Goal

Add a checkbox for each step so users can mark steps as done

💡 Hint

Use StatefulWidget and CheckboxListTile widgets to track and display checked state