Skeleton Text di Flutter

View Categories

Skeleton Text di Flutter

Dengan memakai Flutter, library skeleton_text digunakan untuk mengimplementasikan animasi skeleton text loading. Penggunaannya utama dalam aplikasi flutter adalah untuk memberikan jaminan kepada pengguna bahwa ketika server sedang lambat maka konten aplikasi tetap dapat ditampilkan. Jadi pada waktu pengguna menunggu konten aplikasi ditampilkan maka animasi skeleton text ini akan ditampilkan.

Dalam artikel ini, akan dibahas proses mengimplementasikan skeleton text pada aplikasi flutter dengan membuat aplikasi sederhana. Untuk membuatnya, ikuti langkah-langkah berikut:

  • Tambahkan dependensi skeleton_text pada file pubspec.yaml
  • Import dependensi tersebut pada file main.dart
  • Bangun struktur aplikasi sederhana untuk mengimplementasikan dependensi tersebut
  • Panggil metode SkeletonAnimation pada bagian body aplikasi

Mari kita lihat langkah-langkah tersebut secara detail:

Tambahkan Dependency

Tambahkan dependensi skeleton_text pada bagian dependencies pada file pubspec.yaml seperti yang ditunjukkan di bawah ini:

Tangkapan layar pubspec.yaml ketika library skeleton_text ditambahkan

Mengimpor Dependency

Gunakan kode di bawah ini untuk mengimpor dependensi skeleton_text ke file main.dart:

import 'package:skeleton_text/skeleton_text.dart';

Membuat Struktur Aplikasi

Buat struktur sederhana pada aplikasi Flutter dengan appbar dan body, gunakan StatelessWidget seperti yang ditunjukkan di bawah ini:

import 'package:flutter/material.dart';

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

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


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Skeleton Text',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            title: const Text("Nextgen Tutorial"),
            backgroundColor: Colors.blue,
          ),
          body:
      ),
    );
  }
}

Memanggil Fungsi SkeletonAnimation

Gunakan fungsi SkeletonAnimation yang disediakan oleh library skeleton_text untuk menampilkan skeleton_text untuk list object seperti contoh kode di bawah ini:

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

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

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


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Skeleton Text',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            title: const Text("Nextgen Tutorial"),
            backgroundColor: Colors.blue,
          ),

        // list item yang ada di body
        body: ListView.builder(
            scrollDirection: Axis.vertical,
            physics: const BouncingScrollPhysics(),
            itemCount: 5,
            itemBuilder: (BuildContext context, int index) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                      color: Colors.white70),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.start,

                    // SkeletonAnimation method
                    children: [
                      SkeletonAnimation(
                        child: Container(
                          width: 70.0,
                          height: 70.0,
                          decoration: BoxDecoration(
                            color: Colors.grey[300],
                          ),
                        ),
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(
                                left: 15.0, bottom: 5.0),
                            child: SkeletonAnimation(
                              child: Container(
                                height: 15,
                                width:
                                MediaQuery.of(context).size.width * 0.6,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10.0),
                                    color: Colors.grey[300]),
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(left: 15.0),
                            child: Padding(
                              padding: const EdgeInsets.only(right: 5.0),
                              child: SkeletonAnimation(
                                child: Container(
                                  width: 60,
                                  height: 13,
                                  decoration: BoxDecoration(
                                      borderRadius:
                                      BorderRadius.circular(10.0),
                                      color: Colors.grey[300]),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              );
            }),
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Flutter Custom Font
Tutorial setelahnya : Flutter Theme
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan