Why Flutter enables cross-platform development - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Flutter app that runs on both Android and iOS.

Flutter

void main() {
  runApp([1]());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}

Drag options to blanks, or click blank then click option'

ACenter

BMyApp

CMaterialApp

DScaffold

Attempts:

3 left

💡 Hint

Common Mistakes

Using MaterialApp directly in runApp instead of the app class.

Trying to run Scaffold or Center directly.

The runApp function needs the root widget of the app, which is MyApp here. This widget works on both Android and iOS, enabling cross-platform development.

2fill in blank

medium

Complete the code to import the Flutter package needed for cross-platform UI widgets.

Flutter

import '[1]';

void main() => runApp(MyApp());

Drag options to blanks, or click blank then click option'

Apackage:flutter/material.dart

Bpackage:flutter/cupertino.dart

Cpackage:flutter/widgets.dart

Dpackage:flutter/foundation.dart

Attempts:

3 left

💡 Hint

Common Mistakes

Importing cupertino.dart only, which is iOS style.

Importing foundation.dart which is not for UI.

The material.dart package provides cross-platform UI widgets that work on Android and iOS, enabling Flutter's cross-platform capabilities.

3fill in blank

hard

Fix the error in the code to ensure Flutter renders the UI on both platforms.

Flutter

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return [1](
      home: Scaffold(
        body: Center(child: Text('Cross-platform app')),
      ),
    );
  }
}

Drag options to blanks, or click blank then click option'

AScaffold

BCupertinoApp

CWidgetsApp

DMaterialApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using Scaffold as the root widget instead of MaterialApp.

Using CupertinoApp which is iOS style only.

MaterialApp is the correct widget to provide the app structure and theme for cross-platform apps using Material Design, which works on Android and iOS.

4fill in blank

hard

Fill both blanks to complete the Flutter widget that adapts UI for Android and iOS.

Flutter

Widget build(BuildContext context) {
  return [1](
    body: [2](
      child: Text('Platform adaptive UI'),
    ),
  );
}

Drag options to blanks, or click blank then click option'

AMaterialApp

BCupertinoPageScaffold

CScaffold

DSafeArea

Attempts:

3 left

💡 Hint

Common Mistakes

Using MaterialApp, which expects 'home' not 'body'.

Using CupertinoPageScaffold which is iOS style only.

Scaffold provides the page structure, and SafeArea ensures content is not hidden by system UI, helping the app adapt well on both Android and iOS.

5fill in blank

hard

Fill all three blanks to create a Flutter app that uses a single codebase for Android and iOS.

Flutter

void main() {
  runApp([1]());
}

class [2] extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return [3](
      home: Scaffold(
        appBar: AppBar(title: Text('Cross-platform')),
        body: Center(child: Text('One codebase, many platforms')),
      ),
    );
  }
}

Drag options to blanks, or click blank then click option'

AMyApp

BMaterialApp

CStatelessWidget

DMyHomePage

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing the app class name (MyApp) with a home page class name like MyHomePage.

Using Scaffold directly in runApp instead of MaterialApp.

runApp starts the app with MyApp. The class MyApp extends StatelessWidget and returns MaterialApp which provides cross-platform UI support.