Delve into Flutter's UI framework to build high-quality Android apps, from creating contact profiles to enhancing them with themes and API integration, culminating in app publication.

Flutter is Google’s mobile UI framework used for crafting high-quality native interfaces on iOS and Android. This course focuses on building applications for the Android platform.

You’ll start by exploring the intricacies of Flutter and work your way up to implementing a contact profile page for an Android address book.

In the latter half of the course, you’ll learn to work with Flutter themes to spruce up the contact profile app you created. To round out your Flutter experience, you’ll also practice fetching data from a remote Application Programming Interface (API).

You’ll put into practice what you learn using live coding environments embedded within the course. By the time you’re done, you’ll be ready to create your own Android app and publish it to the Google Play Store.

Salahaddin Mohammed

I completed the course "Beginning Flutter: Android Mobile App Development" at the Educative platform. I have easily understood the course because of your great explanation. I want to thank you really!

Thank you letter from a student.

Beginning Flutter: Android Mobile App Development

# Switching themes using FAB

A floating action button (FAB) represents the primary action on the screen. Let’s add a [FAB](https://material.io/components/buttons-floating-action-button/) to toggle between dark and light themes.


## Theme types using `enum`

We’ll use an [`enum`](https://dart.dev/guides/language/language-tour#enumerated-types) 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. 

Since we added a new `FloatingActionButton` widget to our interface, we would also need to provide an appropriate theme for the light and dark app’s brightness. 

### FAB dark theme

The `floatingActionButtonTheme` property is used to provide a theme for the FAB widget.
In the dark theme, the background is preferred to be dark, while the foreground is light.

```
  static ThemeData appThemeDark() {
    return ThemeData(
      ...

      floatingActionButtonTheme: FloatingActionButtonThemeData(
        //dark background for FAB
        backgroundColor: Colors.black,

        //White plus (+) sign for FAB  
        foregroundColor: Colors.white,
      ),
    );
  }
```

### FAB light theme

In the light theme, the light background is preferred, while the foreground is dark.

```
  static ThemeData appThemeLight() {
    return ThemeData(
      ...

      floatingActionButtonTheme: FloatingActionButtonThemeData(
        //White background
        backgroundColor: Colors.white,
        
        //Black plus (+) sign for FAB  
        foregroundColor: Colors.black,
      ),
    );
  }
```

### Switching theme
If a dark theme is selected, then switch to light themes and vice versa.

```
currentTheme == APP_THEME.DARK
   ? currentTheme = APP_THEME.LIGHT
   : currentTheme = APP_THEME.DARK;

```

### Accessing `currentTheme`

If the `currentTheme` is `APP_THEME.DARK`, then apply a dark theme or vice versa.

```
MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: currentTheme == APP_THEME.DARK
          ? MyAppThemes.appThemeDark()
          : MyAppThemes.appThemeLight(),
      home: Scaffold(
        appBar: buildAppBarWidget(),
        body: buildBodyWidget(),
        floatingActionButton: FloatingActionButton(
          child: IconButton(
            icon: Icon(Icons.threesixty),
            onPressed: () {
              setState(() {
                currentTheme == APP_THEME.DARK
                    ? currentTheme = APP_THEME.LIGHT
                    : currentTheme = APP_THEME.DARK;
              });
            },
          ),
        ),
      )

```


In this lesson, you'll learn how to use a floating action button (FAB for short) to toggle between dark theme to light theme and vice versa.

Introduction

Hello Flutter !

Build your Contact Profile Page

Flutter Themes

MovieApp: Fetching Data from REST API

Where to Go from Here

Appendix: Installation & Setting up Flutter (Optional)

Switching Themes Using FAB

Switching themes using FAB

Theme types using `enum`

FAB to toggle between themes

Switching Themes Using FAB

Switching themes using FAB

Theme types using enum

FAB to toggle between themes

Theme types using `enum`