1. Episodes를 detail 화면에 보여주자.
Episodes는 데이터가 여러개라 ListView로 보여줘도되는데, 갯수가 많지 않아서 이번에는 그냥 Column 안에 Container로 버튼모양으로 데이터를 쭉 나열할 것이다.
- 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: 1,
centerTitle: true,
backgroundColor: Colors.white,
foregroundColor: Colors.green,
title: Text(
widget.title,
style: const TextStyle(
fontSize: 24,
),
),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(50),
child: Column(
children: [
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 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("로딩중...");
}),
const SizedBox(
height: 50,
),
FutureBuilder(
future: episodes,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
children: [
for (var episode in snapshot.data!)
Container(
margin: const EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: Colors.green.shade400,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
blurRadius: 5,
offset: const Offset(5, 5),
color: Colors.black.withOpacity(0.1),
),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
episode.title,
style: const TextStyle(
color: Colors.white,
fontSize: 16,
),
),
const Icon(
Icons.chevron_right_outlined,
color: Colors.white,
)
],
),
),
)
],
);
}
return Container();
},
)
],
),
),
),
);
}
}
- 결과 화면
'코딩강의 > Flutter 로 웹툰 앱 만들기(플러터-노마드코더)' 카테고리의 다른 글
| 웹툰 만들기 - Favorites (0) | 2023.08.13 |
|---|---|
| 웹툰 만들기 - Url Launcher (0) | 2023.08.08 |
| 웹툰 만들기 - Detail Info (0) | 2023.08.08 |
| 웹툰 만들기 - Futures (0) | 2023.08.07 |
| 웹툰 만들기 - ApiService (0) | 2023.08.07 |
