CI/CD for Flutter - Mini App: Build & Ship

Build: Flutter CI/CD Setup Guide

This screen guides users through setting up Continuous Integration and Continuous Deployment (CI/CD) for a Flutter app using GitHub Actions.

Target UI

-----------------------------------
| Flutter CI/CD Setup Guide         |
|---------------------------------|
| 1. Connect your GitHub repo      |
| 2. Add workflow YAML file        |
| 3. Configure build and test      |
| 4. Deploy to Firebase App Distribution |
|                                 |
| [Start Setup]                   |
-----------------------------------

Display a title and numbered steps for CI/CD setup

Include a button labeled 'Start Setup' at the bottom

When the button is tapped, show a dialog with a short explanation of GitHub Actions

Use Flutter widgets only, with clear layout and spacing

Starter Code

Flutter

import 'package:flutter/material.dart';

class CiCdSetupScreen extends StatelessWidget {
  const CiCdSetupScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter CI/CD Setup Guide'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add numbered steps here
            // TODO: Add Spacer and Start Setup button
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class CiCdSetupScreen extends StatelessWidget {
  const CiCdSetupScreen({super.key});

  void _showInfoDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('About GitHub Actions'),
        content: const Text('GitHub Actions lets you automate your Flutter app build, test, and deployment steps whenever you push code. It helps keep your app updated and tested automatically.'),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text('Close'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter CI/CD Setup Guide'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('1. Connect your GitHub repo', style: TextStyle(fontSize: 18)),
            const SizedBox(height: 12),
            const Text('2. Add workflow YAML file', style: TextStyle(fontSize: 18)),
            const SizedBox(height: 12),
            const Text('3. Configure build and test', style: TextStyle(fontSize: 18)),
            const SizedBox(height: 12),
            const Text('4. Deploy to Firebase App Distribution', style: TextStyle(fontSize: 18)),
            const Spacer(),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () => _showInfoDialog(context),
                child: const Text('Start Setup'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This screen uses a simple Column to list the four main steps for setting up CI/CD with Flutter and GitHub Actions. Each step is a Text widget with spacing in between for clarity.

The Spacer pushes the button to the bottom of the screen, making the layout clean and balanced.

The ElevatedButton triggers a dialog that briefly explains what GitHub Actions is, helping beginners understand the automation concept.

Padding around the content ensures the text and button are not too close to screen edges, improving readability and touch comfort.

Final Result

Completed Screen

-----------------------------------
| Flutter CI/CD Setup Guide         |
|---------------------------------|
| 1. Connect your GitHub repo      |
|                                 |
| 2. Add workflow YAML file        |
|                                 |
| 3. Configure build and test      |
|                                 |
| 4. Deploy to Firebase App Distribution |
|                                 |
|                                 |
| [Start Setup]                   |
-----------------------------------

Tapping 'Start Setup' opens a dialog explaining GitHub Actions automation

Dialog has a Close button to dismiss it

Stretch Goal

Add a dark mode toggle switch in the app bar to switch between light and dark themes.

💡 Hint

Use a StatefulWidget and ThemeMode to toggle themes. Add a Switch widget in the AppBar actions.