1. 자체 저장기능을 활용하여 Favorites를 만들어보자.
모바일 자체 저장을 할 수 있다. --> 다운 https://pub.dev/packages/shared_preferences
- detail_screen.dart
initState() 부분에서 초기에 모바일 자체에 해당 값 유무를 확인 하고 화면에 보여주는 로직이다. 내용을 천천히 보면 이해 할 수 있다.
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.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;
late SharedPreferences prefs;
bool isLiked = false;
Future initPrefs() async {
prefs = await SharedPreferences.getInstance();
final likedToons = prefs.getStringList(('likedToons'));
if (likedToons != null) {
if (likedToons.contains(widget.id) == true) {
setState(() {
isLiked = true;
});
}
} else {
await prefs.setStringList('likedToons', []);
}
}
@override
void initState() {
super.initState();
webtoon = ApiService.getToonById(widget.id);
episodes = ApiService.getLatestEpisodesById(widget.id);
initPrefs();
}
onHeartTap() async {
final likedToons = prefs.getStringList(('likedToons'));
if (likedToons != null) {
if (isLiked) {
likedToons.remove(widget.id);
} else {
likedToons.add(widget.id);
}
await prefs.setStringList('likedToons', likedToons);
setState(() {
isLiked = !isLiked;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 1,
centerTitle: true,
backgroundColor: Colors.white,
foregroundColor: Colors.green,
actions: [
IconButton(
onPressed: onHeartTap,
icon: Icon(
isLiked ? Icons.favorite : Icons.favorite_outline,
))
],
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();
},
)
],
),
),
),
);
}
}
- 결과 화면
하트 부분을 터치하면 색이 칠해지고 모바일에 저장, 다음에 새로 앱을 열때 해당 값을 조회하고 보여주기
'코딩강의 > Flutter 로 웹툰 앱 만들기(플러터-노마드코더)' 카테고리의 다른 글
| 웹툰 만들기 - Url Launcher (0) | 2023.08.08 |
|---|---|
| 웹툰 만들기 - Episodes (0) | 2023.08.08 |
| 웹툰 만들기 - Detail Info (0) | 2023.08.08 |
| 웹툰 만들기 - Futures (0) | 2023.08.07 |
| 웹툰 만들기 - ApiService (0) | 2023.08.07 |
