Tutorial Flutter: Animasi Blink Pada Teks

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!