How to use single widget with multiple providers?

  1. My app is eCommerce store with dashboard has multiple lists: LatestProducts , DiscountProducts , MostViewedProduct , …
  2. I create Multi Providers: LatestProductProvider , DiscountProductProvider , MostViewedProductProvider (actually same providers with filter parameter that get different sorted products)
  3. I don’t want create multiple widget for each product list. My main widget reuses this single widget class:
 class _ProductsWidget extends StatelessWidget {
  const _ProductsWidget({ Key key, @required this.filter,}) : super(key: key);
  final String filter;

Widget build(BuildContext context) {
   dynamic productProvider = null;
   if (filter == '0') productProvider = Provider.of<LatestProductProvider>(context);
   if (filter == '1') productProvider = Provider.of<DiscountProductProvider>(context);
   if (filter == '2') productProvider = Provider.of<MostViewedProductProvider>(context);
   return SliverToBoxAdapter(
     child: ...
        //use matched productProvider

How to code above scenario? When i test my codes, my lists load parallel datas. this image is my result: