[Flutter] 넷플릭스 클론 코딩 #11 | 찜한 목록 | 파이어베이스 데이터 검색 | where |

내가 좋아요 를 누른 항목만 따로 볼 수 있도록 스크린을 만들어봅시다.

 

# 파이어베이스 데이터 리딩

파이어베이스에서 데이터를 읽으면 아래와 같은 순서로 변형 할 수 있다.

List<DocumentSnapshot> -> DocumentSnapshot -> Movie data

순서대로 데이터를 가져오는 방법을 정리하였다.

 

List<DocumentSnapshot> 

파이어베이스의 컬렉션에서 데이터를 직접 불러오는 방법을 사용

"where" 을 이용하면 된다.

조건을 위해 제공해주는 기본 함수로는 11개가 있다.

Query<T> where(
    Object field, {
    Object? isEqualTo,
    Object? isNotEqualTo,
    Object? isLessThan,
    Object? isLessThanOrEqualTo,
    Object? isGreaterThan,
    Object? isGreaterThanOrEqualTo,
    Object? arrayContains,
    Iterable<Object?>? arrayContainsAny,
    Iterable<Object?>? whereIn,
    Iterable<Object?>? whereNotIn,
    bool? isNull,
  });

 

 

 Movie 컬렉션에서 like의 값이 true인 것만 스냅샷! 

Widget _buildBody(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
        stream: FirebaseFirestore.instance
            .collection('movie')
            .where('like', isEqualTo: true)
            .snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) return const LinearProgressIndicator();
          return _buildList(context, snapshot.data!.docs);
        });

 

 

DocumentSnapshot

이 전에 검색창에서 만들었던 것과 같이 그리드뷰로 데이터를 보여줄 예정.

Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
    return Expanded(
        child: GridView.count(
            crossAxisCount: 3,
            childAspectRatio: 1 / 1.5,
            padding: const EdgeInsets.all(3),
            children: snapshot
                .map((data) => _buildListItem(context, data))
                .toList()));
  }

 

Movie Data

DocumentSnapshot -> Movie data 값 저장.

해당 데이터에 해당하는 포스터를 보여주고,

클릭 시 디테일 화면으로 이동하도록 구현.

Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
    final movie = Movie.fromSnapshot(data);

    return InkWell(
      child: Image.network(movie.poster),
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute<Null>(
            fullscreenDialog: true,
            builder: (BuildContext context) {
              return DetailScreen(movie);
            }));
      },
    );
  }

 

---

# UI 

사실 진짜 검색 화면이랑 검색창 있는 것만 빼면 동일해서 이해하는데 문제 없었다!

@override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            padding: const EdgeInsets.fromLTRB(20, 50, 20, 7),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Image.asset(
                  'images/bbongflix_logo.png',
                  fit: BoxFit.contain,
                  height: 25,
                ),
                Container(
                  padding: const EdgeInsets.only(left: 20),
                  child: const Text(
                    'Liked Contents',
                    style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
                  ),
                )
              ],
            ),
          ),
          _buildBody(context)
        ],
      ),
    );
}

 

완성한 모습!