웹툰 만들기 - ListView

1. ListView를 통해 api 값에서 가져온 값을 화면에 리스트 형식으로 쭈우우욱 보여주자.

 

ListView 위젯만 사용하면, 모든 값이 한번에 나오고, ListView.builder를 사용하면 내가 보는 화면에서의 값만 보여주고

스크롤 하면 추가로 데이터를 가져오는 식으로 된다. 여기서 ListView.separated를 사용하면 각 값 사이에 간격도 추가해줄 수 있다.

 

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

  final 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 ListView.separated(

                scrollDirection: Axis.horizontal,

                itemCount: snapshot.data!.length,

                itemBuilder: (context, index) {

                  var webtoon = snapshot.data![index];

                  return Text(webtoon.title);

                },

                separatorBuilder: (context, index) => const SizedBox(

                  width: 20,

                ),

              );

            }

            return const Center(

              child: CircularProgressIndicator(),

            );

          },

        ));

  }

}

 

- 결과 화면