FutureBuilder ใน Flutter

สวัสดีเพื่อนผู้คลั่งไคล้การกระพือปีก!

วันนี้เราจะเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการแสดงข้อมูลอะซิงโครนัสอย่างถูกต้องจากFuture<T>in FutureBuilderflutter

เราทุกคนรู้ว่าFuture<T>มันยอดเยี่ยม มันให้เราทำงานแบบอะซิงโครนัสเช่นการดึงข้อมูลจากเซิร์ฟเวอร์โดยไม่ต้องคิดThreads และDeadlocksทั้งหมด

Future<Model> _doCalculation() async {
    // do calculation / computation asynchronously.
    ....
    return Model;
}

FutureBuilder<Model>(
        future: _doCalculationFuture,
        builder: (BuildContext context, AsyncSnapshot<Model> snapshot) {
          if (snapshot.hasData) {
            return DataWidget(snapshot.requireData);
          } else if (snapshot.hasError) {
            return ErrorWidget();
          } else {
            return CircularProgressIndicator();
          }
          return const SizedBox();
        },
      );

เราต้องระวังในขณะที่จัดเตรียมFuture<T>เนื่องจาก โดยทั่วไปแล้ว FutureBuilder.Will FutureBuilderจะอยู่ภายในเมธอดbuildและเรารู้ว่าbuildเมธอดสามารถเรียกใช้ได้หลายครั้ง เราจะต้องไม่สร้างFuture<T>ภายในเมธอด

ถ้าเราสร้าง เมธอด Future<T>ภายในbuildมันจะถูกสร้างขึ้นใหม่ทุกครั้งbuildที่เรียกใช้ อาจไม่ใช่สิ่งที่คุณต้องการ

ดังนั้นจะสร้างที่ไหนfutures?

สถานที่ที่เหมาะสำหรับการสร้างหรืออัปเดตอนาคตคือวิธีวงจรชีวิตของวิดเจ็ต เช่นinitState, didUpdateWidget, didChangeDependenciesฯลฯ หรือที่อื่นนอกเหนือจากbuild.

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  late Future<Model> _doCalculationFuture;

  @override
  void initState() {
    super.initState();
    _doCalculationFuture = _doCalculation();
  }

  Future<Model> _doCalculation() async {
    return await Future<Model>.delayed(
      const Duration(seconds: 2),
      () => Model(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Model>(
      future: _doCalculationFuture,
      builder: (BuildContext context, AsyncSnapshot<Model> snapshot) {
        if (snapshot.hasData) {
          return DataWidget(snapshot.requireData);
        } else if (snapshot.hasError) {
          return ErrorWidget();
        } else {
          return CircularProgressIndicator();
        }
        return const SizedBox();
      },
    );
  }
}

มีความสุขในการเข้ารหัส !!