Tutorial Flutter Animasi Blink Pada Teks (tutorial.emka.web.id)

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();
  }
}

Lebih lengkapnya, baca lebih lanjut di: tutorial.emka.web.id

Leave a Reply Cancel reply