ThemeData configuration in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the primary color of the app theme to blue.

Flutter

ThemeData(
  primaryColor: Colors.[1],
)

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

Ared

Byellow

Cgreen

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that is not defined in Flutter's Colors class.

Confusing primaryColor with accentColor.

The primaryColor property sets the main color for the app's theme. Using Colors.blue sets it to blue.

2fill in blank

medium

Complete the code to set the background color of the scaffold to white using ThemeData.

Flutter

ThemeData(
  scaffoldBackgroundColor: [1],
)

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

AColors.black

BColors.grey

CColors.white

DColors.blueGrey

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string like 'white' instead of Colors.white.

Confusing scaffoldBackgroundColor with primaryColor.

The scaffoldBackgroundColor property sets the background color of Scaffold widgets. Setting it to Colors.white makes the background white.

3fill in blank

hard

Fix the error in the code to correctly set the text theme's headline1 color to red.

Flutter

ThemeData(
  textTheme: TextTheme(
    headline1: TextStyle(color: Colors.[1]),
  ),
)

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

Agreen

Bred

Cblue

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string like 'red' instead of Colors.red.

Setting color outside of TextStyle.

The headline1 style in TextTheme controls the style of large headings. Setting its color to Colors.red changes the text color to red.

4fill in blank

hard

Fill both blanks to create a ThemeData with primarySwatch blue and brightness dark.

Flutter

ThemeData(
  primarySwatch: Colors.[1],
  brightness: Brightness.[2],
)

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

Ablue

Blight

Cdark

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name not in Colors for primarySwatch.

Confusing brightness values.

The primarySwatch sets a color palette for the app, and brightness controls light or dark mode. Using Colors.blue and Brightness.dark sets a blue theme with dark mode.

5fill in blank

hard

Fill all three blanks to define a ThemeData with accentColor amber, fontFamily Roboto, and buttonColor green.

Flutter

ThemeData(
  accentColor: Colors.[1],
  fontFamily: '[2]',
  buttonColor: Colors.[3],
)

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

Aamber

BRoboto

Cgreen

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around Colors.amber or Colors.green.

Misspelling the font family name.

The accentColor sets the highlight color, fontFamily sets the app's font, and buttonColor sets the default button color. Using Colors.amber, Roboto, and Colors.green applies these styles.