Flutter, dengan kerangka UI ekspresifnya, memungkinkan pengembang membuat pengalaman pengguna yang menarik melalui animasi. Dalam posting blog ini, kita akan membongkar sebuah widget Flutter yang disebut TapToScanTicker yang menggabungkan animasi fading in-and-out menggunakan AnimationController dan TweenSequence.
Memahami Widget Flutter
Mari kita mulai dengan memeriksa widget Flutter yang disediakan dalam source code:
class TapToScanTicker extends StatefulWidget {
const TapToScanTicker({Key? key}) : super(key: key);
@override
createState() => _TapToScanTickerState();
}
class _TapToScanTickerState extends State
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation _fadeInOut;
@override
void initState() {
super.initState();
// Inisialisasi AnimationController
_controller =
AnimationController(vsync: this, duration: const Duration(seconds: 2));
// Buat urutan Tween untuk fading in dan out
_fadeInOut = TweenSequence([
TweenSequenceItem(tween: Tween(begin: 0.0, end: 2.0), weight: 2),
TweenSequenceItem(tween: Tween(begin: 2.0, end: 0.0), weight: 2),
]).animate(_controller);
// Mulai loop animasi
_controller.repeat(reverse: true);
}
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: _fadeInOut,
child: Text(
'Tap to scan'.toUpperCase(),
style: AppText.b1b?.copyWith(color: AppColors.antiqueRuby),
),
);
}
@override
void dispose() {
// Dispose AnimationController untuk membebaskan sumber daya
_controller.dispose();
super.dispose();
}
}
Rincian Widget
-
Class TapToScanTicker: Kelas ini adalah stateful widget yang membuat instance dari _TapToScanTickerState.
- Class _TapToScanTickerState: Kelas state ini memperluas State dan menyertakan SingleTickerProviderStateMixin untuk menyediakan vsync untuk AnimationController.
-
initState: Metode ini menginisialisasi animation controller dan menyiapkan animasi fading in-and-out menggunakan TweenSequence.
-
build: Metode build mengembalikan widget FadeTransition yang menerapkan animasi fading ke widget Text yang menampilkan "Tap to scan".
-
dispose: Metode dispose dipanggil saat widget dihapus dari pohon widget, memastikan bahwa AnimationController dihancurkan dengan benar untuk membebaskan sumber daya.
-
Inti dari widget ini terletak pada logika animasinya. TweenSequence digunakan untuk mendefinisikan urutan tween, menciptakan transisi yang mulus antara nilai-nilai. Dalam kasus ini, animasinya bergantian antara fading in (opacity meningkat) dan fading out (opacity berkurang).
-
Animasi dikontrol oleh AnimationController yang mengulang urutan secara terbalik, menciptakan efek fading in-and-out yang kontinu.
Integrasi Widget
Untuk mengintegrasikan widget TapToScanTicker ke dalam aplikasi Flutter kalian, cukup masukkan ke dalam pohon widget kalian. Contohnya:
class LayarKalian extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: TapToScanTicker(),
),
);
}
}
Sekarang, kalian memiliki animasi yang halus namun menarik yang mengundang pengguna untuk "Tap to scan" dalam aplikasi Flutter kalian.
Eksperimen dengan widget ini, ubah durasinya, atau sesuaikan gaya teks untuk mengintegrasikannya secara mulus ke dalam desain aplikasi kalian. Kemampuan animasi Flutter memberikan kemungkinan tak terbatas untuk menciptakan antarmuka pengguna yang menyenangkan.
Selamat mencoba lek!
