Dalam pengembangan aplikasi Flutter, seringkali kita ingin menampilkan elemen tampilan tambahan yang mengambang di atas konten utama. Teknik ini dikenal sebagai floating overlay. floating_overlay
adalah package Flutter yang memudahkan kita untuk membuat dan mengatur floating overlay dengan cepat dan mudah. Dalam artikel ini, kita akan membahas tentang package floating_overlay
, bagaimana menggunakannya, dan memberikan contoh implementasinya.
Apa itu Package floating_overlay
?
floating_overlay
adalah package Flutter yang menyediakan komponen untuk menampilkan elemen mengambang (floating) di atas konten utama aplikasi. Package ini memudahkan kita untuk membuat dan mengatur floating overlay dengan menggunakan widget OverlayEntry. Dengan floating_overlay
, kita dapat menampilkan elemen tambahan, seperti pesan pemberitahuan, tombol aksi, atau elemen interaktif lainnya, yang mengambang di atas tampilan utama.
Cara Menggunakan Package floating_overlay
Langkah pertama adalah menambahkan package floating_overlay
ke file pubspec.yaml
Anda:
dependencies: flutter: sdk: flutter floating_overlay: ^0.1.0 |
Setelah itu, jalankan flutter pub get
untuk mengunduh dan memasang package tersebut.
Contoh Implementasi
Berikut adalah contoh sederhana tentang cara menggunakan package floating_overlay
untuk membuat floating overlay dalam aplikasi Flutter:
import ‘package:artikel/screen/artikel_page_13.dart’; import ‘package:floating_overlay/floating_overlay.dart’; import ‘package:flutter/material.dart’; import ‘package:flutter/src/widgets/framework.dart’; import ‘package:flutter/src/widgets/placeholder.dart’; class ArtikelPage24 extends StatefulWidget { const ArtikelPage24({super.key}); @override State<ArtikelPage24> createState() => _ArtikelPage24State(); } class _ArtikelPage24State extends State<ArtikelPage24> { final controller = FloatingOverlayController.absoluteSize( maxSize: const Size(200, 200), minSize: const Size(100, 100), start: Offset.zero, padding: const EdgeInsets.all(20.0), constrained: true, ); @override Widget build(BuildContext context) { final controller = FloatingOverlayController.absoluteSize( maxSize: const Size(200, 200), minSize: const Size(100, 100), padding: const EdgeInsets.all(20.0), constrained: true, ); return Scaffold( appBar: AppBar( title: const Text(‘Floating Overlay Example’), centerTitle: true, ), body: FloatingOverlay( controller: controller, floatingChild: SizedBox.square( dimension: 100.0, child: Container( decoration: BoxDecoration( color: Theme.of(context).primaryColor, border: Border.all( color: Colors.black, width: 5.0, ), ), ), ), child: Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ ElevatedButton( child: Text( “Toggle Overlay”, style: TextStyle( fontSize: 12.0, ), ), onPressed: () { controller.toggle(); }, ), ElevatedButton( child: Text( “Set Screen Center Offset”, style: TextStyle( fontSize: 12.0, ), ), onPressed: () { final size = MediaQuery.of(context).size; final rect = Rect.fromPoints( Offset.zero, Offset(size.width, size.height), ); controller.offset = rect.center; }, ), ElevatedButton( child: Text( “Add Scale”, style: TextStyle( fontSize: 12.0, ), ), onPressed: () { controller.scale = 2.0; }, ), ], ), ), ), ); } } |
Berikut adalah visualisasinya :

Kesimpulan
Package floating_overlay
adalah package Flutter yang memudahkan kita untuk menampilkan elemen mengambang (floating) di atas konten utama aplikasi. Dalam artikel ini, kita telah membahas tentang package floating_overlay
, cara menggunakannya, dan memberikan contoh implementasinya. Cobalah menggunakan floating_overlay
dalam proyek Flutter Anda untuk menambahkan elemen mengambang dengan mudah dan memberikan pengalaman interaktif yang menarik bagi pengguna.