cyj893

저장소

Flutter - 로컬 데이터베이스 ②: Future(데이터베이스 화면에 띄우기, FutureBuilder)

1 분 소요


목차

1: Flutter - 로컬 데이터베이스 ①: sqflite(생성, 삽입, 업데이트, 삭제, 쿼리)

  • sqflite를 사용하여 Specs(id, type, category, method, contents, money, dateTime)라는 로컬 데이터베이스를 생성
  • 로컬 데이터베이스에 접근하는 SpecProvider 클래스를 생성하고, DB에 읽고 쓰는 함수들을 정의

2: Flutter - 로컬 데이터베이스 ②: Future(데이터베이스 화면에 띄우기, FutureBuilder) <현재>

  • DB에 접근하는 것은 async한 작업
  • 이를 Future 키워드를 사용해 다루고, FutureBuilder로 화면에 값을 보여줌

3: Flutter - 로컬 데이터베이스 ③: Singleton, factory

  • DB 인스턴스를 Singleton으로 생성

4: Flutter - 로컬 데이터베이스 ④: 이미지 파일을 데이터베이스에 저장하고 읽기

  • 이미지 파일을 데이터베이스에 저장하고 읽기


Future, FutureBuilder

Future

  Future<Database?> get database async {
    _database = await initDB();
    return _database;
  }

저번 글에서 데이터베이스 관련 함수는 다 Future, async를 썼다.
async는 시간이 오래 걸릴 수 있는 일이기 때문에 비동기적으로 동작한다는 의미이며,
Future는 그렇게 얻어온 데이터는 미래에? 얻을 수 있기 때문에 붙여주는 것


FutureBuilder

body: FutureBuilder<List<Spec>>(
            future: _getDayQuery(),
            initialData: <Spec>[],
            builder: (context, snapshot) {
              return makeDayCon(snapshot.data);
            },
          )

화면을 만드는 Widget build(BuildContext context) 안에서 이런 async한 데이터로 위젯을 만들기 위해서는 FutureBuilder를 사용한다.

future: async로 얻어올 데이터를 의미한다. 여기서는 _getDayQuery()라는 임의의 함수로 얻어오기로 한다.

initialData: async로 데이터를 얻어오기 전, 처음의 데이터를 의미한다. 보통 빈 리스트를 쓴다.

builder: 똑같이 위젯을 빌드해주면 된다. snapshot이 읽어 온 데이터를 의미한다.
snapshot.hasData 등으로 일단 데이터를 가지고 있는 지 확인을 하면 좋다

body: FutureBuilder<List<Spec>>(
            future: _getDayQuery(),
            initialData: <Spec>[],
            builder: (context, snapshot) {
              return snapshot.hasData
                ? makeDayCon(snapshot.data)
                : Center( child: CircularProgressIndicator(),);
            },
          )

만약 snapshot이 데이터를 가지고 있다면 makeDayCon()이라는 임의의 함수로 읽어 온 데이터로 위젯을 빌드하고, 아니라면 CircularProgressIndicator(), 즉 로딩 원을 반환하는 코드다.
그런데 쓰고 보니까 쿼리에 맞는 데이터 자체가 없을 때 snapshot이 비었기 때문에 무한 로딩이 되어서… 지금 앱에 이 코드는 쓰지 않았다.

굿

댓글남기기

참고