如何實現FutureBuilder dart、flutter

Question

我有這個 static function 從我的數據庫（firebasefirestore）返回一個未來。 現在我需要它是一個 double，因為我必須為使用過的 Widget 提供一個 double。 我發現 FutureBuilder 是一個可行的 Class 用於這種場景，我只是不確定如何在我的代碼中正確實現它。 請參閱下面的代碼：

class SomellierChart extends StatefulWidget {
  SomellierChart(
      {Key? key,
      required this.color,
      required this.textColor,
      required this.queryDocumentSnapshot})
      : super(key: key);
  Color textColor;
  Color color;
  List<QueryDocumentSnapshot> queryDocumentSnapshot;
  @override
  _SomellierChartState createState() => _SomellierChartState();
}

class _SomellierChartState extends State<SomellierChart> {
  static Future<double> spotData(String day, queryDocumentSnapshot) async {
    final documentSnapshot = await FirebaseFirestore.instance
        .collection('users')
        .doc(FirebaseAuth.instance.currentUser!.uid.toString())
        .collection('activity')
        .doc('${globals.year}')
        .collection('week${globals.week}')
        .doc(day.toString())
        .get();

    if (documentSnapshot.exists) {
      print('Document exists');
      return documentSnapshot['usage'].toDouble();
    } else {
      print('Document doesnt exist');
      return 0;
    }
  }

  @override
  Widget build(BuildContext context) {
    return LineChart(
        LineChartData(
          gridData: FlGridData(
            show: false,
          ),
          titlesData: FlTitlesData(
            show: true,
            rightTitles: SideTitles(showTitles: false),
            topTitles: SideTitles(showTitles: false),
            leftTitles: SideTitles(showTitles: false),
            bottomTitles: SideTitles(
              showTitles: true,
              reservedSize: 20,
              interval: 1,
              getTextStyles: (context, value) => GoogleFonts.poppins(
                textStyle: TextStyle(
                  color: Theme.of(context).indicatorColor,
                  fontWeight: FontWeight.w600,
                  fontSize: 12,
                ),
              ),
              getTitles: (value) {
                switch (value.toInt()) {
                  case 0:
                    return 'Mon';
                  case 2:
                    return 'Tue';
                  case 4:
                    return 'Wed';
                  case 6:
                    return 'Thu';
                  case 8:
                    return 'Fri';
                  case 10:
                    return 'Sat';
                  case 12:
                    return 'Sun';
                }
                return '';
              },
              margin: 5,
            ),
          ),
          borderData: FlBorderData(show: false),
          minX: 0,
          maxX: 12,
          minY: 0,
          maxY: 3,
          lineBarsData: [
            LineChartBarData(
              spots: [
                FlSpot(0, spotData('1', widget.queryDocumentSnapshot)),
                FlSpot(2, spotData('2', widget.queryDocumentSnapshot)),
                FlSpot(4, spotData('3', widget.queryDocumentSnapshot)),
                FlSpot(6, spotData('4', widget.queryDocumentSnapshot)),
                FlSpot(8, spotData('5', widget.queryDocumentSnapshot)),
                FlSpot(10, spotData('6', widget.queryDocumentSnapshot)),
                FlSpot(12, spotData('7', widget.queryDocumentSnapshot)),
              ],
              isCurved: true,
              curveSmoothness: 0.5,
              preventCurveOverShooting: true,
              colors: [widget.textColor],
              barWidth: 3,
              isStrokeCapRound: true,
              dotData: FlDotData(
                show: false,
              ),
              belowBarData: BarAreaData(
                show: true,
                colors: [
                  widget.color.withOpacity(0.4),
                ],
              ),
            ),
          ],
        ),
      );
    }
  }

double 需要提供給 FlSpot。 我使用 static function spotData(day, queryDocumentSnapshot) 這樣做 - 唯一的問題是：我返回的是 Future 而不是雙...

非常感謝你的幫助！

---

Answer 1

您可以執行以下操作：

• 在initState()中初始化futureDouble
• 在FutureBuilder中使用它
• 該值是從snapshot.data! （在這種情況下是double ，因為定義了FutureBuilder<double> ，但您可以為任何對象定義它）。

class _SomellierChartState extends State<SomellierChart> {
  late Future<double> futureDouble;
  
  Future<double> spotData(String day, queryDocumentSnapshot) async {
    ...
  }

  @override
  void initState() {
    super.initState();
    futureDouble = spotData('', null);
  }


  @override
  Widget build(BuildContext context) {
    return FutureBuilder<double>(
        future: futureDouble,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return _lineChart(snapshot.data!);
          } else if (snapshot.hasError) {
            return Text('${snapshot.error}');
          }
          return const CircularProgressIndicator();
        });
  }

  Widget _lineChart(double value) {
    return LineChart(...
    );
  }
}

你也可以有一個雙列表，例如

late Future<List<double>> futureDouble;
Future<List<double>> spotData(String day, queryDocumentSnapshot) async {
  ...
}

和

return FutureBuilder<List<double>>(...)

其中snapshot.data! 將是List<double> 。

---

要有一個返回值列表的方法，你可以有類似的東西：

  Future<List<double>> values() async {
    var list = <double>[];
    list.add(await value());
    list.add(await value());
    list.add(await value());
    list.add(await value());
    list.add(await value());
    list.add(await value());
    return list;
  }

  Future<double> value() async {
    return 1;
  }