웹툰 만들기 - Webtoon Card

1. 받아온 api 값을 card 형식으로 리스트 뷰로 보여줘보자

 

naver 이미지 값을 가져오는데 시뮬레이터에서 403에러가 났다 . 아래 해결 방법 참조

https://gist.github.com/preinpost/941efd33dff90d9f8c7a208da40c18a9

 

-main.dart

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:toonflix/screens/home_screen.dart';

class MyHttpOverrides extends HttpOverrides {

  @override

  HttpClient createHttpClient(SecurityContext? context) {

    return super.createHttpClient(context)

      ..userAgent =

          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36';

  }

}

void main() {

  HttpOverrides.global = MyHttpOverrides();

  runApp(const App());

}

class App extends StatelessWidget {

  const App({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: HomeScreen(),

    );

  }

}

 

- home_screen.dart

makeList함수를 별도로 만들어 주었고.. 나머지 흐름은 코드를 따라가며 이해 가능

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 Column(

                children: [

                  const SizedBox(

                    height: 50,

                  ),

                  Expanded(child: makeList(snapshot))

                ],

              );

            }

            return const Center(

              child: CircularProgressIndicator(),

            );

          },

        ));

  }

  ListView makeList(AsyncSnapshot<List<WebtoonModel>> snapshot) {

    return ListView.separated(

      scrollDirection: Axis.horizontal,

      itemCount: snapshot.data!.length,

      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),

      itemBuilder: (context, index) {

        var webtoon = snapshot.data![index];

        return Column(

          children: [

            Container(

              width: 250,

              clipBehavior: Clip.hardEdge,

              decoration: BoxDecoration(

                  borderRadius: BorderRadius.circular(15),

                  boxShadow: [

                    BoxShadow(

                      blurRadius: 15,

                      offset: const Offset(10, 10),

                      color: Colors.black.withOpacity(0.3),

                    )

                  ]),

              child: Image.network(

                webtoon.thumb,

              ),

            ),

            Text(

              webtoon.title,

              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600),

            ),

          ],

        );

      },

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

        width: 20,

      ),

    );

  }

}

 

- 결과 화면