Why Flutter enables cross-platform development - Build It to Prove It

Build: Cross-Platform Info

This screen explains why Flutter allows building apps for multiple platforms using one codebase.

Target UI

┌───────────────────────────────┐
│ Cross-Platform Info           │
├───────────────────────────────┤
│ Flutter lets you write one    │
│ app that works on Android,    │
│ iOS, web, and desktop.        │
│                               │
│ It uses a single codebase and │
│ its own rendering engine.     │
│                               │
│ This means faster development │
│ and consistent look everywhere│
│                               │
│ [OK]                         │
└───────────────────────────────┘

Show a title at the top: 'Cross-Platform Info'

Display a short explanation about Flutter's cross-platform ability in simple language

Use a scrollable area for the text in case of small screens

Add a button labeled 'OK' at the bottom that closes the screen

Starter Code

Flutter

import 'package:flutter/material.dart';

class CrossPlatformInfoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cross-Platform Info'),
      ),
      body: // TODO: Add scrollable text here
      bottomNavigationBar: // TODO: Add OK button here
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class CrossPlatformInfoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cross-Platform Info'),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Text(
          'Flutter lets you write one app that works on Android, iOS, web, and desktop.\n\n'
          'It uses a single codebase and its own rendering engine.\n\n'
          'This means faster development and consistent look everywhere.',
          style: TextStyle(fontSize: 16),
        ),
      ),
      bottomNavigationBar: Padding(
        padding: EdgeInsets.all(12),
        child: SizedBox(
          height: 48,
          child: ElevatedButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Text('OK'),
          ),
        ),
      ),
    );
  }
}

This screen uses a Scaffold with an AppBar for the title. The main text is inside a SingleChildScrollView with padding so it scrolls on small screens. The text explains Flutter's cross-platform features in simple words.

At the bottom, an ElevatedButton labeled 'OK' is placed inside bottomNavigationBar with padding and fixed height. When tapped, it closes the screen using Navigator.pop().

This layout ensures the content is readable and the button is easy to tap, following Flutter's design guidelines.

Final Result

Completed Screen

┌───────────────────────────────┐
│ Cross-Platform Info           │
├───────────────────────────────┤
│ Flutter lets you write one    │
│ app that works on Android,    │
│ iOS, web, and desktop.        │
│                               │
│ It uses a single codebase and │
│ its own rendering engine.     │
│                               │
│ This means faster development │
│ and consistent look everywhere│
│                               │
│                               │
│              [ OK ]           │
└───────────────────────────────┘

User can scroll the text if the screen is small

Tapping the OK button closes the screen and returns to the previous screen

Stretch Goal

Add a dark mode toggle switch in the AppBar to switch between light and dark themes

💡 Hint

Use a StatefulWidget and ThemeMode to toggle themes; add a Switch widget in the AppBar actions