Cara Menggunakan Tombol Tersegmentasi di Flutter dengan Back4app

pendahuluan tombol tersegmentasi adalah komponen ui yang diperkenalkan dalam material 3 yang memungkinkan pengguna untuk memilih dari dua hingga lima opsi mereka sangat berguna ketika anda ingin menawarkan serangkaian pilihan eksklusif atau non eksklusif dengan cara yang bersih dan terorganisir dalam tutorial ini, kita akan menjelajahi cara menggunakan tombol tersegmentasi dalam aplikasi flutter, memanfaatkan back4app sebagai backend untuk menyimpan dan mengelola opsi yang dipilih prasyarat sebelum memulai, pastikan anda memiliki hal hal berikut akun back4app daftar untuk akun gratis di back4app com https //www back4app com lingkungan pengembangan flutter yang sudah disiapkan di mesin lokal anda ikuti panduan instalasi flutter https //flutter dev/docs/get started/install jika anda belum menyiapkannya pengetahuan dasar tentang dart, widget flutter, dan menggunakan back4app untuk layanan backend langkah 1 – menyiapkan backend back4app anda buat proyek back4app masuk ke akun back4app anda https //www back4app com/ dan buat proyek baru buat kelas parse untuk tutorial ini, buat kelas parse bernama userpreferences untuk menyimpan opsi yang dipilih dari tombol tersegmentasi username (string) nama pengguna selectedoption (string) opsi yang dipilih oleh pengguna dapatkan kredensial back4app anda arahkan ke pengaturan proyek anda untuk mengambil id aplikasi dan kunci klien anda, yang perlu anda sambungkan ke aplikasi flutter anda dengan back4app langkah 2 – menyiapkan proyek flutter buat proyek flutter baru buka terminal atau command prompt anda dan jalankan flutter create segmented button example tambahkan dependensi buka pubspec yaml dan tambahkan dependensi berikut dependencies flutter sdk flutter parse server sdk flutter latest version jalankan flutter pub get untuk menginstal dependensi ini inisialisasi parse di aplikasi anda di lib/main dart , inisialisasi sdk parse import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home preferencescreen(), ); } } ganti 'your back4app app id' dan 'your back4app client key' dengan kredensial back4app anda yang sebenarnya langkah 3 – mengimplementasikan tombol tersegmentasi buat widget preferencescreen di lib/main dart , tambahkan widget baru untuk menampilkan dan menangani tombol tersegmentasi class preferencescreen extends statefulwidget { @override preferencescreenstate createstate() => preferencescreenstate(); } class preferencescreenstate extends state\<preferencescreen> { string? selectedoption; final list\<buttonsegment\<string>> options = \[ buttonsegment(value 'option 1', label text('option 1')), buttonsegment(value 'option 2', label text('option 2')), buttonsegment(value 'option 3', label text('option 3')), ]; @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('user preferences')), body padding( padding const edgeinsets all(16 0), child column( mainaxisalignment mainaxisalignment center, children \[ segmentedbutton\<string>( segments options, selected selectedoption == null ? {} { selectedoption!}, onselectionchanged (newselection) { setstate(() { selectedoption = newselection first; }); savepreference( selectedoption!); }, ), sizedbox(height 20), if ( selectedoption != null) text('selected $ selectedoption', style textstyle(fontsize 16)), ], ), ), ); } future\<void> savepreference(string selectedoption) async { final userpreference = parseobject('userpreferences') set('username', 'test user') // this would normally come from user data set('selectedoption', selectedoption); await userpreference save(); } } kode ini mendefinisikan ui sederhana dengan tombol tersegmentasi yang memungkinkan pengguna memilih dari tiga opsi opsi yang dipilih disimpan di back4app setiap kali pemilihan berubah langkah 4 – menjalankan aplikasi jalankan aplikasi anda menggunakan flutter run anda seharusnya melihat tombol tersegmentasi ditampilkan di layar memilih opsi akan memperbarui status dan menyimpan pemilihan di back4app verifikasi data di back4app dengan masuk ke dasbor back4app anda dan memeriksa userpreferences kelas anda seharusnya melihat entri yang sesuai dengan pemilihan anda dari aplikasi flutter kesimpulan dalam tutorial ini, kami menjelajahi cara mengimplementasikan dan menggunakan tombol tersegmentasi di flutter kami juga menunjukkan cara mengintegrasikan flutter dengan back4app untuk menyimpan preferensi pengguna tombol tersegmentasi menawarkan cara yang bersih dan intuitif untuk menyajikan beberapa opsi kepada pengguna, dan ketika digabungkan dengan backend yang kuat seperti back4app, mereka dapat secara signifikan meningkatkan pengalaman pengguna aplikasi anda untuk informasi lebih lanjut tentang widget flutter, lihat dokumentasi flutter https //flutter dev/docs , dan untuk tips integrasi backend, kunjungi dokumentasi back4app https //www back4app com/docs selamat coding!