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

Build: iOS Build Config Setup

This screen helps you configure basic iOS build settings for a Flutter app.

Target UI

┌───────────────────────────────┐
│ iOS Build Config Setup        │
├───────────────────────────────┤
│ Bundle Identifier:             │
│ [com.example.myapp__________] │
│                               │
│ Version:                      │
│ [1.0.0______________________] │
│                               │
│ Build Number:                 │
│ [1__________________________] │
│                               │
│ [Save Configuration]          │
└───────────────────────────────┘

Add three TextFields for Bundle Identifier, Version, and Build Number.

Add a Save button that validates inputs are not empty.

Show a confirmation message when saved.

Use Flutter widgets only.

Layout should be vertical with spacing.

Starter Code

Flutter

import 'package:flutter/material.dart';

class IOSBuildConfigScreen extends StatefulWidget {
  @override
  State<IOSBuildConfigScreen> createState() => _IOSBuildConfigScreenState();
}

class _IOSBuildConfigScreenState extends State<IOSBuildConfigScreen> {
  // TODO: Add TextEditingControllers for inputs

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('iOS Build Config Setup')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add TextFields for Bundle Identifier, Version, Build Number
            // TODO: Add Save button
          ],
        ),
      ),
    );
  }

  // TODO: Add save logic with validation and confirmation
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class IOSBuildConfigScreen extends StatefulWidget {
  @override
  State<IOSBuildConfigScreen> createState() => _IOSBuildConfigScreenState();
}

class _IOSBuildConfigScreenState extends State<IOSBuildConfigScreen> {
  final TextEditingController _bundleIdController = TextEditingController();
  final TextEditingController _versionController = TextEditingController();
  final TextEditingController _buildNumberController = TextEditingController();

  @override
  void dispose() {
    _bundleIdController.dispose();
    _versionController.dispose();
    _buildNumberController.dispose();
    super.dispose();
  }

  void _saveConfig() {
    final bundleId = _bundleIdController.text.trim();
    final version = _versionController.text.trim();
    final buildNumber = _buildNumberController.text.trim();

    if (bundleId.isEmpty || version.isEmpty || buildNumber.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Please fill all fields')),
      );
      return;
    }

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Configuration saved!\nBundle ID: $bundleId\nVersion: $version\nBuild Number: $buildNumber')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('iOS Build Config Setup')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Bundle Identifier:'),
            TextField(
              controller: _bundleIdController,
              decoration: const InputDecoration(
                hintText: 'com.example.myapp',
              ),
            ),
            const SizedBox(height: 16),
            const Text('Version:'),
            TextField(
              controller: _versionController,
              decoration: const InputDecoration(
                hintText: '1.0.0',
              ),
            ),
            const SizedBox(height: 16),
            const Text('Build Number:'),
            TextField(
              controller: _buildNumberController,
              decoration: const InputDecoration(
                hintText: '1',
              ),
              keyboardType: TextInputType.number,
            ),
            const SizedBox(height: 24),
            Center(
              child: ElevatedButton(
                onPressed: _saveConfig,
                child: const Text('Save Configuration'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This Flutter screen uses three TextFields to get the iOS build settings: Bundle Identifier, Version, and Build Number.

We use TextEditingControllers to read the input values.

The Save button checks if any field is empty and shows a SnackBar message if so.

If all fields are filled, it shows a confirmation SnackBar with the entered values.

The layout uses vertical spacing and labels for clarity.

Final Result

Completed Screen

┌───────────────────────────────┐
│ iOS Build Config Setup        │
├───────────────────────────────┤
│ Bundle Identifier:             │
│ [com.example.myapp__________] │
│                               │
│ Version:                      │
│ [1.0.0______________________] │
│                               │
│ Build Number:                 │
│ [1__________________________] │
│                               │
│       [Save Configuration]    │
└───────────────────────────────┘

User types bundle identifier, version, and build number in text fields.

User taps 'Save Configuration' button.

If any field is empty, a message 'Please fill all fields' appears at bottom.

If all fields are filled, a confirmation message with entered values appears.

Stretch Goal

Add a toggle switch to enable or disable automatic version increment on save.

💡 Hint

Use a Switch widget and update the build number automatically when enabled.