如何创建一个可重用的Futurebuilder

Question

我必须为一个屏幕的不同类别构建多个未来的构建器，比如:每周交易，所有，新到达，等等。我的代码现在是非常基本的，但它在这里。

+主屏幕

import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'package:vgo_customer_side/models/Product.dart';
import 'package:vgo_customer_side/repos/ProductRepo.dart';
import 'package:vgo_customer_side/widgets/Boxes.dart';
import 'package:vgo_customer_side/widgets/MyFunction.dart';


class GeneralScreen extends StatefulWidget {
  const GeneralScreen({Key? key}) : super(key: key);

  @override
  _GeneralScreenState createState() => _GeneralScreenState();
}

class _GeneralScreenState extends State<GeneralScreen> with AutomaticKeepAliveClientMixin<GeneralScreen> {
  List list = ["Weekly Deal", "Relevant", "Freshly"];
  late Future<Product> futureProduct;

  @override
  void initState(){
    futureProduct = readAllProducts();
    super.initState();
  }
  String? rise;

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      constraints: BoxConstraints.tightForFinite(),
      child: SingleChildScrollView(
        child: Column(
          children: [
            deliverField(),
            SizedBox(height: 29,),
            
            
            FutureBuilder<Product>(
                future: readAllProducts(),
                builder: (context, AsyncSnapshot<Product> snapshot){
                  if(snapshot.hasData){
                    return RowBoxes(categoryName: "Weekly Deal", icon: Icon(Icons.arrow_forward, color: Colors.orange,));
                  }
                  return Text("waiting");
                }),
            
            
            SizedBox(height: 10,),
          ElevatedButton(onPressed: (){
            setState(() {
              futureProduct = readAllProducts();
            });
          }, child: Text("press me")),
          Center(child: Text("All")),
          Center(child: Text("Just for you")),
          _justForYou(),

        ],),
      ),
    );
  }
  _justForYou(){
    return Container();

  }
  _bottomGrid(){
    return Container();
  }
} 

+RepoProduct

import 'package:vgo_customer_side/models/ApiRespone.dart';
import 'package:vgo_customer_side/models/Product.dart';
import 'package:http/http.dart' as http;

Future<Product> readAllProducts() async{
  final response = await http.get(Uri.parse('https://vgo-buyer.herokuapp.com/api/v1/shopping/products/'));
  if(response.statusCode == 200){
    for(dynamic data in getAllProductsResponseFromJson(response.body).payload) {
      return Product.fromJson(data);
    }
    throw Exception("Failed to load Products");
  }
  else{
    throw Exception("Failed to load Products");
  }
}

现在，必须将每个“每周交易，所有，新到达”添加到一个未来构建器中，这是许多样板，我想将其简化为一个可重用的小部件。就像我对RowBoxes()所做的那样。

我知道如何制作普通的可重用小部件，但当涉及到未来构建器时，它需要泛型类型(用于未来构建器小部件)和用于其"future:“函数的特定类。有谁能教我怎么做吗？

Answer 1

您可以编写一个类似以下内容的通用小部件：

class DealsWidget<T> extends StatelessWidget {
  final Future<T> future;
  final String category;
  final IconData iconData;
  final Color color;
  final String loadingText;

  DealsWidget({
    this.future,
    this.category,
    this.iconData,
    this.color,
    this.loadingText,
  });

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<T>(
      future: future,
      builder: (context, AsyncSnapshot<T> snapshot) {
        if (snapshot.hasData) {
          return RowBoxes(
            categoryName: category,
            icon: Icon(
              iconData,
              color: color,
            ),
          );
        }
        return Text(loadingText);
      },
    );
  }
}

并像这样使用它：

DealsWidget<Product>(
   future: readAllProducts(),
   category: 'Weekly Deals',
   iconData: Icons.arrow_forward,
   color: Colors.orange,
   loadingText: 'Please Wait...'
)