Local Theme

Introduction to Local theme

The local theme is responsible for making changes to one part of the app without affecting any other part of the app.

Local themes are implemented using the Theme widget and passing specific ThemeData instances to it.

In this lesson, we’ll create a local theme for the Profile Page’s widget consisting of action items: “Call,” “Text,” “Video,” “Email,” “Directions,” and “Pay” as mentioned in the previous chapter.

The local theme helps to define a theme for a smaller part of the app.

The Theme widget is used to assign local themes to different material app widgets.

Let’s take a look at the part of the app that builds profile action items:

Container(
    margin: const EdgeInsets.only(top: 8, bottom: 8),
    //Builds custom widget for actions items  
    child: profileActionItems(),
),
 

Now, to assign a different color for action item icons, we can use a local theme.

Local themes are defined as data property of the Theme widget, like below:

Theme(
 data: ThemeData(
   //Assigning color for icons
   iconTheme: IconThemeData(
     color: Colors.pink,
   ),
 ),
)

Imagine, you want your profile action item icons to be of ‘Colors.pink’ regardless of the theme of the app.

In that case, you can use a local theme by wrapping profileActionItems() as a child to the Theme widget.

Container(
    margin: const EdgeInsets.only(top: 8, bottom: 8),
    //Defining Theme for it's child widget
    child: Theme(
         data: ThemeData(
         iconTheme: IconThemeData(
         color: Colors.pink,
         ),
        ),
         //This widget applies iconTheme defined above. All icons will be pink for this widget.
        child: profileActionItems(),
   ),
),