Flutter Instagram Clone #13 Hero 위젯으로 애니메이션 구현하기, Firestore에 단발성 로딩 구현

jakeseo_me·4일 전
0

Flutter-Instagram-Clone

목록 보기
13/14

Flutter Instagram Clone #13 Hero 위젯으로 애니메이션 구현하기, Firestore에 단발성 로딩 구현

원본 강의

https://www.inflearn.com/course/flutter-%EC%9E%85%EB%AC%B8/dashboard

여기서 유료 결제를 해서 듣고있는 강의의 내용을 개인적인 공부 목적으로 지식 위주로 정리해봅니다.

Hero in flutter?

플루터에서 애니메이션을 처리해주는 위젯임

ex) 그림을 클릭했을 때, 그림이 커지면서 애니메이션이 적용되어 보여짐.

Hero 사용 방법

먼저, 그림을 처음 클릭하게 되는 search_page.dart 파일에서 _buildListItem 메소드의 리턴 부분을 Hero로 감싸준다.

Widget _buildListItem(BuildContext context, document) {
  return Hero(
    tag: document['photoUrl'],
    child: InkWell(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return DetailPostPage(document);
        }));
      },
      child: Image.network(
        document['photoUrl'],
        fit: BoxFit.cover,
      ),
    ),
  );
}

이후에, 그림이 보여지는 detail_post_page.dart 파일에서도 이미지 부분을 Hero로 감싸준다.

Hero(
  tag: document['photoUrl'],
  child: Image.network(
    document['photoUrl'],
    fit: BoxFit.cover,
  ),
)

위와 같이, 이어지기 전 부분과 이어진 후 부분을 tag로 연결시켜준다.

이렇게 Hero로 감싸주면, 그림을 클릭했을 때 그림이 커지는 애니메이션이 적용되며 그림이 보여진다.

그런데 이 상태에서는 뒤로가기를 했을 때 아래와 같은 오류가 발생한다.

간단히 갈색 부분만 읽어보면 No Material widget found.라는 메세지인데, search_page.dartchild 부분의 InkWellMaterial로 한번 더 감싸주면 된다.

아마, Hero라는 위젯 안에 들어오며, Material을 한번 더 작성해주어야 하는 것 같다.

위와 같이 감싸주면 잘 된다.

Account 페이지에 게시글 갯수 표기하기

Search 페이지에서는 불러온 그림이 있냐 없냐에 따라 다른 화면을 랜더링하도록 작성하기 위해 StreamBuilder를 사용하였다.

StreamBuilder는 데이터에 변경사항이 있을 때마다 매번 새로 데이터를 불러오게 되고, 로딩 과정에서 소요되는 Firebase의 트래픽들은 결국 비용으로 환산된다.

게시물의 갯수의 경우에는 그냥 API를 한번 호출하고 그 결과를 표기하도록 한다.

AccountPage에 게시글 갯수를 표기하기 위한 변수 생성하기

위와 같이 State 부분에 _postCount라는 변수 하나를 생성해준다. 초기 값은 0.

문자열에서 $키워드로 변수 불러오기

게시물 숫자 부분을 기존 0 고정값에서 $_postCount로 변경한다. 문자열 내부에 $키워드를 삽입하면, 변수의 값을 불러올 수 있다.

Firestore API를 통한 값 불러오기


void initState() {
  // TODO: implement initState
  super.initState();
  Firestore.instance
      .collection('post')
      .where('email', isEqualTo: widget.user.email)
      .getDocuments()
      .then((snapShot) {
    setState(() {
      _postCount = snapShot.documents.length;
    });
  });
}

initState 라이프사이클에서 _postCount값을 초기화해준다.

Firestore.instance... 부분은 Firestore의 API 부분이다. 내 이메일과 같은 post 정보들만 가져와서 그 길이를 _postCount로 설정한다.

profile
대전에 있는 (주) 아이와즈에서 풀스택 웹개발자로 일하고 있는 서진규입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. Javascript를 좋아합니다.

0개의 댓글