The ThemeData widget

The Global theme affects the whole app. Global themes are implemented using ThemeData.

In this lesson, we’ll create and use a Global theme for Profile Page using ThemeData.

This holds styling information for the material design app.

• It uses the brightness property to assign light or dark color themes to the app.
• The appBarTheme property defines the theme for the AppBar widget.
• The iconTheme property of AppBarTheme declares theme selection for the icons used in the app bar, while iconTheme property for ThemeData widget defines the icon colors for the whole app globally.

ThemeData(
 // Define the default brightness and colors for the overall app.
 brightness: Brightness.light,

 //Defines theme for AppBar
 appBarTheme: AppBarTheme(
   color: Colors.white,
   
   //Theme for icons used in AppBar
   iconTheme: IconThemeData(
     color: Colors.black,
   ),
 ),

 //Theme for icons used in the app
 iconTheme: IconThemeData(
   color: Colors.indigo.shade800,
 ),
),

Using ThemeData

Let’s see how to implement ThemeData for the MaterialApp widget.

MaterialApp(
 debugShowCheckedModeBanner: false,
 theme: ThemeData(
   // Define the default brightness and colors for the overall app.
   brightness: Brightness.light,
   appBarTheme: AppBarTheme(
     color: Colors.white,
     //Icon theme at AppBar level
     iconTheme: IconThemeData(
       color: Colors.black,
     ),
   ),
   //Icon theme at app level
   iconTheme: IconThemeData(
     color: Colors.indigo.shade800,
   ),
 ),
 home: Scaffold(
   appBar: buildAppBarWidget(),
   body: buildBodyWidget(),
 ),
)