[굿위시 제작기] 13. 즐겨찾기 페이지 제작하기

---

굿즈의 즐겨찾기 페이지

모든 굿즈를 아끼겠지만, 그중에서도 유별나게 찾아보고 싶은 굿즈들이 있습니다.

그런 굿즈들을 따로 모아두기 위해 즐겨찾기 페이지가 있습니다.

 

 

 

 

Goods, Wish Class 모델 선언 과정글 (링크)을 살펴보면,

최하단에, 'isFavorite' 속성을 확인할 수 있습니다. 이게 바로 즐겨찾기의 유무를 나타냅니다.

isFavorite가 true인 굿즈만 출력해주는 페이지가 바로 즐겨찾기 페이지입니다.

 

 

 

 

 

---

즐겨찾기 등록 방법

굿즈 상세 페이지에서 사진의 빨간 네모 부분을 터치하면,

 

 

 

 

 

클릭 전 후

책갈피 체크가 되는 기능을 추가했습니다.

 

 

[구체적인 설명글 : https://arnopark.tistory.com/915#%EC%84%A0%ED%83%9D%EC%A7%80-%EC%A0%95%EB%8B%B5-2-2]

 

 

 

 

 

---

즐겨찾기 페이지의 코드 전문

import 'package:flutter/material.dart';
import 'package:goodwishes/constants/ui_numbers.dart';
import 'package:goodwishes/widgets/change_goods_wish_button.dart';
import 'package:goodwishes/widgets/goods/favorite_list.dart';
import 'package:goodwishes/widgets/top_with_profile.dart';
import 'package:goodwishes/widgets/wish/wish_favorite_list.dart';

class FavoritePage extends StatefulWidget {
  const FavoritePage({
    super.key,
  });

  @override
  State<FavoritePage> createState() => _FavoritePageState();
}

class _FavoritePageState extends State<FavoritePage> {
  bool isGoods = true;

  void isGoodsChangeHandler() {
    setState(() {
      isGoods = !isGoods;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(
                horizontal: UIDefault.pageHorizontalPadding),
            child: Column(
              children: [
                const TopWithProfile(title: 'Favorite'),
                const SizedBox(
                  height: UIDefault.sizedBoxHeight,
                ),
                ChangeGoodsWishButton(
                  isGoods: isGoods,
                  onClick: isGoodsChangeHandler,
                ),
                const SizedBox(
                  height: UIDefault.sizedBoxHeight,
                ),
                isGoods ? const FavoriteList() : const WishFavoriteList(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

 

 

 

 

 

---

상단의 버튼

굿즈 위시

 

검색페이지와 동일하게, '굿즈 위시 변경버튼'을 통해 한 페이지 내에서 굿즈와 위시의 즐겨찾기 목록을 확인할 수 있습니다.

 

 

 

 

---

즐겨찾기 출력 위젯 - FavoriteList

빨간 네모 부분의 즐겨찾기 목록을 출력하는 위젯인 FavoriteList를 살펴보겠습니다.

 

 

 

 

import 'package:flutter/material.dart';
import 'package:goodwishes/Models/goods_model.dart';
import 'package:goodwishes/widgets/goods/searching_list_el.dart';
import 'package:provider/provider.dart';

class FavoriteList extends StatelessWidget {
  const FavoriteList({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final favoriteList = Provider.of<GoodsListProvider>(context).favoriteList;
    return GridView.builder(
      padding: const EdgeInsets.only(bottom: 100, top: 20),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: MediaQuery.of(context).size.width ~/ 180,
        childAspectRatio: 0.8, // 위젯 출력 비율
        crossAxisSpacing: 10, // 가로 여백
      ),
      physics: const NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemCount: favoriteList.length,
      itemBuilder: (context, index) {
        return SearchingListEl(
          item: favoriteList[index],
        );
      },
    );
  }
}

 

 

 

 

 

검색페이지의 SearchingList위젯과 거의 동일합니다.

GridView.builder()를 사용해서, 자동으로 휴대폰 크기에 맞춰서, 2열로 굿즈가 출력되게 했습니다.

 

 

 

 

 

 

---

즐겨찾기 굿즈 한 칸 출력 - SearchingListEl

사진의 빨간 네모처럼, FavoriteList의 한 칸을 담당하는 위젯입니다.

위젯의 이름은 SearchingListEl인데, 오타가 아닙니다. 원하는 형태가 똑같기 때문에, 따로 FavoriteListEl을 제작하지 않고 재사용했습니다.

 

 

SearchingListEl 위젯 살펴보기 : https://arnopark.tistory.com/933#%EC%84%A0%ED%83%9D%EC%A7%80-%EC%A0%95%EB%8B%B5-5

 

 

 

 

 

SearchingListEl 위젯을 사용한 덕분에, 해당 굿즈를 클릭하면 바로 상세페이지로 이동할 수 있습니다.

 

 

끝.