StatelessWidget in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic StatelessWidget named MyWidget.

Flutter

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return [1]('Hello World');
  }
}

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

AText

BScaffold

CContainer

DColumn

Attempts:

3 left

💡 Hint

Common Mistakes

Using a layout widget like Container or Column instead of Text.

Forgetting to return a widget from build.

The build method must return a widget. Here, Text displays the string 'Hello World'.

2fill in blank

medium

Complete the code to add a constructor with a required title property to the StatelessWidget.

Flutter

class MyWidget extends StatelessWidget {
  final String title;

  const MyWidget({Key? key, [1]) : super(key: key);

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

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

Athis.key

Brequired this.title

CKey? key

Dthis.title

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the required keyword.

Using this.title without required.

In Flutter, to require a property in a constructor, use required this.title.

3fill in blank

hard

Fix the error in the build method by completing the widget tree with a Scaffold and AppBar.

Flutter

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: [1](
      title: Text(title),
    ),
    body: Center(child: Text('Welcome')),
  );
}

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

AText

BContainer

CColumn

DAppBar

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container or Text instead of AppBar for appBar.

Forgetting to wrap the title in Text.

The appBar property of Scaffold expects an AppBar widget.

4fill in blank

hard

Fill both blanks to create a StatelessWidget that returns a Center widget with a Text child.

Flutter

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return [1](
      child: [2]('Hello'),
    );
  }
}

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

ACenter

BText

CContainer

DColumn

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container instead of Center.

Using Column when only one child is needed.

The Center widget centers its child. The child here is a Text widget showing 'Hello'.

5fill in blank

hard

Fill all three blanks to create a StatelessWidget with a constructor, a title property, and a build method returning a Scaffold with AppBar and body.

Flutter

class MyWidget extends StatelessWidget {
  final String [1];

  const MyWidget({Key? key, required this.[2]) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text([3]),
      ),
      body: Center(child: Text('Body content')),
    );
  }
}

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

Atitle

Dkey

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the property and constructor parameter.

Using key instead of title in the Text widget.

The property name, constructor parameter, and usage in Text must all be title to match.

Practice

1. What is the main characteristic of a StatelessWidget in Flutter?

easy

A. It builds UI that never changes after creation.

B. It can hold and update mutable state.

C. It requires a setState() method to update UI.

D. It automatically rebuilds when data changes.

Solution

1. Step 1: Understand StatelessWidget behavior

   A StatelessWidget builds UI that does not depend on any mutable state and does not change after it is created.

2. Step 2: Compare with StatefulWidget

   Unlike StatefulWidget, it does not have a setState() method and does not rebuild on data changes.

3. Final Answer:

   It builds UI that never changes after creation. -> Option A

4. Quick Check:

   StatelessWidget = UI never changes [OK]

Hint: StatelessWidget means no UI changes after build [OK]

Common Mistakes:

• Confusing StatelessWidget with StatefulWidget
• Thinking StatelessWidget can update UI dynamically
• Assuming setState() is used in StatelessWidget

2. Which of the following is the correct way to define a StatelessWidget in Flutter?

easy

A. class MyWidget extends StatelessWidget { Widget build() { return Text('Hi'); } }

B. class MyWidget extends StatelessWidget { Widget build(BuildContext context) { return Text('Hi'); } }

C. class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('Hi'); } }

D. class MyWidget extends StatelessWidget { @override Widget build() { return Text('Hi'); } }

Solution

1. Step 1: Check method signature

   The build method must override the parent and accept a BuildContext parameter.

2. Step 2: Verify syntax correctness

   class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('Hi'); } } correctly uses @override and the method signature Widget build(BuildContext context).

3. Final Answer:

   class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('Hi'); } } -> Option C

4. Quick Check:

   build method needs @override and BuildContext [OK]

Hint: build method must override and take BuildContext [OK]

Common Mistakes:

• Omitting @override annotation
• Missing BuildContext parameter in build method
• Incorrect method signature without parameters

3. What will be displayed when this StatelessWidget runs?

class HelloWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flutter!');
  }
}

medium

A. A blank screen

B. Text widget showing 'Hello, Flutter!'

C. Error: Missing MaterialApp wrapper

D. Nothing, because StatelessWidget cannot display text

Solution

1. Step 1: Analyze the build method

   The build method returns a Text widget with the string 'Hello, Flutter!'.

2. Step 2: Understand StatelessWidget output

   StatelessWidget can display static UI like text. It will show the text on screen.

3. Final Answer:

   Text widget showing 'Hello, Flutter!' -> Option B

4. Quick Check:

   StatelessWidget returns Text widget = shows text [OK]

Hint: build returns Text widget, so text appears on screen [OK]

Common Mistakes:

• Thinking StatelessWidget needs MaterialApp to display text
• Assuming StatelessWidget cannot show UI
• Confusing blank screen with error

4. Identify the error in this StatelessWidget code:

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return Text('Hi');
  }
}

medium

A. StatelessWidget cannot have a build method

B. build method must return a Container, not Text

C. Missing constructor for MyWidget

D. Missing @override annotation before build method

Solution

1. Step 1: Check for @override annotation

   The build method should have @override to indicate it overrides the parent method.

2. Step 2: Verify other parts

   Returning a Text widget is valid, and no constructor is required if no parameters.

3. Final Answer:

   Missing @override annotation before build method -> Option D

4. Quick Check:

   build method needs @override annotation [OK]

Hint: Always add @override before build method in widgets [OK]

Common Mistakes:

• Ignoring missing @override warning
• Thinking build must return Container only
• Assuming constructor is mandatory without parameters

5. You want to create a static welcome screen using StatelessWidget that shows a centered title and a subtitle below it. Which code snippet correctly implements this?

hard

A. class WelcomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Welcome'),
Text('Enjoy your stay')
],
),
);
}
}

B. class WelcomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Welcome'),
Text('Enjoy your stay')
],
);
}
}

C. class WelcomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: [
Text('Welcome'),
Text('Enjoy your stay')
],
);
}
}

D. class WelcomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Text('Welcome'),
subtitle: Text('Enjoy your stay'),
);
}
}

Solution

1. Step 1: Understand layout requirements

   The title and subtitle should be centered vertically and horizontally, stacked vertically.

2. Step 2: Analyze options

   class WelcomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Welcome'), Text('Enjoy your stay') ], ), ); } } wraps a Column inside a Center widget, centering the whole column on screen. This matches the requirement.

3. Step 3: Check other options

   class WelcomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Welcome'), Text('Enjoy your stay') ], ); } } lacks Center, so column aligns top-left. class WelcomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Row( children: [ Text('Welcome'), Text('Enjoy your stay') ], ); } } uses Row which arranges horizontally. class WelcomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Text('Welcome'), subtitle: Text('Enjoy your stay'), ); } } misuses Scaffold properties.

4. Final Answer:

   Correctly centers a column with title and subtitle. -> Option A

5. Quick Check:

   Center + Column = vertical centered texts [OK]

Hint: Use Center widget to center Column vertically and horizontally [OK]

Common Mistakes:

• Forgetting to wrap Column with Center
• Using Row instead of Column for vertical layout
• Misusing Scaffold properties like subtitle