First Flutter app (Hello World) - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this Flutter app display?

Look at this Flutter code. What text will appear in the center of the screen when you run this app?

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

A Hello Flutter!

B Hello World!

C MaterialApp

D Center

💡 Hint

Look at the Text widget inside Center. It shows the exact string displayed.

The Text widget inside Center displays 'Hello Flutter!'. This is what appears in the app's center.

📝 Syntax

intermediate

Which option fixes the syntax error in this Flutter code?

This Flutter code has a syntax error. Which option fixes it so the app runs and shows 'Hello World!'?

Flutter

import 'package:flutter/material.dart';

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

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

A Add a semicolon after class MyApp extends StatelessWidget

B Remove the parentheses after runApp

C Change StatelessWidget to StatefulWidget

D Add a comma after Text('Hello World!')

💡 Hint

Check commas after widgets inside widget trees.

In Flutter, commas separate widget parameters. Missing a comma after Text widget causes syntax error.

❓ lifecycle

advanced

What happens if you replace StatelessWidget with StatefulWidget in this app?

If you change MyApp to extend StatefulWidget but keep the same build method, what will happen when you run the app?

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

A The app crashes because StatefulWidget needs initState method

B The app shows a blank screen

C The app runs normally and shows 'Hello World!'

D The app shows an error about missing build method

💡 Hint

StatefulWidget requires a State class with build method.

Replacing StatelessWidget with StatefulWidget and providing State with build method works fine. The app shows 'Hello World!'.

❓ navigation

advanced

What happens when you add Navigator.push to this Flutter app?

This app has a button that pushes a new screen. What will the user see after tapping the button?

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            child: const Text('Go'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const SecondScreen()),
              );
            },
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Second Screen'),
      ),
    );
  }
}

A Nothing happens when the button is tapped

B The app navigates to a new screen showing 'Second Screen'

C The app closes when the button is tapped

D The app shows an error about Navigator

💡 Hint

Navigator.push adds a new screen on top of the current one.

When the button is tapped, Navigator.push shows the SecondScreen widget with text 'Second Screen'.

🔧 Debug

expert

Why does this Flutter app throw a runtime error?

This Flutter app throws an error when run. What is the cause?

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

A There are two classes named MyApp causing a duplicate class error

B The Text widget is missing a required style parameter

C MaterialApp cannot be used inside a StatelessWidget

D Scaffold requires an AppBar widget to run

💡 Hint

Check if any class names are repeated in the code.

Defining two classes with the same name MyApp causes a compile-time error due to duplicate class definitions.