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.