flutter - 如何制作可重用的 Futurebuilder

Question

我必须为屏幕的不同类型的类别构建多个 future builder ，例如:每周交易、全部、新到货等。我现在的代码非常准系统，但在这里。

+主屏幕

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();
  }
} 

+ repo 产品

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");
  }
}

现在，必须将每个“每周交易，全部，新到货”添加到 futurebuilder 是很多样板文件，我想将其简化为可重用的小部件。就像我使用 RowBoxes() 一样。

我知道如何制作普通的可重用小部件，但是当涉及到 futurebuilder 时，它需要通用类型(对于 futurebuilder 小部件)和它的“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...'
)