Dark Theme

Dark theme

In this lesson, we’ll create a dark theme for the Profile Page created in the previous chapter.

A dark theme is a low-light UI that displays mostly dark surfaces.

The MyAppThemes class provides theme definitions for our app.

Go ahead and add the static method appThemeDark() in the MyAppThemes class. This method will return the ThemeData widget. The static keyword makes the method accessible at the class level. That means you can call this method using MyAppThemes.appThemeDark() from MaterialApp later.

class MyAppThemes {

 //Method for dark theme
 static ThemeData appThemeDark() {
   return ThemeData();
 }
}

The brightness property

In this theme, brightness property is set to Brightness.dark.

App icons

Icons are themed in orange using the code below:

iconTheme: IconThemeData(
       color: Colors.orange,
     )

iconTheme color property for the app’s icons is set to Colors.orange.

AppBar

The AppBar theme has black background, and Colors.white for icon theme:

appBarTheme: AppBarTheme(
       color: Colors.black,
       iconTheme: IconThemeData(
         color: Colors.white,
       ),
     )

appBarTheme's color is set to Colors.black and its iconTheme is set to lighter color Colors.white.

Global theme: appThemeDark()

Let’s populate ThemeData for the appThemeDark() method:

class MyAppThemes {

 static ThemeData appThemeDark() {
   return ThemeData(
     // Define the default brightness and colors for the overall app.
     brightness: Brightness.dark,
 
     //Theme for app bar
     appBarTheme: AppBarTheme(
       //AppBar's background color is dark this time
       color: Colors.black,
       
       //Light color for the app bar's icons 
       iconTheme: IconThemeData(
         color: Colors.white,
       ),
     ),

     //App's icons are colored in orange color
     iconTheme: IconThemeData(
       color: Colors.orange,
     ),
   );
 }
}