StatelessWidget in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this StatelessWidget display?

Consider this Flutter code for a simple stateless widget. What text will appear on the screen?

Flutter

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Text('Hello Flutter');
  }
}

void main() {
  runApp(const MaterialApp(home: Scaffold(body: Center(child: MyWidget()))));
}

A Hello World

B Hello Flutter

C Error: Missing build method

D Blank screen

💡 Hint

Look at the Text widget inside the build method.

The build method returns a Text widget with the string 'Hello Flutter'. This text will be displayed centered on the screen.

❓ lifecycle

intermediate

What happens when a StatelessWidget's data changes?

If you change a variable used inside a StatelessWidget, what happens when you call setState() in the parent widget?

A The StatelessWidget rebuilds with new data

B The StatelessWidget updates its internal state automatically

C Nothing happens because StatelessWidget cannot rebuild

D The app crashes with an error

💡 Hint

StatelessWidgets rebuild when their parent rebuilds.

StatelessWidgets rebuild when their parent widget rebuilds and passes new data. They do not hold internal state but can display updated data from parents.

📝 Syntax

advanced

Which code snippet correctly defines a StatelessWidget?

Choose the correct Flutter code that defines a valid StatelessWidget named GreetingWidget that shows 'Hi there!'.

A

class GreetingWidget extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hi there!');
  }
}

B

class GreetingWidget extends StatelessWidget {
  Widget build() {
    return Text('Hi there!');
  }
}

C

class GreetingWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hi there!');
  }
}

D

class GreetingWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello');
  }
}

💡 Hint

Check the class inheritance and build method signature.

Option C correctly extends StatelessWidget and overrides build with correct signature returning Text('Hi there!'). Option C misses BuildContext parameter. Option C extends StatefulWidget incorrectly. Option C returns wrong text.

🔧 Debug

advanced

Why does this StatelessWidget cause a runtime error?

This code causes an error when run. What is the cause?

Flutter

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  final String? text;

  const MyWidget({Key? key, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(text!);
  }
}

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: MyWidget(text: null)
    )
  ));
}

A Constructor missing super.key parameter

B Missing override annotation on build method

C Text widget cannot accept nullable strings

D Null check operator used on a null value causing an exception

💡 Hint

Look at the use of the exclamation mark (!) on a nullable variable.

The code uses text! which forces a null check. Since text is null, this causes a runtime exception.

🧠 Conceptual

expert

Why choose StatelessWidget over StatefulWidget?

Which reason best explains why you would use a StatelessWidget instead of a StatefulWidget in Flutter?

A When the widget does not need to manage or update any internal state

B When you want to update the UI based on user interaction

C When you need to store data that changes over time

D When you want to use animations or timers inside the widget

💡 Hint

StatelessWidgets are simple and do not hold changing data.

StatelessWidgets are used when the UI depends only on the input parameters and does not change internally. StatefulWidgets are needed for dynamic data or animations.