Flutter - 6.6 FutureBuilder

6.5강에서 했던 길었던 비동기 방식을 이용한 것을 이번에는 매우 간단하게 바꿀 수 있다고 한다.

FutureBuilder를 이용해서.

심지어 StatelessWidget으로 바꿀 수도 있다.

./screens/home_screen.dart

import 'package:flutter/material.dart';

import 'package:toonflix/models/webtoon_model.dart';

import 'package:toonflix/services/api_service.dart';

class HomeScreen extends StatelessWidget {

  HomeScreen({super.key});

  // 6.5 waitForWebToons를 대체할 방법은?

  Future<List<WebtoonModel>> webtoons = ApiService.getTodaysToons();

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      backgroundColor: Colors.white,

      appBar: AppBar(

        //그림자를 줄일 수 있음

        elevation: 2,

        surfaceTintColor: Colors.white,

        shadowColor: Colors.black,

        foregroundColor: Colors.green,

        centerTitle: true,

        title: const Text(

          "오늘의 웹툰",

          style: TextStyle(fontSize: 24),

        ),

      ),

      body: FutureBuilder(

        future: webtoons,

        builder: (context, snapshot) {

          // snapshot을 이용해서 Future의 상태를 알 수 있음.

          if (snapshot.hasData) {

            return const Text("There is data!");

          }

          return const Text('Loading....');

        },

      ),

    );

  }

}

매우 간결해줬다.
핵심은 Scaffold의 body에 있는 'FutureBulder'이다.

Futurebuild는?
1. future에 받아와야 하는 데이터를 받는다.(여기에서는 webtoons)
2. bulder에 (context, snapshot){}을 만든다.
3. 그러면 snapshot에 future에 적혀있는 것에 데이터가 받아졌는지 확인할 수 있도록 한다.

그 아래에 있는 if문은 그냥 테스트 하기 위함이다.
물론, 이후에 데이터를 받아와야 하기 때문에, HomeScreen이 const가 아니라는 사실을 명심하자.

아, 그리고 이대로 하면 아래와 같은 경고가 나타나는데...
This class is marked as '@immutable', but one or more of its instance fields aren't final
HomeScreen이 StatelessWidget이기 때문에, 이것이 유지되는 동안 데이터 값이 바뀌면 안된다.
따라서, 바뀌지 않음을 보장하기 위해서 webtoons변수 앞에 'final'을 붙여주면 해결이 된다.
참고 : https://velog.io/@dmswls5115/This-class-is-marked-as-immutable-but-one-or-more-of-its-instance-fields-arent-final