[웹툰 앱 만들기] 웹툰 상세 화면 정보 불러오기

여러 웹툰의 포스터 중 특정 포스터를 선택하면 해당 웹툰의 정보를 표시하는 상세 페이지를 다음과 같이 설정했다. 추후에 에피소드에 관한 정보들도 화면에 나타낼 예정이기 때문에 에피소드의 정보를 불러오는 과정도 이 글에 포함하였다.

 

순서는 크게 3가지로 나뉜다.

 

1. 웹툰 정보 불러오는 모델 및 api service 구현하기

이전에 웹툰의 정보를 불러와 썸네일(포스터)을 표시했던 것처럼, 정보의 model과 api service를 구현해야 한다.

class WebtoonDetailModel {
  final String title, about, genre, age;

  WebtoonDetailModel.fromJson(Map<String, dynamic> json)
      : title = json['title'],
        about = json['about'],
        genre = json['genre'],
        age = json['age'];
}

webtoon_datail_model.dart

 

class WebtoonEpisodeModel {
  final String title, id, rating, date;

  WebtoonEpisodeModel.fromJson(Map<String, dynamic> json)
      : title = json['title'],
        id = json['id'],
        rating = json['rating'],
        date = json['date'];
}

webtoon_episode_model.dart

 

static Future<WebtoonDetailModel> getToonInfoById(String id) async {
    final url = Uri.parse('$baseUrl/$id');
    final response = await http.get(url);
    if (response.statusCode == 200) {
      final webtoonInfoJson = jsonDecode(response.body);
      return WebtoonDetailModel.fromJson(webtoonInfoJson);
    } else {
      throw Error();
    }
  }

  static Future<List<WebtoonEpisodeModel>> getEpisodesInfoById(
      String id) async {
    List<WebtoonEpisodeModel> episodes = [];
    final url = Uri.parse('$baseUrl/$id/episodes');
    final response = await http.get(url);
    if (response.statusCode == 200) {
      final webtoonEpisodesInfoJson = jsonDecode(response.body);
      for (var episodeJson in webtoonEpisodesInfoJson) {
        episodes.add(WebtoonEpisodeModel.fromJson(episodeJson));
      }
      return episodes;
    } else {
      throw Error();
    }
  }

api_service.dart에 추가한 웹툰 정보, 에피소드 정보를 불러오는 api service들

 

2. 웹툰 정보 불러오기

이제 위를 활용해서 정보를 가져와야 한다. 두 api service의 경우, webtoon의 id를 필요로 한다. 그래서 위 정보를 불러올 위젯을 statefulWidget으로 변경하고 initState를 활용해 웹툰 정보와 에피소드들을 불러왔다.

// ...

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.getToonInfoById(widget.id);
    episodes = ApiService.getEpisodesInfoById(widget.id);
  }
  
  // ...

https://github.com/soaringwave/Flutter-studying/commit/86f9b741adbeee69d382cc32c8648eb090500a98

 

3. 불러온 웹툰 정보 나타내고 스타일 설정하기

FutureBuilder 위젯을 통해 웹툰 정보를 나타내고, 패딩이나 텍스트의 크기, 정렬 등을 설정해서 사진처럼 스타일을 설정했다.

https://github.com/soaringwave/Flutter-studying/commit/0e9bfe75349381796f38ab485bd8fd9b2ead9607

---

https://nomadcoders.co/flutter-for-beginners/lectures/4171

All Courses – 노마드 코더 Nomad Coders