Lottie Animation di Flutter

View Categories

Lottie Animation di Flutter

Visualisasi merupakan bagian integral dari setiap aplikasi. Animasi dapat sangat memperindah antarmuka pengguna aplikasi, namun animasi dapat sulit diimplementasikan untuk sebuah aplikasi. Di sinilah animasi Lottie hadir. Lottie adalah file animasi berbasis JSON. Lottie dapat digunakan baik sebagai aset jaringan maupun aset statis di seluruh platform.

Dalam artikel ini, kita akan melihat implementasi animasi Lottie dalam aplikasi flutter. Kamu dapat memilih berbagai file Lottie dari sini.

Berikut adalah beberapa Properti animasi Lottie yang sering digunakan:

  • Animate: Properti ini mengontrol gerakan animasi
  • Reverse: Digunakan untuk membalikkan gerakan animasi
  • Repeat: Digunakan untuk mengulang animasi beberapa kali

Mari kita bangun struktur aplikasi flutter sederhana dan impor animasi Lottie ke dalamnya. Untuk melakukannya, ikuti langkah-langkah di bawah ini:

  • Tambahkan dependensi Lottie ke file pubspec.yaml
  • Buat file dart (misalnya, lottie_page)
  • Impor paket Lottie ke file lottie_page.dart
  • Tambahkan aset ke file pubspec.yaml

Sekarang, mari kita bahas langkah-langkah di atas secara detail.

Menambahkan dependency Lottie

Buka file pubspec.yaml dan tambahkan dependensi seperti yang ditunjukkan di bawah ini:

Tangkapan layar pubspec.yaml ketika menambahkan library lottie

Impor dependency Lottie

Untuk mengimpor dependensi ke file lottie_page.dart, gunakan code di bawah ini:

import 'package:lottie/lottie.dart';

Menambahkan asset

Untuk menggunakan aset dalam Flutter, Anda perlu mengaktifkannya pada file pubspec.yaml seperti yang ditunjukkan di bawah ini:

Tangkapan layar yang menggambarkan keadaan file pubspec.yaml agar bisa menambahkan asset ke aplikasi flutter

Sekarang bagian pemrograman dimulai. Buka file lib/lottie_page.dart dan tambahkan kode berikut:

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class LottiePage extends StatefulWidget {
  const LottiePage({super.key});

  @override
  State createState() => _LottiePageState();
}

class _LottiePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Nextgen Tutorial"),
        backgroundColor: Colors.blue,
        automaticallyImplyLeading: false,
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.network(
              'https://assets7.lottiefiles.com/packages/lf20_WaQ8yMJuKt.json',
              //height: 200.0,
              repeat: true,
              reverse: true,
              animate: true,
            ),
            Lottie.network(
              'https://assets4.lottiefiles.com/packages/lf20_raiw2hpe.json',
              height: 100,
              repeat: true,
              reverse: true,
              animate: true,
            ),
          ],
        ),
      ),
    );
  }
}

Sekarang impor file lottie_page.dart ke dalam file lib/main.dart seperti yang ditunjukkan di bawah ini:

import 'package:flutter/material.dart';

import 'lottie_page.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LottiePage(),
    );
  }
}

Output:

Tutorial sebelumnya : Physics Simulation Pada Animasi Di Flutter
Tutorial setelahnya : Flutter Form Validator
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan