웹툰 만들기 - FutureBuilder

1. FutureBuilder 위젯을 통해 더 쉽게 api 값을 데이터를 가져와보자.

 

바로 이전에 다룬 내용에서는 stateful로 화면을 업데이트 해주고 데이터를 가져오는 식으로 했는데, 너무 번거롭다.

이번 FutureBuilder를 사용하게 되면 stateless로 초간단하게 api 값을 가져올 수 있다.

 

- home_screen.dart

api값을 webtoons 변수에 담은 후, FutureBuilder 위젯을 통해 보여주는 방식 (async await 할 필요 없음)

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});

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

  @override

  Widget build(BuildContext context) {

    return Scaffold(

        backgroundColor: Colors.white,

        appBar: AppBar(

          elevation: 0,

          centerTitle: true,

          backgroundColor: Colors.white,

          foregroundColor: Colors.green,

          title: const Text(

            "Today's 웹툰",

            style: TextStyle(

              fontSize: 24,

              fontWeight: FontWeight.w400,

            ),

          ),

        ),

        body: FutureBuilder(

          future: webtoons,

          builder: (context, snapshot) {

            if (snapshot.hasData) {

              return const Text("데이터 있어요!");

            }

            return const Text("로딩 중..");

          },

        ));

  }

}