웹툰 만들기 - Detail Info

1. Detail 화면에 들어가는 세부 내용을 더 넣어보자.

home screen 과 마찬가지로 FutureBuilder를 통해 보여주면 된다.

 

- detail_screen.dart

import 'package:flutter/material.dart';

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

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

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

class DetailScreen extends StatefulWidget {

  final String title, thumb, id;

  const DetailScreen({

    super.key,

    required this.title,

    required this.thumb,

    required this.id,

  });

  @override

  State<DetailScreen> createState() => _DetailScreenState();

}

class _DetailScreenState extends State<DetailScreen> {

  late Future<WebtoonDetailModel> webtoon;

  late Future<List<WebtoonEpisodeModel>> episodes;

  @override

  void initState() {

    super.initState();

    webtoon = ApiService.getToonById(widget.id);

    episodes = ApiService.getLatestEpisodesById(widget.id);

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      backgroundColor: Colors.white,

      appBar: AppBar(

        elevation: 0,

        centerTitle: true,

        backgroundColor: Colors.white,

        foregroundColor: Colors.green,

        title: Text(

          widget.title,

          style: const TextStyle(

            fontSize: 24,

          ),

        ),

      ),

      body: Column(

        children: [

          const SizedBox(

            height: 50,

          ),

          Row(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              Hero(

                tag: widget.id,

                child: 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(

                    widget.thumb,

                  ),

                ),

              ),

            ],

          ),

          const SizedBox(

            height: 10,

          ),

          FutureBuilder(

              future: webtoon,

              builder: (context, snapshot) {

                if (snapshot.hasData) {

                  return Padding(

                    padding: const EdgeInsets.symmetric(horizontal: 50),

                    child: Column(

                      crossAxisAlignment: CrossAxisAlignment.start,

                      children: [

                        Text(

                          snapshot.data!.about,

                          style: const TextStyle(

                            fontSize: 16,

                          ),

                        ),

                        const SizedBox(

                          height: 15,

                        ),

                        Text(

                          '${snapshot.data!.genre} / ${snapshot.data!.age}',

                          style: const TextStyle(

                            fontSize: 16,

                          ),

                        ),

                      ],

                    ),

                  );

                }

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

              })

        ],

      ),

    );

  }

}