Lewati ke konten utama

Animations Flutter

Animasi adalah bagian penting dari antarmuka pengguna (UI) yang menarik dan interaktif. Flutter menyediakan berbagai alat dan teknik untuk membuat animasi yang halus dan kaya fitur.

Jenis-Jenis Animasi

Flutter menawarkan dua jenis animasi utama:

  1. Implicit Animations:
  • Animasi yang terjadi secara otomatis ketika properti widget berubah.
  • Mudah digunakan untuk animasi sederhana.
  • Contoh: AnimatedContainer, AnimatedOpacity, AnimatedPositioned.
  1. Explicit Animations:
  • Animasi yang dikontrol secara manual menggunakan AnimationController dan Tween.
  • Memberikan kontrol penuh atas animasi.
  • Cocok untuk animasi yang kompleks dan disesuaikan.

Implicit Animations

  • AnimatedContainer:

    • Widget yang secara otomatis menganimasikan perubahan properti kontainer, seperti lebar, tinggi, warna, dan margin.
Dart

AnimatedContainer(
  width: _isLarge ? 200 : 100,
  height: _isLarge ? 200 : 100,
  color: _isLarge ? Colors.blue : Colors.red,
  duration: Duration(seconds: 1),
)

Explicit Animations

  • AnimationController:
    • Mengontrol jalannya animasi.
    • Menyediakan metode untuk memulai, menghentikan, dan membalikkan animasi.
  • Tween:
    • Mendefinisikan nilai awal dan akhir animasi.
    • Interpolasi nilai antara awal dan akhir selama animasi.
  • AnimatedBuilder:
    • Membangun kembali widget setiap kali animasi berubah.
Dart

late AnimationController _controller;
late Animation<double> _animation;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
}

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: _animation,
    builder: (context, child) {
      return Transform.scale(
        scale: _animation.value,
        child: child,
      );
    },
    child: FlutterLogo(),
  );
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

Jenis-Jenis Animasi Lanjutan

  • Hero Animations:
    • Animasi transisi antar halaman yang mulus.
    • Digunakan untuk menganimasikan elemen yang sama di halaman yang berbeda.
  • Staggered Animations:
    • Animasi yang dijalankan secara berurutan atau bersamaan dengan penundaan.
    • Digunakan untuk membuat animasi yang kompleks dan terkoordinasi.

Tips Animasi Flutter

  • Gunakan animasi secara bijak untuk meningkatkan pengalaman pengguna, bukan untuk mengganggu.
  • Optimalkan animasi untuk performa yang baik.
  • Gunakan AnimatedBuilder untuk membangun kembali widget hanya ketika animasi berubah.
  • Pertimbangkan untuk menggunakan paket animasi pihak ketiga untuk animasi yang lebih kompleks.