200. Adding Multi-Screen Transitions (meals앱 애니메이션 마지막 강의)

1. 화면과 화면 이동할 때 이미지가 그대로 이동되게끔 하는 애니메이션 구현

이전 노마드코더에서도 배웠던 Hero 위젯을 사용 하면 된다.

 

개념은, 1번째 화면의 사진 위젯을 Hero로 감싸주고 tag로 특정 값을 지정해준 후 (id값) 2번째 화면에서 같은 사진에 대해 Hero로 감싸주고 똑같이 tag로 동일 특정값을 사용해주면 된다.

 

여기서는

 

- meal_item.dart

            Hero(

              tag: meal.id,

              child: FadeInImage(

                placeholder: MemoryImage(kTransparentImage),

                image: NetworkImage(meal.imageUrl),

                fit: BoxFit.cover,

                height: 200,

                width: double.infinity,

              ),

            ),

1) 1번째 세부화면 위젯으로 쓰이는 부분

 

- meal_details.dart

              Hero(

                tag: meal.id,

                child: Image.network(

                  meal.imageUrl,

                  height: 300,

                  width: double.infinity,

                  fit: BoxFit.cover,

                ),

              ),

2) 2번째 세부화면 부분