Flutter - 페이지 이동 PageRouteBuilder과 Hero 효과 주기 (1)

Hero 위젯과 PageRouteBuilder를 잘 사용해주면 아래 처럼 페이지 이동이 된다. 

소스코드

페이지 이동 PageRouteBuilder + Hero

GridView로 index를 통해 tag값을 동일하게 설정.

ProductCard(
            product: demo_products[index],
            press: () {
              Navigator.push(
                context,
                PageRouteBuilder(
                  pageBuilder: ((context, animation,
                          secondaryAnimation) =>
                      DetailsScreen(
                          product: demo_products[index])),
                ),
              );
            })

Hero

Hero위젯 사용시 주의 사항

출발 화면과 도착화면 모두 동일한 tag를 설정 해주어야 원하는 UI가 그려진다.

 

출발 화면 Hero 부분

Hero(
      tag: product.title!,
      child: Image.asset(product.image!),
    ),

도착 화면 Hero 

Container(
          width: double.infinity,
          color: Color(0xFFF8F8F8),
          child: Hero(
            tag: widget.product.title! + _cartTag,
            child: Image.asset(widget.product.image!),
          ),
        ),