[Flutter] 애니메이션 페이지(라우터) 이동하는법 - Animate a page route transition

 

나는 플러터를 배울때 Navigator.of(context).push()를 통해 단순 페이지 전환만 되는줄 알았다.

하지만 공식문서를 보던중 PageRouteBuilder를 통해 전환을 좀더 독특하게 할 수 있다는것을 알았다.

 

사용법은 매우 간단하다.

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
    	const begin = Offset(0.0, 1.0);
        const end = Offset.zero;
        final tween = Tween(begin: begin, end: end);
        final offsetAnimation = animation.drive(tween);
        return child;
    },
  );
}

위 코드가 추가해주면 된다.

새페이지가 밑에서부터 위쪽으로 올라오게 되므로 offset을 주게 된다.

begin 또는 end 값을 (0.0~1.0) 값으로 설정

 

이때 CurveTween을 사용하여 효과를 줄수 있다.

var curve = Curves.ease;
var curveTween = CurveTween(curve: curve);

---

전체코드

import 'package:flutter/material.dart';

void main() => runApp(
      MyApp(),
    );

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              _createRoute(),
            );
          },
          child: Text('Go'),
        ),
      ),
    );
  }
}

// https://docs.flutter.dev/cookbook/animation/page-route-animation
// 중간에서 페이지이동시 효과를 줄수 있음
Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(0.0, 1.0);
      const end = Offset.zero;
      const curve = Curves.ease;
      final tween = Tween(begin: begin, end: end);

      final curvedAnimation = CurvedAnimation(parent: animation, curve: curve);

      return SlideTransition(
        position: tween.animate(curvedAnimation),
        child: child,
      );
    },
  );
}

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('Page 2'),
      ),
    );
  }
}

 

위 내용은 공식문서를 참고하여 작성하였습니다.

https://docs.flutter.dev/cookbook/animation/page-route-animation

Animate a page route transition