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

Practice

1. Why does Flutter allow developers to create apps that work on both Android and iOS with the same code?

easy

A. Because Flutter only supports Android apps

B. Because Flutter uses a single codebase and its own rendering engine

C. Because Flutter requires separate code for each platform

D. Because Flutter converts code into native Java and Swift automatically

Solution

1. Step 1: Understand Flutter's codebase approach

   Flutter uses one codebase for all platforms, avoiding separate codes for Android and iOS.

2. Step 2: Recognize Flutter's rendering engine role

   Flutter has its own engine that draws UI consistently across platforms, so apps look the same everywhere.

3. Final Answer:

   Because Flutter uses a single codebase and its own rendering engine -> Option B

4. Quick Check:

   Single codebase + engine = cross-platform [OK]

Hint: Remember: one codebase plus own engine means cross-platform [OK]

Common Mistakes:

• Thinking Flutter converts code to native Java or Swift
• Believing Flutter needs separate code for each platform
• Assuming Flutter only supports Android

2. Which of the following is the correct way to import Flutter's material design package in a Dart file?

easy

A. import 'package:flutter/material.dart';

B. include 'flutter/material.dart';

C. using flutter.material;

D. require('flutter/material.dart');

Solution

1. Step 1: Recall Dart import syntax

   Dart uses the keyword 'import' followed by the package path in quotes and a semicolon.

2. Step 2: Match the correct package path

   The Flutter material package path is 'package:flutter/material.dart'.

3. Final Answer:

   import 'package:flutter/material.dart'; -> Option A

4. Quick Check:

   Correct Dart import syntax = import 'package:flutter/material.dart'; [OK]

Hint: Dart imports use 'import' and package path in quotes [OK]

Common Mistakes:

• Using 'include' instead of 'import'
• Using 'using' or 'require' which are not Dart keywords
• Missing semicolon at the end

3. What will be the output when running a Flutter app that uses the same widget tree on both Android and iOS?

medium

A. The app crashes on iOS but works on Android

B. The app shows different UI layouts on each platform automatically

C. The app UI looks and behaves identically on both platforms

D. The app only runs on Android devices

Solution

1. Step 1: Understand Flutter's widget rendering

   Flutter uses its own engine to draw widgets the same way on all platforms.

2. Step 2: Predict app behavior on Android and iOS

   Since the widget tree is the same, the UI looks and works identically on both platforms.

3. Final Answer:

   The app UI looks and behaves identically on both platforms -> Option C

4. Quick Check:

   Same widget tree = same UI on all platforms [OK]

Hint: Same widgets mean same UI everywhere [OK]

Common Mistakes:

• Thinking Flutter apps crash on iOS by default
• Assuming Flutter changes UI layout automatically per platform
• Believing Flutter apps only run on Android

4. You wrote a Flutter app but it crashes on iOS with a missing plugin error. What is the likely cause?

medium

A. You forgot to run 'flutter pub get' to install dependencies

B. Flutter does not support iOS apps

C. You wrote the app in Java instead of Dart

D. You used Android-only plugins without iOS support

Solution

1. Step 1: Identify the error cause

   A missing plugin error on iOS usually means the plugin used lacks iOS support.

2. Step 2: Understand Flutter plugin platform support

   Some plugins work only on Android; using them causes crashes on iOS.

3. Final Answer:

   You used Android-only plugins without iOS support -> Option D

4. Quick Check:

   Plugin missing on iOS = Android-only plugin used [OK]

Hint: Check plugin supports all target platforms [OK]

Common Mistakes:

• Assuming Flutter doesn't support iOS
• Forgetting to run 'flutter pub get' (usually different error)
• Confusing Dart with Java language

5. You want to create a Flutter app that runs on Android, iOS, and web with consistent UI. Which approach best achieves this?

hard

A. Use Flutter widgets and its rendering engine for all platforms

B. Write separate UI code for Android, iOS, and web

C. Use native Android and iOS SDKs and a separate web framework

D. Build the app only for Android and ignore other platforms

Solution

1. Step 1: Understand Flutter's cross-platform capabilities

   Flutter uses widgets and its own engine to create consistent UI across Android, iOS, and web.

2. Step 2: Compare approaches for multi-platform UI

   Writing separate UI code or using native SDKs defeats Flutter's cross-platform advantage.

3. Step 3: Choose the best approach

   Using Flutter widgets and engine for all platforms ensures consistent UI and easier maintenance.

4. Final Answer:

   Use Flutter widgets and its rendering engine for all platforms -> Option A

5. Quick Check:

   Widgets + engine = consistent UI everywhere [OK]

Hint: One Flutter codebase for all platforms saves time [OK]

Common Mistakes:

• Trying to write separate UI code for each platform
• Using native SDKs separately instead of Flutter
• Ignoring web or other platforms