Why theming creates consistent UI in Flutter - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a theme color to the app's background.

Flutter

MaterialApp(
  theme: ThemeData(
    scaffoldBackgroundColor: [1],
  ),
  home: Scaffold(),
)

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

ATheme.background

BColors.randomColor

CColor(12345)

DColors.blueGrey

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid color names or random values.

Colors.blueGrey is a valid Flutter color constant for theming.

2fill in blank

medium

Complete the code to set the primary color in the theme.

Flutter

ThemeData(
  primaryColor: [1],
)

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

AColors.purple

BColors.transparent

CColors.black12

DColors.greenAccent

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing colors that are too light or transparent.

Colors.purple is a good choice for primaryColor to keep UI consistent.

3fill in blank

hard

Fix the error in the code to apply text theme color.

Flutter

ThemeData(
  textTheme: TextTheme(
    bodyText1: TextStyle(color: [1]),
  ),
)

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

AColors.white

BColors.blueAccent

CColors.noColor

DColors.redAccent

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid color names or colors that reduce readability.

Colors.white is a valid color for text, ensuring readability on dark backgrounds.

4fill in blank

hard

Fill both blanks to create a consistent button style in the theme.

Flutter

ThemeData(
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      backgroundColor: [1],
      foregroundColor: [2],
    ),
  ),
)

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

AColors.deepOrange

BColors.white

CColors.black

DColors.transparent

Attempts:

3 left

💡 Hint

Common Mistakes

Using transparent colors or low contrast combinations.

Using deepOrange as background and white as foreground creates clear, consistent buttons.

5fill in blank

hard

Fill all three blanks to define a consistent app bar theme.

Flutter

ThemeData(
  appBarTheme: AppBarTheme(
    backgroundColor: [1],
    iconTheme: IconThemeData(color: [2]),
    titleTextStyle: TextStyle(color: [3], fontSize: 20),
  ),
)

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

AColors.indigo

BColors.white

CColors.grey

DColors.black

Attempts:

3 left

💡 Hint

Common Mistakes

Using low contrast colors or inconsistent color choices.

Indigo background with white icons and title text ensures a consistent, readable app bar.