Dalam pengembangan aplikasi Flutter, menampilkan gambar profil atau avatar pengguna adalah hal yang umum. Kadang-kadang, kita ingin menggabungkan beberapa gambar profil menjadi satu dengan tampilan yang menarik. AvatarStack adalah komponen yang disediakan oleh Flutter untuk melakukan hal tersebut. Dalam artikel ini, kita akan membahas tentang AvatarStack, bagaimana menggunakannya, dan memberikan contoh implementasinya.
Apa itu AvatarStack?
AvatarStack adalah widget Flutter yang memungkinkan kita untuk menggabungkan beberapa gambar profil atau avatar dalam satu tampilan. Widget ini mengatur beberapa gambar profil tumpuk dalam bentuk lapisan dan memberikan efek yang menarik. AvatarStack cocok digunakan dalam kasus di mana kita ingin menampilkan beberapa gambar profil atau avatar dalam satu tampilan yang tergabung.
Cara Menggunakan AvatarStack di Flutter
Tidak ada package khusus yang perlu diinstal untuk menggunakan AvatarStack. AvatarStack sudah tersedia di Flutter SDK.
Dependensi yang perlu disiapkan:
| dependencies: flutter: sdk: flutter avatar_stack: ^1.2.0 |
Contoh Implementasi
Berikut adalah contoh sederhana tentang cara menggunakan AvatarStack untuk menggabungkan beberapa gambar profil atau avatar dalam satu tampilan:
| import ‘package:avatar_stack/avatar_stack.dart’; import ‘package:flutter/material.dart’; import ‘package:flutter/src/widgets/framework.dart’; import ‘package:flutter/src/widgets/placeholder.dart’; class ArtikelPage23 extends StatefulWidget { const ArtikelPage23({super.key}); @override State<ArtikelPage23> createState() => _ArtikelPage23State(); } class _ArtikelPage23State extends State<ArtikelPage23> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(‘Avatar Stack’), centerTitle: true), body: Center( child: Padding( padding: const EdgeInsets.all(8.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( ‘Example:’, ), const SizedBox(height: 20), AvatarStack( height: 50, avatars: [ for (var n = 0; n < 15; n++) NetworkImage(‘https://i.pravatar.cc/150?img=$n’), ], ), ], ), ), ), ); } } |
Berikut adalah visualisasinya :
Kesimpulan
AvatarStack adalah widget Flutter yang memungkinkan kita untuk menggabungkan beberapa gambar profil atau avatar dalam satu tampilan dengan tampilan yang menarik. Dalam artikel ini, kita telah membahas tentang AvatarStack, cara menggunakannya, dan memberikan contoh implementasinya. Cobalah menggunakan AvatarStack dalam proyek Flutter Anda untuk menciptakan tampilan gambar profil atau avatar yang menarik dengan efek tumpukan.