FutureBuilder di Flutter

Halo, sesama penggemar flutter!

Hari ini kita akan mempelajari lebih lanjut tentang cara menampilkan data asinkron dengan benar dari Future<T>with FutureBuilderin flutter.

Kita semua tahu, Future<T>itu luar biasa. Itu memungkinkan kami melakukan pekerjaan asinkron seperti mengambil data dari server tanpa memikirkan Threads dan Deadlocksdan semua.

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

Kita harus berhati-hati saat memasukkan Future<T>Karena biasanya FutureBuilder.akan FutureBuilderada di dalam buildmetode dan kita tahu bahwa buildmetode dapat dipanggil berkali-kali, kita tidak boleh membuat bagian Future<T>dalamnya.

Jika kita membuat metode Future<T>di dalam build, itu akan dibuat lagi setiap kali builddipanggil. Ini mungkin bukan yang Anda inginkan.

Jadi, di mana harus membuatfutures?

Tempat yang ideal untuk membuat atau memperbarui masa depan adalah metode siklus hidup widget seperti initState, didUpdateWidget, didChangeDependenciesdll. atau tempat lain selainbuild.

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

Selamat mengkode!!