Text widget and styling in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Text widget color and font size

What will be the color and font size of the text displayed by this Flutter code?

Flutter

Text('Hello Flutter', style: TextStyle(color: Colors.red, fontSize: 24))

A Text is black with font size 24

B Text is red with default font size

C Text is red with font size 24

D Text is black with default font size

💡 Hint

Look at the TextStyle properties inside the Text widget.

The Text widget uses the TextStyle with color red and fontSize 24, so the text appears red and sized 24.

📝 Syntax

intermediate

Correct syntax for bold and italic text

Which option correctly styles the text to be bold and italic in Flutter?

A Text('Bold Italic', style: TextStyle(fontWeight: FontWeight.bold, fontStyle: FontStyle.italic))

B Text('Bold Italic', style: TextStyle(weight: FontWeight.bold, style: FontStyle.italic))

C Text('Bold Italic', style: TextStyle(fontWeight: 'bold', fontStyle: 'italic'))

D Text('Bold Italic', style: TextStyle(fontWeight: FontWeight.bold, fontStyle: 'italic'))

💡 Hint

Check the correct property names and value types for fontWeight and fontStyle.

fontWeight and fontStyle require enum values, not strings or wrong property names.

❓ ui_behavior

advanced

Text overflow behavior

What happens when this Flutter Text widget is displayed in a narrow container?

Flutter

Container(width: 100, child: Text('This is a very long text that might overflow', overflow: TextOverflow.ellipsis))

A Text is cut off with an ellipsis (...) at the end

B Text wraps to the next line

C Text overflows and causes a runtime error

D Text is fully shown ignoring the container width

💡 Hint

Look at the overflow property used in the Text widget.

TextOverflow.ellipsis cuts off overflowing text and shows ... at the end.

❓ lifecycle

advanced

Text widget rebuild on state change

If a Text widget's style depends on a state variable, what happens when the state changes and setState() is called?

Flutter

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool isRed = true;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => isRed = !isRed),
      child: Text('Tap me', style: TextStyle(color: isRed ? Colors.red : Colors.blue)),
    );
  }
}

A Text color changes but only after hot reload

B Text color never changes after first build

C App crashes due to infinite rebuild loop

D Text color toggles between red and blue on each tap

💡 Hint

setState triggers rebuild and updates UI with new state values.

Calling setState causes build to rerun, updating the Text color based on the new isRed value.

🔧 Debug

expert

Why does this Text widget not show styled text?

This Flutter code tries to style text with underline and color, but the text appears normal. What is the cause?

Flutter

Text('Styled Text', style: TextStyle(decoration: TextDecoration.underline, color: Colors.green))

A Text widget ignores style property by default

B The decoration value should be TextDecoration.underline, not underline

C Colors.green is not a valid color constant

D TextStyle does not support decoration property

💡 Hint

Check how to specify underline decoration in TextStyle.

The decoration property requires the enum TextDecoration.underline, not a bare word 'underline'.