1. 버튼을 누르면 https를 사용한 다른 화면으로 넘어가보자.
각 에피소드들에 대한 naver웹툰 화면으로 바로 가게 하자.
먼저 다음 파일 다운, https://pub.dev/packages/url_launcher
해당 위젯은 아래와 같이 사전 세팅이 필요하다. 해당 앱에서는 https만 사용하기 때문에 sms, tel은 삭제 하고 https를 추가.
- detail_screen.dart
Episode 위젯을 별도로 때어냈다.
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';
import 'package:toonflix/widgets/episode_widget.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!)
Episode(
episode: episode,
webtoonId: widget.id,
)
],
);
}
return Container();
},
)
],
),
),
),
);
}
}
- episode_widget.dart
이전에 배운, GestureDetector를 통해 버튼을 활성화 시켰고 해당 버튼을 누르면 링크가 연동되게 하였다.
import 'package:flutter/material.dart';
import 'package:toonflix/models/webtoon_episode_model.dart';
import 'package:url_launcher/url_launcher_string.dart';
class Episode extends StatelessWidget {
const Episode({
super.key,
required this.episode,
required this.webtoonId,
});
final String webtoonId;
final WebtoonEpisodeModel episode;
onButtonTap() async {
await launchUrlString(
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onButtonTap,
child: 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,
)
],
),
),
),
);
}
}
'코딩강의 > Flutter 로 웹툰 앱 만들기(플러터-노마드코더)' 카테고리의 다른 글
| 웹툰 만들기 - Favorites (0) | 2023.08.13 |
|---|---|
| 웹툰 만들기 - Episodes (0) | 2023.08.08 |
| 웹툰 만들기 - Detail Info (0) | 2023.08.08 |
| 웹툰 만들기 - Futures (0) | 2023.08.07 |
| 웹툰 만들기 - ApiService (0) | 2023.08.07 |
