flutter/widget

FutureBuilder

coens 2022. 5. 14. 16:35

- 수행하는데 오래걸리는 일이 있을 때, 시점에 따라서 다른 UI를 보여줄 때 씀.
- 매개변수
* future : 수행하는 (오래걸리는) 일 함수(네트워크나 복잡한 계산 등)
* builder: (context, _snapshot)
   .. 상태가 변할 때마다 호출됨. _snapshot.done이면 완료되었다.
   .. 표시할 위젯을 리턴하자
   .. future의 리턴값이 _snapshot.data에 들어있다.

 

최소 예제

로딩 돌아가다가 3초 후 완료된다!

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder<String>(
          future: _hardwork(),
          builder: (ctx, _snapshot) {
            if (_snapshot.connectionState == ConnectionState.done) {
              return Text(_snapshot.data.toString());
            } else {
              return CircularProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}

Future<String> _hardwork() async {
  await Future.delayed(Duration(seconds: 3));
  return "완료됨!";
}

'flutter > widget' 카테고리의 다른 글

아이콘 만들어 주는 사이트  (0) 2023.09.08
TextFormField  (0) 2022.05.19
Snackbar 케이스 정리  (0) 2022.05.15