การใช้งาน FutureBuilder ที่เป็น Async widgets ใน Flutter

// จำลองข้อมูลที่จะได้ หรือจะเกิดในอนาคต
final Future<String> _calculation = Future<String>.delayed(
  const Duration(seconds: 2),
  () => 'Data Loaded',
);

class _HomeState extends State<Home> {

    @override
    Widget build(BuildContext context) {
        print("build");// สำหรับทดสอบ
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('Home Screen'),
                    ],
                )
            ),
        );
    }
}

FutureBuilder<String>( // กำหนดชนิดข้อมูล
  future: _calculation, // ข้อมูล Future
  //builder: (BuildContext context, AsyncSnapshot snapshot) {
  builder: (context, snapshot) { // สร้าง widget เมื่อได้ค่า snapshot ข้อมูลสุดท้าย
    if (snapshot.hasData) { // ถ้าได้ค่าข้อมูลสุดท้าย
      return Text('Completed');
    } else if (snapshot.hasError) { // ถ้ามี error
      return Text('${snapshot.error}');
    }
    // ค่าเริ่มต้น, แสดงตัว Loading.
    return const CircularProgressIndicator();
  },
),  

// จำลองข้อมูลที่จะได้ หรือจะเกิดในอนาคต
final Future<String> _calculation = Future<String>.delayed(
  const Duration(seconds: 5),
  () => throw Exception("ข้อมูลไม่พร้อมใช้งาน"), // 'Data Loaded',
);  

if (snapshot.connectionState == ConnectionState.done) {
  return Text('Completed');
}
// ค่าเริ่มต้น, แสดงตัว Loading.สถานะ ConnectionState.waiting
return const CircularProgressIndicator();

import 'package:flutter/material.dart';
  
class Home extends StatefulWidget {
    static const routeName = '/';
 
    const Home({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _HomeState();
    }
}
  
class _HomeState extends State<Home> {

    // จำลองข้อมูลที่จะได้ หรือจะเกิดในอนาคต
    final Future<String> _calculation = Future<String>.delayed(
      const Duration(seconds: 5),
      () => 'Data Loaded', // throw Exception("ข้อมูลไม่พร้อมใช้งาน")
    );  

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      FutureBuilder<String>( // กำหนดชนิดข้อมูล
                        future: _calculation, // ข้อมูล Future
                        //builder: (BuildContext context, AsyncSnapshot snapshot) {
                        builder: (context, snapshot) { // สร้าง widget เมื่อได้ค่า snapshot ข้อมูลสุดท้าย
                          if (snapshot.hasData) { // ถ้าได้ค่าข้อมูลสุดท้าย
                            return Text('Completed');
                          } else if (snapshot.hasError) { // ถ้ามี error
                            return Text('${snapshot.error}');
                          }
                          // ค่าเริ่มต้น, แสดงตัว Loading.สถานะ ConnectionState.waiting
                          return const CircularProgressIndicator();
                        },
                      ),  
                    ],
                )
            ),
        );
    }
}

class _HomeState extends State<Home> {

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Home'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      FutureBuilder<String>( // กำหนดชนิดข้อมูล
                        future: fetchData(), // ข้อมูล Future
                        //builder: (BuildContext context, AsyncSnapshot snapshot) {
                        builder: (context, snapshot) { // สร้าง widget เมื่อได้ค่า snapshot ข้อมูลสุดท้าย
                          if (snapshot.hasData) { // ถ้าได้ค่าข้อมูลสุดท้าย
                            return Text('Completed');
                          } else if (snapshot.hasError) { // ถ้ามี error
                            return Text('${snapshot.error}');
                          }
                          // ค่าเริ่มต้น, แสดงตัว Loading.สถานะ ConnectionState.waiting
                          return const CircularProgressIndicator();
                        },
                      ),  
                    ],
                )
            ),
        );
    }
}

// จำลองใช้เป็นแบบฟังก์ชั่น ให้เสมือนดึงข้อมูลจาก server
Future<String> fetchData() async {
  final response = await Future<String>.delayed(
    const Duration(seconds: 5),
    () => 'Data Loaded', 
  );  
  return response; 
}