Android build configuration in Flutter - Mini App: Build & Ship

Build: Build Configuration Info

This screen shows basic Android build configuration details for a Flutter app.

Target UI

-------------------------
| Build Configuration   |
|-----------------------|
| App Name: MyApp       |
| Version: 1.0.0        |
| Build Type: debug     |
| Min SDK: 21           |
| Target SDK: 33        |
|-----------------------|

Display app name, version, build type, min SDK, and target SDK

Use a Column with Text widgets for each detail

Add a title at the top with larger font

Use padding around the content for spacing

Starter Code

Flutter

import 'package:flutter/material.dart';

class BuildConfigScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Build Configuration'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add title text here
            // TODO: Add build info texts here
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class BuildConfigScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Build Configuration'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Build Configuration Details',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            Text('App Name: MyApp'),
            SizedBox(height: 8),
            Text('Version: 1.0.0'),
            SizedBox(height: 8),
            Text('Build Type: debug'),
            SizedBox(height: 8),
            Text('Min SDK: 21'),
            SizedBox(height: 8),
            Text('Target SDK: 33'),
          ],
        ),
      ),
    );
  }
}

This screen uses a Scaffold with an AppBar titled 'Build Configuration'. Inside the body, a Padding widget adds space around the content. A Column arranges the text vertically, aligned to the start (left). The title text uses a larger font size and bold weight to stand out. Each build detail is shown in its own Text widget with vertical spacing using SizedBox for clarity and neat layout.

Final Result

Completed Screen

-------------------------
| Build Configuration   |
|-----------------------|
| Build Configuration   |
| Details               |
|                       |
| App Name: MyApp       |
|                       |
| Version: 1.0.0        |
|                       |
| Build Type: debug     |
|                       |
| Min SDK: 21           |
|                       |
| Target SDK: 33        |
-------------------------

User sees the build configuration details clearly listed

No interactive elements on this screen

Stretch Goal

Add a button to refresh and reload the build configuration details

💡 Hint

Use a FloatingActionButton with an onPressed callback that reloads the data (simulate with setState or rebuild)