如何重建特定的小部件属性而不是整个小部件？

Question

I am making an application and for showing circular progress indicator i had used library of modal_progress_hud and when i set the state of inAsyncCall true or false, it rebuild all of its child widgets inside modal_progress_hud. And i do not want to rebuild all the UI again and again. It decreases the efficency of application by increasing usage of GPU. Is there any other way to make it better, that we just change the property and rebuild that property of widget only instead of whole screen and widgets inside it.

  bool circularindicator = false;
  Color circularColor;
  double circularOpacity;

              child: ModalProgressHUD(
                inAsyncCall: circularindicator,
                child: body,
                color: circularColor,
                opacity: circularOpacity,
              ),

In body, we have all of the widgets in listview. And after pressing the login button we called the showProgress() method and set the state and rebuild the widget.

  @override
  showProgress() {
    setState(() {
      circularindicator = true;
      circularOpacity = 0.5;
      circularColor = Colors.grey;
    });
  }

Answer 1

Make your class StatelessWidget and use Provider Package for state management. Inside the widget build function keep the Provider listener false and wrap the changeable widget with Consumer Widget .

 Widget build(BuildContext context) {
  final cart = Provider.of<Cart>(context, listen: false);
  return GridTileBar(
        leading: Consumer<Product>(
          builder: (ctx, product, child) => IconButton(
            onPressed: () {
              product.toggleFavoriteStatus();
            },
            icon: Icon(product.isFavorite ? Icons.favorite : Icons.favorite_border),
            color: Theme.of(context).accentColor,
          ),
        ),
        trailing: IconButton(
          icon: Icon(Icons.shopping_cart),
          onPressed: () {
            cart.addItem(product.id, product.title, product.price);
          },
          color: Theme.of(context).accentColor,
        ),
        backgroundColor: Colors.black87,
        title: Text(product.title),
      );
}

For more details on provider package: State Management Using Provider