Question 77214 in Flutter Question posted in
The official Flutter documentation can be found here.

Why global theming not working if I wrap a widget with consumer provider? – Flutter

Here I use secondary color as deepOrange in global theming using cololrscheme but when I wrap that widget with Consumer then it will not follow the global theming and apply some random color why that happens?

Below is my code with Consumer it didn’t apply my color theming without consumer it will apply.

leading: Consumer<Product>(
        builder: (context, product, child) => IconButton(
          icon: Icon(
              product.isFavorite ? Icons.favorite : Icons.favorite_border),
          onPressed: () {
            product.toggleFavorite();
          },
          color: Theme.of(context).colorScheme.secondary,
        ),
      )
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here the problem caused by the name of BuildContext I use context for both consumer and also for the global theming context, so get rid of this problem I have to change the Consumer's BuildContext name to something else. like 'ctx' or whatever but global theming's BuildContext must be 'context' because we have to use context which is provided by widget in which you are.

    so here is the solution...

    leading: Consumer<Product>(
        builder: (ctx, product, child) => IconButton(
          icon: Icon(
              product.isFavorite ? Icons.favorite : Icons.favorite_border),
          onPressed: () {
            product.toggleFavorite();
          },
          color: Theme.of(context).colorScheme.secondary,
        ),
      )

  2. 0

    The Consumer widget rebuilds its child widget whenever the value of the Product object changes.When the Consumer widget is rebuilt, it rebuilds its child widget with the new context object.This new context object might have a different theme than the one you’re expecting, which is why the color doesn’t match.

    You can wrap Consumer with Builder widget, which allows you to pass in a specific context object to be used by the child widget.
    so you can wrap you code with Builder and pass context from the parent widget.

    leading: Builder(
builder: (BuildContext context) {
return Consumer<Product>(
builder: (context, product, child) => IconButton(
icon: Icon(
product.isFavorite ? Icons.favorite : Icons.favorite_border),
onPressed: () {
product.toggleFavorite();
},
color: Theme.of(context).colorScheme.secondary,
),);
 })
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search