Home Flutter Lottie Flutter

Lottie Flutter

0

Lottie adalah sebuah library yang memungkinkan developer untuk menampilkan animasi yang dibuat dengan Adobe After Effects dalam aplikasi Android, iOS, React Native, dan juga Flutter. Pada artikel ini, kita akan membahas penggunaan Lottie di Flutter.

Apa itu Lottie di Flutter?

Lottie di Flutter adalah sebuah library yang memungkinkan kita untuk menampilkan animasi yang dibuat dengan Adobe After Effects di aplikasi Flutter. Dalam Lottie, animasi diekspor dalam format JSON dan kemudian dapat ditampilkan dalam aplikasi dengan menggunakan Lottie library.

Berikut adalah langkah-langkah untuk menggunakan Lottie di Flutter:

  1. Tambahkan package lottie_flutter ke dalam file pubspec.yaml:
dependencies:
  lottie_flutter: ^1.0.1
  1. Impor package lottie_flutter ke dalam file Dart Anda:
import 'package:lottie_flutter/lottie_flutter.dart';
  1. Tambahkan widget Lottie ke dalam tampilan Anda:
Lottie.asset('assets/lottie_file.json')

Pada contoh di atas, kita menambahkan widget Lottie ke dalam tampilan Flutter dengan menggunakan file JSON animasi yang berada di dalam folder assets.

  1. Memutar dan menghentikan animasi Lottie:
final _controller = AnimationController(vsync: this);
bool _isPlaying = false;

@override
void initState() {
  super.initState();
  _controller.duration = const Duration(milliseconds: 2000);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        Lottie.asset(
          'assets/lottie_file.json',
          controller: _controller,
          onLoaded: (composition) {
            _controller..duration = composition.duration;
          },
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              if (_isPlaying) {
                _controller.stop();
                _isPlaying = false;
              } else {
                _controller.repeat();
                _isPlaying = true;
              }
            });
          },
          child: Text(_isPlaying ? 'Stop' : 'Play'),
        )
      ],
    ),
  );
}

Pada contoh di atas, kita menggunakan AnimationController untuk memutar dan menghentikan animasi Lottie ketika tombol Play/Stop ditekan.

Kesimpulan

Lottie di Flutter memungkinkan developer untuk menampilkan animasi yang dibuat dengan Adobe After Effects di aplikasi Flutter dengan mudah. Dalam pembuatan aplikasi Flutter, Lottie sangat berguna untuk membuat animasi yang menarik dan memperkaya tampilan aplikasi. Dalam artikel ini, kita telah mempelajari cara menggunakan Lottie di Flutter, mulai dari menambahkan package Lottie hingga memutar dan menghentikan animasi Lottie.