Make Hero Animation in Flutter

Pada kesempatan ini kita akan membahas cara menggunakan Hero Animation di Flutter. Hero Animasi merupakan sebuah element transisi yang bergerak melayang saat berpindah dari satu layar ke layar lainnya. Contoh tampilan hero seperti gambar dibawah ini

Pengenalan Hero Animation

Hero Animation bisa dikatakan merupakan salah satu animasi paling mudah dan sederhana di flutter. Caranya yaitu hanya dengan menggunakan class Hero pada kedua item (awal dan akhir) dan dihubungkan dengan properti tag yang memilik nilai yang sama. Contoh sederhana penggunaan Hero widget seperti dibawah ini:

Hero(
  tag: "ContohTag",
  child: Icon(
    Icons.airport_shuttle,
    size: 100.0,
    ),
),

Kedua pasangan masing element harus memiliki value tag yang sama dan bersifat unik. Sebagai contoh kita akan membuat transisi icon mobil dimana posisi awal mobil berada di pojok kiri atas dan akan bergerak ketengah saat berpindah ke layar selanjutnya. Contoh code lengkapnya seperti ini

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: HomePage(),
  ));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Routing'),
        centerTitle: true,
        elevation: 0,
      ),
      body: InkWell(
        onTap: () {
          Navigator.push(
            context,
            PageRouteBuilder(
              transitionDuration: Duration(seconds: 1),
              pageBuilder: (_, __, ___) => AboutPage(),
            ),
          );
        },
        child: Hero(
          tag: "ContohTag",
          child: Icon(
            Icons.airport_shuttle,
            size: 100.0,
          ),
        ),
      ),
    );
  }
}

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Halaman Kedua'),
      ),
      body: Center(
        child: InkWell(
          onTap: () {
            Navigator.pop(context);
          },
          child: Hero(
            tag: "ContohTag",
            child: Icon(
              Icons.airport_shuttle,
              size: 100.0,
            ),
          ),
        ),
      ),
    );
  }
}

Perhatikan tag pada Hero widget dimana nilainya sama-sama menggunakan string dengan value “ContohTag“. Hasilnya seperti gambar dibawah ini

Merubah Widget Hero saat Transisi

Kita juga dapat merubah tampilan widget saat proses transisi dengan menggunakan properti flightShuttleBuilder.

Hero(
  tag: "ContohTag",
  child: Icon(
    Icons.airport_shuttle,
    size: 100.0,
  ),
  flightShuttleBuilder:
      (flightContext, animation, direction, fromContext, toContext) {
      return Icon( Icons.local_airport, size: 100.0, );
  },
),

Dengan properti flightShuttleBuilder kita juga dapat merubah widget push dan pop dengan cara membedakan widget berdasarkan Hero direction

if (direction == HeroFlightDirection.push) {
  return Icon(
    Icons.local_airport,
    size: 100.0,
  );
} else if (direction == HeroFlightDirection.pop) {
  return Icon(
    Icons.local_airport,
    size: 60.0,
  );
}

Kode lengkapnya dibawah ini :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Belajar Hero'),
      ),
      body: InkWell(
        onTap: () {
          Navigator.push(
            context,
            PageRouteBuilder(
              transitionDuration: Duration(seconds: 1),
              pageBuilder: (_, __, ___) => AboutPage(),
            ),
          );
        },
        child: Hero(
          tag: "ContohTag",
          child: Icon(
            Icons.airport_shuttle,
            size: 100.0,
          ),
          flightShuttleBuilder:
              (flightContext, animation, direction, fromContext, toContext) {
            if (direction == HeroFlightDirection.push) {
              return Icon(
                Icons.local_airport,
                size: 100.0,
              );
            } else if (direction == HeroFlightDirection.pop) {
              return Icon(
                Icons.local_airport,
                size: 60.0,
              );
            }
            return Container();
          },
        ),
      ),
    );
  }
}

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Halaman Kedua'),
      ),
      body: Center(
        child: InkWell(
          onTap: () {
            Navigator.pop(context);
          },
          child: Hero(
            tag: "ContohTag",
            child: Icon(
              Icons.home,
              size: 100.0,
            ),
          ),
        ),
      ),
    );
  }
}

nah, segitu dulu teman-teman.. sampai jumpa lagi di artikel berikutnya…..

Subscribe

Related articles

Tips Kolaborasi Efektif antara UI/UX Desainer dan Pengembang

Kerja sama yang solid antara UI/UX desainer dan pengembang...

Aturan Penting yang Harus Dipatuhi oleh Seorang UI/UX Designer

Desain Antarmuka Pengguna (UI) dan Pengalaman Pengguna (UX) adalah...

Membangun Profil LinkedIn yang Mengesankan untuk UI/UX Designer

Dalam era digital yang semakin maju, LinkedIn telah menjadi...

Meningkatkan Karir Anda dengan Sertifikasi Google UX

Dalam dunia yang semakin terhubung secara digital, pengalaman pengguna...

Perjalanan Seorang Intern UI/UX Desainer di Udacoding

Sebagai seorang mahasiswa yang bersemangat dan bercita-cita tinggi di...

LEAVE A REPLY

Please enter your comment!
Please enter your name here