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…..