Menggunakan SpeedDial di Flutter untuk Tombol Tindakan Cepat

August 1, 2023

Flutter adalah kerangka kerja pengembangan aplikasi seluler yang populer, yang menyediakan berbagai widget yang kaya fitur. Salah satu widget yang berguna untuk menyediakan tindakan cepat dalam aplikasi adalah SpeedDial. Dalam artikel ini, kita akan membahas tentang SpeedDial, serta memberikan contoh penggunaan untuk memahami cara menggunakannya.

Apa itu SpeedDial?

SpeedDial adalah widget di Flutter yang digunakan untuk menampilkan tindakan cepat dalam bentuk tombol mengambang (floating action button) dengan beberapa pilihan tindakan di sekitarnya. Ketika tombol mengambang ditekan, pilihan tindakan akan muncul dalam animasi menyenangkan dan dapat dipilih oleh pengguna.

SpeedDial sangat cocok untuk digunakan ketika Anda ingin menyediakan beberapa tindakan yang penting dalam aplikasi, tetapi ingin menyembunyikan tindakan-tindakan tersebut untuk mengurangi kebingungan dan menyajikan antarmuka yang bersih.

Contoh Penggunaan SpeedDial

Mari kita lihat contoh penggunaan SpeedDial untuk membuat tindakan cepat dalam aplikasi Flutter.

Pastikan Anda sudah menginstal Flutter dan sudah memiliki proyek Flutter yang sedang berjalan.
Buka file pubspec.yaml dan pastikan pustaka flutter_speed_dial telah ditambahkan di dalam dependensi:

dependencies:
flutter:
sdk: flutter
flutter_speed_dial: ^3.0.5

Berikut adalah contoh codenya :

import ‘package:flutter/material.dart’;
import ‘package:flutter/src/widgets/framework.dart’;
import ‘package:flutter/src/widgets/placeholder.dart’;
import ‘package:flutter_speed_dial/flutter_speed_dial.dart’;

class ArtikelPage2 extends StatefulWidget {
const ArtikelPage2({super.key});

@override
State<ArtikelPage2> createState() => _ArtikelPage2State();
}

class _ArtikelPage2State extends State<ArtikelPage2> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
“Speed dial”,
style: TextStyle(
fontSize: 18.0,
),
),
centerTitle: true,
),
floatingActionButton: SpeedDial(
animatedIcon: AnimatedIcons.menu_close,
animatedIconTheme: IconThemeData(size: 22.0),
visible: true,
curve: Curves.bounceIn,
children: [
SpeedDialChild(
child: Icon(Icons.camera),
label: ‘Camera’,
onTap: () {
// Implement your camera action here.
print(‘Camera action’);
},
),
SpeedDialChild(
child: Icon(Icons.photo),
label: ‘Gallery’,
onTap: () {
// Implement your gallery action here.
print(‘Gallery action’);
},
),
],
),
);
}
}

Pada contoh di atas, kami menggunakan SpeedDial di dalam floatingActionButton di aplikasi. Ketika tombol mengambang ditekan, dua pilihan tindakan akan muncul: “Camera” dan “Gallery”. Saat salah satu dari pilihan tindakan tersebut dipilih, tindakan yang sesuai akan dijalankan.

Berikut adalah hasil rendernya :

Kesimpulan

SpeedDial adalah widget yang bermanfaat di Flutter untuk menyediakan tindakan cepat dalam aplikasi dengan tombol mengambang dan beberapa pilihan tindakan. Dalam artikel ini, kami telah melihat contoh sederhana tentang cara menggunakan SpeedDial dalam aplikasi Flutter. Anda dapat menyesuaikan widget ini dengan lebih lanjut sesuai dengan kebutuhan proyek Anda, serta menambahkan tindakan dan fungsionalitas tambahan untuk menciptakan antarmuka pengguna yang interaktif dan menarik.