Flutter adalah kerangka kerja UI yang populer untuk pengembangan aplikasi lintas platform. Salah satu fitur menarik yang dapat digunakan untuk menciptakan antarmuka yang interaktif adalah DraggableScrollableSheet. Dalam artikel ini, kita akan membahas konsep DraggableScrollableSheet dan memberikan contoh implementasi sederhana untuk memahami cara menggunakannya.
Source code artikel 1-24 widget click -> https://github.com/dzikrul1616/artikel_udacoding
Apa itu DraggableScrollableSheet?
DraggableScrollableSheet adalah widget di Flutter yang memungkinkan Anda membuat bagian dari antarmuka pengguna (UI) yang dapat digeser atau ditarik ke atas atau ke bawah. Anda dapat menggunakan widget ini untuk mengimplementasikan berbagai fitur, seperti menu yang muncul dari bawah layar, panel pengaturan yang dapat diakses dengan menggeser, atau bagian lain dari antarmuka yang dapat ditampilkan atau disembunyikan dengan cara yang interaktif.
Widget DraggableScrollableSheet dapat diletakkan di antara widget lain di dalam Stack, Column, atau ListView, sehingga memberikan fleksibilitas untuk memposisikan dan mengatur tampilan Anda sesuai dengan kebutuhan.
Contoh Penggunaan DraggableScrollableSheet
Mari kita lihat contoh implementasi sederhana DraggableScrollableSheet. Kita akan membuat aplikasi yang menampilkan gambar dan daftar item di bawahnya. Ketika gambar ditarik ke atas, DraggableScrollableSheet akan muncul dari bawah layar dengan daftar item yang dapat digulir.
- Pastikan Anda sudah menginstal Flutter dan sudah memiliki proyek Flutter yang sedang berjalan. Jika belum, Anda dapat mengikuti panduan instalasi dan pembuatan proyek Flutter di situs resmi Flutter.
- Contoh code yang dapat digunakan :
| import ‘package:flutter/material.dart’; import ‘package:flutter/src/widgets/framework.dart’; import ‘package:flutter/src/widgets/placeholder.dart’; class ArtikelPage3 extends StatefulWidget { const ArtikelPage3({super.key}); @override State<ArtikelPage3> createState() => _ArtikelPage3State(); } class _ArtikelPage3State extends State<ArtikelPage3> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( “DraggableScrollableSheet”, style: TextStyle( fontSize: 18.0, ), ), centerTitle: true, ), body: Stack( children: [ Container( width: double.infinity, height: double.infinity, child: Image.network( ‘https://via.placeholder.com/500’, fit: BoxFit.cover, ), ), DraggableScrollableSheet( builder: (context, scrollController) { return Container( color: Colors.white, child: ListView.builder( controller: scrollController, itemCount: 50, itemBuilder: (context, index) { return ListTile( title: Text(‘Item $index’), leading: Icon(Icons.circle), ); }, ), ); }, ), ], ), ); } } |
3. Berikut adalah gambar rendernya :
Kesimpulan
Flutter menyediakan widget DraggableScrollableSheet yang memungkinkan Anda membuat antarmuka pengguna yang interaktif dengan mudah. Anda dapat menggunakannya untuk berbagai macam kasus, seperti menu yang dapat digeser, panel pengaturan yang muncul, atau tampilan lainnya yang memerlukan interaksi geser. Dalam artikel ini, kita telah melihat cara sederhana untuk mengimplementasikan DraggableScrollableSheet dan membuat antarmuka yang menarik dan dinamis. Anda dapat menggali lebih dalam dan menyesuaikan widget ini sesuai dengan kebutuhan proyek Anda.