Flutter 페이지 전환 애니메이션

바다구름·2023년 3월 31일
0

Flutter

목록 보기
19/19

1. 페이드 애니메이션 예시 코드

  • GestureDetector 위젯
class Home extends StatefulWidget {
  const Home({Key? key, this.data, this.getData2, this.getCount, this.countAdd}) : super(key: key);
  final data;
  final getData2;
  final getCount;
  final countAdd;

  
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var scroll = ScrollController();

  
  void initState() {
    super.initState();
    scroll.addListener(() {
      print(widget.getCount);
      //if(scroll.position.userScrollDirection == ScrollDirection.reverse) {print('아래 사라져라얍');}

      if(scroll.position.pixels == scroll.position.maxScrollExtent) {
        print('스크롤 끝');
        if(widget.getCount == 0) {
          widget.getData2();
          widget.countAdd();
        }
      }
    });
  }

  
  Widget build(BuildContext context) {
    if(widget.data.isNotEmpty) {
      return ListView.builder(
          controller: scroll,
          itemCount: widget.data.length,
          itemBuilder: (c, i){
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                //Image.asset('../assets/dog.png'),
                widget.data[i]['image'].runtimeType == String
                    ? Image.network(widget.data[i]['image'])
                    : Image.file(widget.data[i]['image']) ,

                GestureDetector(
                  child: Text(widget.data[i]['user']),
                  onTap: (){
                    Navigator.push(context,
                      //CupertinoPageRoute(builder: (c) => Profile() )
                      PageRouteBuilder(
                        pageBuilder: (c, a1, a2) => Profile(),
                        transitionsBuilder: (c, a1, a2, child) =>
                          FadeTransition(opacity: a1, child: child), // 페이드인 
                        transitionDuration: Duration(milliseconds: 500) // 실행 시간
                      )
                    );
                  },

                ),

                Text('좋아요 ${widget.data[i]['likes']}'),
                Text(widget.data[i]['date']),
                Text(widget.data[i]['content']),
              ],
            );
          }
      );
    } else {
      return CircularProgressIndicator();
    }

  }
}



2. 슬라이드 애니메이션 예시코드

				GestureDetector(
                  child: Text(widget.data[i]['user']),
                  onTap: (){
                    Navigator.push(context,
                      //CupertinoPageRoute(builder: (c) => Profile() )
                      PageRouteBuilder(
                        pageBuilder: (c, a1, a2) => Profile(),
                        transitionsBuilder: (c, a1, a2, child) =>
                            SlideTransition(
                              position: Tween(
                                begin: Offset(-1.0, 0.0), //시작 위치
                                end: Offset(0.0, 0.0), // 최종 위치
                              ).animate(a1),
                              child: child,
                            ) 
                      )
                    );
                  },

                ),
profile
안녕하세요.

0개의 댓글