Search⌘ K
AI Features

Switching Themes Using FAB

Explore how to implement and manage theme switching in Flutter by using a floating action button (FAB) to toggle between light and dark themes. Understand the use of enums to control theme states and apply consistent styling across your app. This lesson prepares you to enhance user experience with dynamic theme changes.

Switching themes using FAB

A floating action button (FAB) represents the primary action on the screen. Let’s add a FAB to toggle between dark and light themes.

Theme types using enum

We’ll use an enum to hold the available themes. Enumeration or enum is used for defining named constant values. We’re using enum APP_THEME to name available themes.

enum APP_THEME { LIGHT, DARK }

The currentTheme variable is used to keep track of the currently selected theme.

  var currentTheme = APP_THEME.LIGHT;

FAB to toggle between themes

We’ll add a FAB to be able to trigger theme switching. ...