본문 바로가기

Flutter

[j Flutter] 사진으로 화면 전환 되게 하기, 애니메이션 화면 전환 (like 당근마켓)

728x90
반응형

화면 전환 시 다음과 같은 효과를 적용해보자.

출처 : https://flutter-ko.dev/docs/cookbook/navigation/hero-animations

 

 

1. 같은사진을 두 화면에 적용해야한다.

 home화면과 이동 할 detail화면에 asset이미지를 적용해준다.

 

Image.asset(
                          "assets/images/a.jpg",
                          width: 100,
                          height: 100,
                        )

 

 

2. 이미지 위젯을 Hero로 감싸준 뒤 똑같은 tag 값을 적용한다.

Hero(
        tag: "1",
        child: Image.asset(
          "assets/images/a.jpg",
          width: size.width,
          fit: BoxFit.fill,
        ),
      )

 ** 꼭 똑같은 tag값을 지정해준다.

 

 

728x90
반응형