Text widget and styling in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple Text widget displaying 'Hello World'.

Flutter

Text([1])

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

A"Hello World"

BHello World

CText('Hello World')

D'Hello World'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the text string.

Passing a widget instead of a string.

The Text widget requires a string inside quotes to display text. So, 'Hello World' is correct.

2fill in blank

medium

Complete the code to set the text color to blue using the style property.

Flutter

Text('Hello', style: TextStyle(color: [1]))

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

AColors.red

BColor.blue

CColors.blue

DBlue

Attempts:

3 left

💡 Hint

Common Mistakes

Using Color.blue instead of Colors.blue.

Using a string like 'Blue' instead of Colors.blue.

Colors.blue is the correct way to set the color to blue in Flutter's material colors.

3fill in blank

hard

Fix the error in the code to make the font size 24 pixels.

Flutter

Text('Big Text', style: TextStyle(fontSize: [1]))

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

A24.0

B24px

C'24'

Dsize24

Attempts:

3 left

💡 Hint

Common Mistakes

Putting font size in quotes making it a string.

Adding units like 'px' which is not valid in Flutter.

fontSize expects a double value without quotes or units, so 24.0 is correct.

4fill in blank

hard

Fill both blanks to make the text bold and italic.

Flutter

Text('Styled Text', style: TextStyle(fontWeight: [1], fontStyle: [2]))

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

AFontWeight.bold

BFontWeight.normal

CFontStyle.italic

DFontStyle.normal

Attempts:

3 left

💡 Hint

Common Mistakes

Using FontWeight.normal or FontStyle.normal which do not style text.

Confusing fontWeight and fontStyle properties.

FontWeight.bold makes text bold, and FontStyle.italic makes it italic.

5fill in blank

hard

Fill all three blanks to create a Text widget with red color, font size 18, and underlined decoration.

Flutter

Text('Decorated', style: TextStyle(color: [1], fontSize: [2], decoration: [3]))

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

AColors.red

B18.0

CTextDecoration.underline

DTextDecoration.lineThrough

Attempts:

3 left

💡 Hint

Common Mistakes

Using TextDecoration.lineThrough instead of underline.

Putting fontSize in quotes or without decimal.

Using color names as strings instead of Colors class.

Colors.red sets the color red, 18.0 sets font size, and TextDecoration.underline adds underline.

Practice

1. What does the Text widget do in Flutter?

easy

A. Manages app navigation between screens

B. Creates buttons for user interaction

C. Draws shapes like circles and rectangles

D. Displays words or sentences on the screen

Solution

1. Step 1: Understand the purpose of the Text widget

   The Text widget is designed to show text content on the screen in Flutter apps.

2. Step 2: Compare with other widget functions

   Buttons handle taps, shapes draw graphics, and navigation manages screens, which are not the Text widget's job.

3. Final Answer:

   Displays words or sentences on the screen -> Option D

4. Quick Check:

   Text widget = display text [OK]

Hint: Text widget always shows text on screen [OK]

Common Mistakes:

• Confusing Text with Button widget
• Thinking Text draws shapes
• Mixing Text with navigation widgets

2. Which of these is the correct way to set the text color to red in a Text widget?

easy

A. Text('Hello', style: TextColor(red))

B. Text('Hello', style: TextStyle(color: Colors.red))

C. Text('Hello', color: Colors.red)

D. Text('Hello', style: ColorText(Colors.red))

Solution

1. Step 1: Recall how to style text color in Flutter

   Text color is set inside the style property using TextStyle with the color parameter.

2. Step 2: Check each option's syntax

   Text('Hello', style: TextStyle(color: Colors.red)) uses TextStyle(color: Colors.red) correctly; others use invalid or nonexistent syntax.

3. Final Answer:

   Text('Hello', style: TextStyle(color: Colors.red)) -> Option B

4. Quick Check:

   Text color set via style: TextStyle(color: ...) [OK]

Hint: Use style: TextStyle(color: ...) to set text color [OK]

Common Mistakes:

• Trying to set color directly on Text widget
• Using wrong class names like TextColor
• Missing the style property

3. What will be the visible output of this Flutter code?

Text(
  'Hello Flutter',
  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
  textAlign: TextAlign.center,
)

medium

A. Text 'Hello Flutter' right aligned, italic, size 20

B. Text 'Hello Flutter' left aligned, normal weight, size 14

C. Text 'Hello Flutter' centered, bold, and size 20

D. Text 'Hello Flutter' centered, normal weight, size 14

Solution

1. Step 1: Analyze the style properties

   The fontWeight is set to bold and fontSize to 20, so text will be bold and large.

2. Step 2: Check the textAlign property

   textAlign is TextAlign.center, so the text will be centered horizontally.

3. Final Answer:

   Text 'Hello Flutter' centered, bold, and size 20 -> Option C

4. Quick Check:

   Style and alignment match Text 'Hello Flutter' centered, bold, and size 20 [OK]

Hint: Check style and textAlign for appearance clues [OK]

Common Mistakes:

• Ignoring textAlign property
• Assuming default font size 14 without checking
• Confusing fontWeight with fontStyle

4. Identify the error in this Flutter code snippet:

Text(
  'Welcome',
  style: TextStyle(fontSize: '20'),
)

medium

A. fontSize should be a double, not a string

B. Text widget cannot have style property

C. Missing comma after 'Welcome'

D. TextStyle cannot be used inside Text

Solution

1. Step 1: Check the fontSize value type

   fontSize expects a number (double), but '20' is a string, causing a type error.

2. Step 2: Validate other syntax parts

   Text widget supports style, commas are correct, and TextStyle is valid inside Text.

3. Final Answer:

   fontSize should be a double, not a string -> Option A

4. Quick Check:

   fontSize type error = fontSize should be a double, not a string [OK]

Hint: fontSize must be a number, not quoted text [OK]

Common Mistakes:

• Putting fontSize in quotes
• Thinking style is invalid in Text
• Missing commas causing syntax errors

5. You want to display a long text that might not fit in one line and should show an ellipsis (...) at the end if it overflows. Which Text widget code correctly achieves this?

hard

A. Text('Long text here', overflow: TextOverflow.ellipsis, maxLines: 1)

B. Text('Long text here', maxLines: 1, overflow: TextOverflow.clip)

C. Text('Long text here', overflow: TextOverflow.fade, maxLines: 2)

D. Text('Long text here', maxLines: null, overflow: TextOverflow.ellipsis)

Solution

1. Step 1: Understand overflow and maxLines usage

   To show ellipsis when text is too long, overflow must be TextOverflow.ellipsis and maxLines set to 1 to limit lines.

2. Step 2: Evaluate each option

   Text('Long text here', overflow: TextOverflow.ellipsis, maxLines: 1) correctly uses overflow: TextOverflow.ellipsis and maxLines: 1. Others either use wrong overflow or maxLines values.

3. Final Answer:

   Text('Long text here', overflow: TextOverflow.ellipsis, maxLines: 1) -> Option A

4. Quick Check:

   Ellipsis + maxLines 1 = Text('Long text here', overflow: TextOverflow.ellipsis, maxLines: 1) [OK]

Hint: Use overflow: ellipsis with maxLines: 1 for trailing dots [OK]

Common Mistakes:

• Using overflow: clip instead of ellipsis
• Not setting maxLines to limit lines
• Setting maxLines to null disables line limit