Set a new ThemeData to be inherited by subscreens

In my app I am trying to set up a screen flow that changes the ThemeData for a screen and all screens pushed to the stack from that screen. I have successfully changed the ThemeData using a Theme widget and that is cascading down to all other widgets in the view. When I push a new screen to the stack it is inheriting the ThemeData from the MaterialApp at the top of my application. I had thought that the Theme widget would at the ThemeData to the tree but it isn’t working that way. Does anyone know what I am doing wrong? FYI I am using GoRouter for pushing most screens to the stack if that is relevant.

1 Like

When you are on Screen 1 (lest say list screen) and you push Screen 2 (lets say detail screen), then your widget tree structure is probably different than you think. Screen 2 is not child of Screen 1. It works like stack:

  • MaterialApp
    • Screen 1 (url i.e. ‘/list’)
      • Theme // here you change theme
    • Screen2 (url i.e. ‘/list/detail’)

Therefore this way changes to Theme are not applied to other pages, no matter the go router structure.

You may try:

  • either wrapping your flow with a separate Navigator which would be wrapped with new ThemeData
  • create your own Route that would wrap its child with ThemeData
  • build reusable widget that is your “page” that always wraps it with new ThemeData

Thanks for the explanation. I also saw the same thing in the flutter inspector.