Practice - 5 Tasks
Answer the questions below
1fill in blank
easyComplete 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'
Attempts:
3 left
💡 Hint
Common Mistakes
Using MaterialApp directly in runApp instead of the app class.
Trying to run Scaffold or Center directly.
✗ Incorrect
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
mediumComplete 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'
Attempts:
3 left
💡 Hint
Common Mistakes
Importing cupertino.dart only, which is iOS style.
Importing foundation.dart which is not for UI.
✗ Incorrect
The material.dart package provides cross-platform UI widgets that work on Android and iOS, enabling Flutter's cross-platform capabilities.
3fill in blank
hardFix 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'
Attempts:
3 left
💡 Hint
Common Mistakes
Using Scaffold as the root widget instead of MaterialApp.
Using CupertinoApp which is iOS style only.
✗ Incorrect
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
hardFill 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'
Attempts:
3 left
💡 Hint
Common Mistakes
Using MaterialApp, which expects 'home' not 'body'.
Using CupertinoPageScaffold which is iOS style only.
✗ Incorrect
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
hardFill 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'
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.
✗ Incorrect
runApp starts the app with MyApp. The class MyApp extends StatelessWidget and returns MaterialApp which provides cross-platform UI support.