Animasi dalam Transisi Route di Flutter

View Categories

Animasi dalam Transisi Route di Flutter

Aplikasi sering kali memerlukan perpindahan dari satu halaman ke halaman lainnya. Namun, agar perpindahan ini terlihat lebih halus, kita dapat menggunakan animasi. Animasi dapat mengubah object pada class PageRouteBuilder untuk mengubah animasi transisi. Di sini, kita akan membahasnya secara detail.

Mari kita membuat aplikasi sederhana untuk lebih memahami konsep ini. Ikuti langkah-langkah di bawah ini untuk melakukannya:

  • Menambahkan PageRouteBuilder
  • Menambahkan tween
  • Membuat AnimatedWidget
  • Membuat CurveTween
  • Menggabungkan kedua tween

Mari kita bahas setiap langkah secara detail:

Menambahkan PageRouteBuilder

Dengan menggunakan widget PageRouteBuilder, Anda dapat membuat dua route dengan route pertama sebagai HomePage dengan tombol Go To Page 2 dan route kedua dengan halaman kosong bernama “Page 2”, menggunakan code di bawah ini:

import 'package:flutter/material.dart';

main() {
  runApp(const MaterialApp(
    home: Page1(),
  ));
}

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
        centerTitle: true,
      ),
      body: Center(
          child: ElevatedButton(
        onPressed: () {
          Navigator.of(context).push(_createRoute());
        },
        child: const Text('Go to Page 2'),
      )),
    );
  }
}

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child;
    },
  );
}

class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 2'),
        centerTitle: true,
      ),
      body: const Center(
        child: Text('Page 2'),
      ),
    );
  }
}

Menambahkan Tween

Anda dapat membuat tween dari object animasi dengan menggunakan code di bawah ini:

transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = const Offset(0.0, 1.0);
      var end = Offset.zero;
      var tween = Tween(begin: begin, end: end);
      var offsetAnimation = animation.drive(tween);
      return child;
    },

Membuat AnimatedWidget

AnimatedWidget memiliki sifat yang mengikuti keadaannya ketika nilai animasi berubah. Kamu dapat membuatnya seperti contoh di bawah ini:

transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = const Offset(0.0, 1.0);
      var end = Offset.zero;
      var tween = Tween(begin: begin, end: end);
      var offsetAnimation = animation.drive(tween);

      return SlideTransition(
        position: offsetAnimation,
        child: child,
      );
    },

Membuat CurveTween

Gunakan code di bawah ini untuk membuat CurveTween:

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

Menggabungkan Dua Tweens

Gunakan metode chain() untuk menggabungkan dua tweens seperti yang ditunjukkan di bawah ini:

var begin = Offset(0.0, 1.0);
var end = Offset.zero;
var curve = Curves.ease;

var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

Gunakanlah fungsi animation.drive() untuk membuat object Animasi dari tweens yang digabungkan seperti contoh di bawah ini:

return SlideTransition(
position: animation.drive(tween),
child: child,
);

Berikut ini adalah source code lengkap setelah mengikuti langkah langkah di atas:

import 'package:flutter/material.dart';

main() {
  runApp(const MaterialApp(
    home: Homepage(),
  ));
}

class Homepage extends StatelessWidget {
  const Homepage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Nextgen Tutorial'),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
          child: const Text('Go to Page 2'),
        ),
      ),
    );
  }
}

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = const Offset(0.0, 1.0);
      var end = Offset.zero;
      var curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const Center(
        child: Text('Page 2'),
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Orientasi UI Di Flutter
Tutorial setelahnya : Physics Simulation Pada Animasi Di Flutter
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan