CODEWITHSUNDEEP
dartflutter
amAndroid
amAndroid

Reputation: 303

How to set app theme data in different pages in flutter?

I have a list view on my homepage where if I clicked on it will move to a new page the first one the theme should be blue, and the next one the theme data should be red. Like how Chat Customization in Facebook's Messenger works.

Upvotes: 8

Views: 3640

Answers (1)

Ha Quang Chanh
Ha Quang Chanh

Reputation: 101

You should wrap your Page widget inside a Theme widget. Something like below:

@override
Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(
      backgroundColor: Colors.red,
    ),
    child: Builder(
      builder: (context) {
        return YourPageWidget(context);
      }
    ),
  );
}

There is one thing you should aware of. Using a Builder() to pass the latest context (including your custom theme data in this new context) to the child widget.

If not using Builder, in some cases, YourPageWidget can't get correct theme data with command Theme.of(context)...

For more information, you can reference the document Create unique ThemeData

Upvotes: 10

Related Questions