Menerapkan Animasi pada project Flutter
Hai rekan-rekan developer!
Sebelumnya saya sudah berbagi tentang bagaimana cara menerapkan sebuah multitype view pada RecyclerView. Nah, kali ini saya ingin berbagi sedikit tentang bagaimana cara menerapkan animasi pada project Flutter.
💻 Mulai Belajar Pemrograman
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Daftar SekarangTapi sebelum lanjut, kenapa kita perlu menerapkan sebuah animasi di aplikasi yang sedang kita kembangkan? Dengan menerapkan animasi, kita bisa menambah pengalaman pengguna ketika menggunakan aplikasi kita. Sebaliknya, jika kita tidak menerapkan sebuah animasi, aplikasi akan terlihat kaku. Alhasil, pengguna pun cepat bosan dan bisa memutuskan untuk uninstall aplikasi tersebut dari peranti mereka.
Pada umumnya, animasi secara default terdapat pada transisi perpindahan halaman di dalam aplikasi. Animasinya pun beragam tergantung framework di setiap platform device. Menariknya, kita bisa mengubah dan mengganti animasi tersebut dengan animasi yang kita inginkan.
Animasi Pada Project Flutter: Hero Animation
Untuk aplikasi yang dikembangkan dengan Flutter, terdapat built-in animasi yang bisa langsung kita gunakan untuk mempercantik dan membantu kita untuk menambah pengalaman pengguna. Yaitu, Hero Animation. Animasi yang digunakan untuk menampilkan transisi sebuah widget di dalam UI ketika berpindah halaman. Sebagai contoh, misal kita mempunyai aplikasi seperti berikut:
Aplikasi di atas terlihat kaku ketika berpindah halaman, namun ketika kita menerapkan hero animation, kita bisa menambahkan animasi pada widget ketika berpindah halaman seakan-akan widget tersebut dipindah dari satu halaman ke halaman lainnya seperti berikut:
Tidak sampai di situ, kita juga bisa mengubah bentuk dari widget tersebut saat ditampilkan pada halaman tujuan:
Struktur dari Hero Animation
Pada dasarnya, Hero Animation adalah implementasi dari 2 (dua) widget Hero dengan struktur implementasinya sebagai berikut:
- Hero widget sebagai start point. Widget hero yang digunakan untuk merepresentasikan grafis dan ditandai dengan sebuah tag yang ditampilkan pada source route.
- Hero widget sebagai endpoint, atau bisa disebut sebagai hero destination. Widget ini sama seperti widget yang ditampilkan pada source route, yaitu widget yang merepresentasikan grafis dan memiliki tag yang berada pada destination route.
- Pembuatan route yang berisi tujuan akhir dari hero animation. Route ini berfungsi untuk menentukan widget yang ada di akhir animasi.
- Menjalankan animasi dengan memanggil destination route yang berada di dalam stack navigator. Navigator akan melakukan operasi push dan pop untuk menjalankan hero animation dengan melakukan komparasi antara tag widget yang ada di source dan destination route.
Flutter akan melakukan kalkulasi nilai batasan hero widget (ukuran interpolasi dan posisi) dari start point ke end point dan akan menjalankan animasi di overlay (bagian yang berada di antara source dan destination route).
Menerapkan Hero Animation
Tanpa berlama-lama, mari kita praktekkan bagaimana menerapkan hero animation. Langsung saja buat project baru Flutter, bisa menggunakan VSCode atau Android Studio. Jika project baru sudah selesai dibuat, buka berkas main.dart kemudian modifikasi kode yang berada di dalamnya menjadi seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: HomeScreen(), ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Hero Animation Sample"), ), } } |
Sebelum lanjut menambahkan widget Hero, mari kita tambahkan terlebih dahulu asset gambar yang akan ditampilkan pada widget Image. Silakan unduh assetnya di tautan ini. Namun teman-teman juga bisa menggunakan asset sed. Lanjut, buatlah folder baru dengan nama asset kemudian tempat asset gambar yang sudah diunduh di dalamnya. Kemudian daftarkan asset gambar tersebut ke dalam berkas pubspec.yaml seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 |
flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true # To add assets to your application, add an assets section, like this: assets: - asset/dicoding.png |
Pastikan kembali indentasi tiap asset agar tidak terjadi error ketika melakukan sync packages.
Setelah selesai, mari kita buka kembali berkas main.dart. Kemudian lengkapi kode pada kelas HomeScreen dengan widget Hero dan beberapa widget lainnya seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Hero Animation Sample"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Hero( tag: "logo", child: Image.asset( "asset/dicoding.png", width: 150, height: 150, ), ), Padding( padding: const EdgeInsets.only(top: 20.0), child: RaisedButton( child: Text("To another screen"), onPressed: () { Navigator.push(context, MaterialPageRoute(builder: (_) { return SecondScreen(); })); }, ), ) ], ), ), ); } } |
Di dalam widget Hero di atas terdapat sebuah widget Image yang menampilkan asset gambar yang sudah kita tambahkan sebelumnya. Selain itu, pada kelas HomeScreen di atas terdapat sebuah widget Button yang digunakan untuk menampilkan halaman baru menggunakan Navigator. Lanjut, buat lagi kelas baru di dalam bekas main.dart dengan nama SecondScreen. Buka, kemudian lengkapi kode di dalamnya seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class AnotherScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Another Screen"), ), body: Center( child: Hero( tag: "logo", child: Image.asset( "asset/dicoding.png", width: 75, height: 75, ), ), ), ); } } |
Jika sudah, secara keseluruhan berkas main.dart kurang lebih akan seperti berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: HomeScreen(), ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Hero Animation Sample"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Hero( tag: "logo", child: Image.asset( "asset/dicoding.png", width: 150, height: 150, ), ), Padding( padding: const EdgeInsets.only(top: 20.0), child: RaisedButton( child: Text("To another screen"), onPressed: () { Navigator.push(context, MaterialPageRoute(builder: (_) { return SecondScreen(); })); }, ), ) ], ), ), ); } } class SecondScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Another Screen"), ), body: Center( child: Hero( tag: "logo", child: Image.asset( "asset/dicoding.png", width: 75, height: 75, ), ), ), ); } } |
Sampai di sini kita sudah selesai menerapkan Hero Animation. Jika dijalankan, teman-teman akan melihat hasil yang seperti dicontohkan di awal. Nah, yang perlu diperhatikan dalam menerapkan Hero Animation adalah tag hero. Ketika terjadi eror seperti animasi yang tidak dapat berjalan dengan baik, pastikan kembali tag yang digunakan di widget yang berada pada source dan destination route adalah sama. Selain itu, di dalam 1 (satu) source route tidak boleh 2 (dua) atau lebih widget memiliki tag yang sama.Kasus seperti ini akan kita temukan ketika ingin menerapkan Hero Animation pada widget ListView.
Kesimpulan
Seperti yang sudah disebutkan di awal, menerapkan animasi merupakan salah satu cara yang dapat kita gunakan untuk menambah pengalaman pengguna. Dengan bertambahnya pengalaman pengguna, jumlah instal dari aplikasi kita pun akan ikut bertambah. Tentu ini akan sangat menguntungkan.
Sebenarnya masih banyak lagi animasi-animasi yang bisa kita terapkan terutama pada project Flutter. Tinggal bagaimana cara kita menerapkan dan menyesuaikan dengan aplikasi yang sedang dikembangkan.
Mungkin cukup sampai di sini tutorial kali ini. Jika ada yang mau ditanyakan, silakan tulis di kolom komentar di bawah ya, dan untuk contoh project yang sudah kita coba buat, bisa dilihat di laman Github ini.
Menerapkan Animasi pada project Flutter
Salam!
Ingin baca tulisan saya lainnya? Simak:
1. https://www.dicoding.com/blog/menerapkan-multitype-view-pada-recyclerview/
2. https://www.dicoding.com/blog/kenal-lebih-dekat-dengan-constraintlayout/
Ingin juga dapat info update tentang tutorial di blog kami via sosial media? bisa ! Follow kami ya
