Flutter - 6.17 Favorites

(내가 만들고 있는 앱에도 꼭 필요한 기능이었는데, 마침 있어서 매우 기분이 좋았다.)

1. 일단, 좋아하는 것들을 표시하는 아이콘 부터 만든다.
detail_screen.dart에서 appBar에 다음과 같이 actions에 iconbutton을 만든다.

     appBar: AppBar(
        elevation: 2,
        surfaceTintColor: Colors.white,
        shadowColor: Colors.black,
        foregroundColor: Colors.green,
        centerTitle: true,
        actions: [
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.favorite_outline_outlined),
          ),
        ],
        title: Text(
          widget.title,
          style: const TextStyle(fontSize: 24),
        ),
      ),

2. 이번에는 좋아하는 작품을 핸드폰에 직접 저장하는 부분을 만들 것이다.
이때, 'shared_preferences' 패키지를 사용하면 된다. $\rightarrow$ https://pub.dev/packages/shared_preferences

shared_preferences | Flutter package

이제 이 패키지의 사용법을 알아보자.

    1) 핸드폰 저장소와 connection을 만들어야 함.

// Obtain shared preferences.
final SharedPreferences prefs = await SharedPreferences.getInstance();

이렇게 sharedpreference를 가져온다고 선언을 한 후에,
    2) 쓰기, 읽기

// Save an list of strings to 'items' key.
await prefs.setStringList('items', <String>['Earth', 'Moon', 'Sun']);

// Try reading data from the 'items' key. If it doesn't exist, returns null.
final List<String>? items = prefs.getStringList('items');

이렇게 쓰기, 읽기를 하면 된다.

우리는, '좋아요'를 누른 웹툰의 id의 list를 불러오는 방식으로 만들 것이다.

  late SharedPreferences prefs;

  // 좋아요 누른 웹툰 id 리스트 initialize
  Future initPrefs() async {
    // getInstace가 Future임.
    prefs = await SharedPreferences.getInstance();
    final likedToons = prefs.getStringList('likedToons');
    // getStringList를 통해서 얻은 likedToons는 null값이 가능하기 때문에 null값인지 아닌지 확인해야 함.
    if (likedToons != null) {
      // List에서 현재 detail_screen의 웹툰이 좋아요가 체크 되어 있는지 확인
      if (likedToons.contains(widget.id) == true) {
        // setState를 통해서 UI를 Refresh 해야 함!
        setState(() {
          isLiked = true;
        });
      }
    } else {
      // 앱이 처음 실행될 경우에만 실행 됨.
      await prefs.setStringList('likedToons', []);
    }
  }

  @override
  void initState() {
    super.initState();
    webtoon = ApiService.getToonById(widget.id);
    episodes = ApiService.getLatestEpisodesById(widget.id);
    initPrefs();
  }

이렇게 함수 initRefs를 실행하면 초기화가 실행되도록 해서 initState내부에 위치 함으로써 Sharedpreference를 초기화 한다.
그리고, setState를 통해서 UI를 Refresh해야 함을 잊지 말자. 왜냐하면, Future함수이기 때문에, initState()실행 이후에 initRef() 함수가 완성된다. 따라서, setState()를 통해서 Refresh 해야 한다.

3. 이번에는.. 좋아요 버튼을 누르면 실행하는 함수를 만든다.

  // 좋아요 버튼 누르면 실행하는 함수
  onHeartTap() async {
    final likedToons = prefs.getStringList('likedToons');
    if (likedToons != null) {
      if (isLiked) {
        likedToons.remove(widget.id);
      } else {
        likedToons.add(widget.id);
      }
      // likedToons라는 이름의 리스트 저장
      await prefs.setStringList('likedToons', likedToons);
      setState(() {
        // isLiked의 반대 값을 넣어줌
        isLiked = !isLiked;
      });
    }
  }

거의 항상 likedToons값이 이 함수 안에서는 null값이 아니겠지만, 혹시나 해서 넣었다고 한다.

4. 마지막으로, IconButton을 완성시킨다.

        actions: [
          IconButton(
            onPressed: onHeartTap,
            icon: Icon(isLiked ? Icons.favorite : Icons.favorite_outline),
          ),
        ],

 

드디어 Flutter 기초 강의가 끝마쳤다.
아마도, 앞으로는 내가 만들고 있던 앱을 다시 시작하면서 진행상황들을 공유하는 느낌으로 갈 듯 하다.