Home Mobile Menerapkan Floating Overlay dengan Package floating_overlay dalam Aplikasi Flutter

Menerapkan Floating Overlay dengan Package floating_overlay dalam Aplikasi Flutter

0

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.