Membuat Beralih yang Keren dengan Flutter toggle_switch

July 21, 2023

Dalam pengembangan aplikasi Flutter, seringkali kita memerlukan komponen yang memungkinkan pengguna untuk beralih antara dua pilihan dengan gaya yang menarik dan mudah digunakan. toggle_switch adalah package Flutter yang memudahkan kita untuk membuat toggle switch yang keren dan dapat disesuaikan. Dalam artikel ini, kita akan membahas tentang toggle_switch, bagaimana menggunakannya, dan memberikan contoh implementasinya.

Apa itu toggle_switch Package?

toggle_switch adalah package Flutter yang menyediakan komponen toggle switch yang dapat disesuaikan. Package ini memungkinkan kita untuk membuat toggle switch dengan gaya berbeda, seperti toggle switch dengan warna latar belakang khusus, ukuran yang dapat diubah, dan tampilan animasi yang menarik. Dengan toggle_switch, kita dapat menciptakan toggle switch yang sesuai dengan desain aplikasi kita.

Cara Menggunakan toggle_switch Package

Langkah pertama adalah menambahkan package toggle_switch ke file pubspec.yaml Anda:

dependencies:
flutter:
sdk: flutter
toggle_switch: ^2.1.0

Setelah itu, jalankan flutter pub get untuk mengunduh dan memasang package tersebut.

Contoh Penggunaan

Berikut adalah contoh sederhana tentang cara menggunakan toggle_switch untuk membuat toggle switch dalam aplikasi Flutter:

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

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

@override
State<ArtikelPage21> createState() => _ArtikelPage21State();
}

class _ArtikelPage21State extends State<ArtikelPage21> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Toggle Switch’), centerTitle: true),
body: Center(
child: ToggleSwitch(
customWidths: [90.0, 50.0],
cornerRadius: 20.0,
activeBgColors: [
[Colors.cyan],
[Colors.redAccent]
],
activeFgColor: Colors.white,
inactiveBgColor: Colors.grey,
inactiveFgColor: Colors.white,
totalSwitches: 2,
labels: [‘YES’, ”],
icons: [null, Icons.abc],
onToggle: (index) {
print(‘switched to: $index’);
},
),
),
);
}
}

Berikut adalah visualisasinya :

Dalam contoh di atas, kita menggunakan toggle_switch untuk membuat toggle switch dengan dua pilihan: “Aktif” dan “Nonaktif”. Ketika pengguna menekan toggle switch, variabel _isToggled akan berubah, dan teks di bawah toggle switch akan berubah sesuai dengan status toggle.

Kesimpulan

toggle_switch adalah package Flutter yang memungkinkan kita untuk membuat toggle switch dengan gaya yang menarik dan dapat disesuaikan. Dalam artikel ini, kami telah membahas tentang toggle_switch, cara menggunakannya, dan memberikan contoh sederhana. Cobalah menggunakan toggle_switch dalam proyek Flutter Anda untuk memberikan pengalaman pengguna yang lebih baik dan menarik dalam beralih antara pilihan yang berbeda.