Halo semua, pada artikel kali ini saya akan membahas Animasi yang simple dalam flutter.
Mungkin dalam pengembangan Aplikasi Mobile kita mungkin membutuhkan sebuah animasi agar tampilan menjadi lebih indah atau responsif. Jika kita tidak menerapkan animasi mungkin user lebih cepat bosan dan memutuskan untuk meng-uninstall aplikasi kita.
Hero
Di Flutter, animasi hero menerbangkan gambar dari satu layar ke layar lainnya, meskipun gerakan yang sama terkadang disebut sebagai shared element transition. Gambar terbang dari 1 layar ke layar lainnya dengan animasi yang mengadaptasi atribut gambar tujuan.
Menerapkan Hero Animation
Hero Animation merupakan implementasi dari 2 (dua) widget Hero dengan struktur implementasi sebagai berikut:
- Widget hero sebagai titik awal. Widget hero digunakan untuk mewakili grafik dan ditandai dengan tag yang ditampilkan di rute sumber. Widget Hero sebagai endpoint, atau bisa juga disebut sebagai tujuan hero. Widget ini sama dengan widget yang ditampilkan pada rute sumber, yaitu widget yang merepresentasikan grafik dan memiliki tag yang terletak pada rute tujuan.
- membuat rute yang berisi tujuan akhir dari animasi pahlawan. Rute ini digunakan untuk menentukan widget yang ada di akhir animasi.
- Jalankan animasi dengan memanggil rute tujuan yang ada di stack navigator. Navigator akan melakukan operasi push dan pop untuk menjalankan animasi hero dengan membandingkan tag widget di rute sumber dan tujuan.
Langkah Pertama
buat widget stateless bernama MyApp yang mengembalikan MaterialApp, dan masukkan widget stateless itu ke runApp sebagai argumen. sampai seluruh kode terlihat seperti berikut:
mport 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const Scaffold(
body: Center(
child: Text("Hello, World"),
),
)
);
}
}Seharus nya aplikasi menampilkan text “Hello World” pada layar
Langkah Kedua
Langkah selanjutnya adalah membuat layar atau halaman aplikasi. Dalam tutorial ini, ada total 2 halaman. buat widget stateless baru bernama ‘FirstScreen’ yang mengembalikan Scaffold . Di layar pertama ini, kami akan menampilkan gambar (yang akan segera kami terapkan animasi pahlawannya) yang kami dapatkan dari internet dan tombol untuk menavigasi aplikasi.
seluruh kode terlihat seperti berikut:
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Screen"),
),
body: Center(
child: Column(
children: [
Image.network(
"https://images.unsplash.com/photo-1518791841217- 8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
width: 200,
height: 200,
),
ElevatedButton(
child: Text("Go to second screen"),
onPressed: () {},
),
],
),
),
);
}
}lalu ganti value home dalam materialApp didalam kelas MyApp menjadi FirstScreen()
Langkah Ketiga
buat halaman tujuan atau halaman kedua. Halaman ini akan memiliki gambar dan tombol untuk kembali ke halaman sebelumnya. Satu-satunya yang berbeda selain tombol adalah posisi gambar.
class SecondScreen extends StatelessWidget {
const SecondScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
"https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
width: 200,
height: 200,
),
ElevatedButton(
child: Text("Back to First Screen"),
onPressed: () {},
),
],
),
),
);
}
}Agar Anda dapat melihat hasil untuk layar kedua, Anda harus mengubah rute halaman, tetapi untuk sekarang agar tetap sederhana, ubah nilai rumah di kelas MyApp ke SecondScreen() dan lihat hasilnya.
Langkah Keempat
buat fungsionalitas untuk navigasi di sekitar halaman atau layar dengan tombol.
Pertama, Ubah nilai home di MyApp kembali ke FirstScreen() karena kita menginginkannya sebagai halaman pertama yang dilihat pengguna saat membuka aplikasi
kedua, tambahkan kode di bawah ini untuk menavigasi ke halaman kedua saat menekan parameter onPressed di ElevatedButton di dalam kelas FirstScreen
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);jadi seluruh kode kelas FirstScreen terlihat seperti berikut:
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Screen"),
),
body: Center(
child: Column(
children: [
Image.network(
"https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
width: 200,
height: 200,
),
ElevatedButton(
child: Text("Go to second screen"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
),
],
),
),
);
}
}Di kelas FirstScreen dan SecondScreen, bungkus widget Image.network dengan Hero . Hingga tampilan kodenya seperti berikut:
Hero(
child: Image.network(
"https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
width: 200,
height: 200,
),
),Widget hero harus memiliki parameter tag. jadi mari kita tambahkan mereka.
di kedua kelas FirstScreen dan SecondScreen , tambahkan parameter tag di atas parameter turunan dan tambahkan ’21’ sebagai nilainya. Hingga tampilan widget Hero seperti berikut:
Hero(
tag: "21",
child: Image.network(
"https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
width: 200,
height: 200,
),
),Sekarang coba kalian jalankan aplikasi kalian.
Terimakasih semua!