웹툰 만들기 - Futures

1. Detail 스크린에 받아온 Detail 정보 값을 보여주자

 

- detail_screen.dart

 

아래와 같이 이전에 만든 Apiservice 클래스의 getToonByid 메소드에 id를 넣어주려고 할 때 에러가 생긴다. 이유는

받아온 property인 id값이 초기화 되기 때문이다. 방법은 stateless를 stateful로 바꿔 주고 별도의 class를 하나더 만들어줌으로써 가능하다.

 

여기서 widget.id나 widget.thumb처럼 widget이 붙는 이유는, 이전에 statelss 상태였을 때는 초기화에 쓰일 인자를 다이렉트로 쓰일 경우 (다른 곳으로 보내지 않고)에는 widget이 안붙어도 되었으나, 지금은 stateful 상태이기 때문에 별도의 class가 생성되어 해당 class가 DetailScreen와 연동되어야 하기 때문에 widget이 붙는 것이다. 그리고 initState를 통해서

렌더링 되기 전에 widget.id을 보내주고 api값을 받아온다.

class DetailScreen extends StatelessWidget {

  final String title, thumb, id;

  Future<WebtoonDetailModel> webtoon = ApiService.getToonById(id);

  const DetailScreen({

    super.key,

    required this.title,

    required this.thumb,

    required this.id,

  });

<변경 후>

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,

                  ),

                ),

              ),

            ],

          ),

        ],

      ),

    );

  }

}