[Flutter] FutureBuilder

2024-05-08-수 : DB에서 select하여 리스트형태로 가져오는 snapshot

I/flutter (29846): (donguran) [_HomePageState:23] snapshot connectionState:ConnectionState.waiting
I/flutter (29846): (donguran) [_HomePageState:24] snapshot hasData:false
I/flutter (29846): (donguran) [_HomePageState:25] snapshot data:null

I/flutter (29846): (donguran) [_HomePageState:23] snapshot connectionState:ConnectionState.done
I/flutter (29846): (donguran) [_HomePageState:24] snapshot hasData:true
I/flutter (29846): (donguran) [_HomePageState:25] snapshot data:[[BarcodeModel] id:1, imagePath:/d

 

FutureBuilder를 사용하고, snapshot으로 값을 사용하는 것이 아닌,

snapshot.data로 값을 받아오도록 함.

 

    FutureBuilder(
      future: _loadPermissionCheck(),
      builder: (context, snapshot) => AnimatedOpacity(
        opacity: snapshot.data ?? true ? 1.0 : 0.0,
        duration: const Duration(milliseconds: 500),
        child: const Center(
          child: SizedBox(
            child: CupertinoActivityIndicator(),
          ),
        ),
      ),
    ),

  Future<bool> _loadPermissionCheck() async {
    return await Future.delayed(const Duration(seconds: 2),() {
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => const LoginScreen(),));
      return false;
    },);
  }

 

 

ex2)

  @override
  Widget build(BuildContext context) {

    return FutureBuilder(
      future: loadYoutubeVideoPlayList(),
      builder: (context, AsyncSnapshot<bool> snapshot) {
        debugPrint('FutureBuilder.. snapshot:$snapshot');
        return Center(child: Text(snapshot.data ?? false ? 'tureeee' : "falsess"));
      },
    );
  }

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

 

 

2024-02-21-수 업데이트

그럼 궁금해진다.

FutureBuilder는 최초에는 어떤 위젯을 화면 그려줄까?

늘 기억할 것 같지만, 막상 FutureBuilder를 오랜만에 사용하면 이것이 궁금해져서 테스트를 하여, 시간이 낭비된다.

또 이후로 잊고 다시 테스트를 해서 이참에 작성한다.

  child: FutureBuilder(
    future: loadInternetConnect(),
    builder: (context, AsyncSnapshot<bool> snapshot) {
      if (snapshot.data == true) {
        return Center(
          child: Text("connected!"),
        );
      } else {
        return Center(
          child: CircularProgressIndicator(),
        );

 

snapshot결과가 true면 Text위젯이 표출되고, false이면 CircularProgressIndicator가 표출하도록 구성했다.

  Future<bool> loadInternetConnect() async {
    return Future.delayed(const Duration(seconds: 4), () {
      return true;
    });
  }

 

 

결과는?

snapshot이 처음엔 null값이 나온다.

I/flutter (30814): snapshot!!! : null
I/flutter (30814): snapshot!!! : true

 

그리고 이후로 loadInternetConnect함수를 실행해준 결과를 가져온다.

총 3가지 상황이 있는 것이다.

null인 경우 Progress를 표출해주고, 결과에 따라서 합당 위젯을 표출해주면 되는 것이다.

 

그럼 항상 bool을 사용하는 것이 아니다.

Future<void>를 사용하는 경우에도 load가 끝났는지 확인할 수 있다.

아래와 같은 Future<void>함수를 호출한 경우

  Future<void> loadInternetConnect() async {
    return Future.delayed(const Duration(seconds: 4), () {
      // return true;
    });
  }

 

snapshot은 ConnectionState waiting과 done상태로 재호출된다.

그러므로 void를 사용해서 해당 상황을 응용해서 위젯을 꾸밀 수 있다.

I/flutter ( 6564): snapshot!!! : AsyncSnapshot<void>(ConnectionState.waiting, true, null, null).... ConnectionState.waiting
Reloaded 1 of 846 libraries in 471ms (compile: 34 ms, reload: 148 ms, reassemble: 70 ms).
I/ViewRootImpl@1881bea[MainActivity]( 6564): onDisplayChanged oldDisplayState=2 newDisplayState=2
I/ViewRootImpl@1881bea[MainActivity]( 6564): onDisplayChanged oldDisplayState=2 newDisplayState=2
I/flutter ( 6564): snapshot!!! : AsyncSnapshot<void>(ConnectionState.done, null, null, null).... ConnectionState.done

 

 

 

---

2024.03.05. 재리뷰

결과 :

- 3초 후 connectionState는 wating → done 이 되고,

- 3초 후 hasData는 false → true가 된다.

class _WifiPageState extends State<WifiPage> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: loadWifiDatabase(),
      builder: (context, AsyncSnapshot<void> snapshot) {
        debugPrint("snapshot:$snapshot, connectionState:${snapshot.connectionState}, hasData:${snapshot.hasData}");
          return const CupertinoActivityIndicator();
      },
    );
  }

  Future<void> loadWifiDatabase() async {
    return Future.delayed(const Duration(seconds: 3), () {
      return true;
    });
  }
}