Cara Menggunakan Tombol Tersegmentasi di Flutter dengan Back4app

10min
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.
Lingkungan pengembangan Flutter yang sudah disiapkan di mesin lokal Anda. Ikuti panduan instalasi Flutter 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 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:
Bash
flutter create segmented_button_example
flutter create segmented_button_example
﻿
Tambahkan Dependensi: Buka pubspec.yaml dan tambahkan dependensi berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
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:
Dart
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(),
    );
  }
}
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:
Dart
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();
  }
}
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, dan untuk tips integrasi backend, kunjungi dokumentasi Back4app. Selamat coding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Membangun dan Menggunakan Ekstensi DevTools Flutter dengan Back4app
BERIKUTNYA
Mengumpulkan Umpan Balik Pengguna di Flutter Menggunakan Komponen Umpan Balik dan Menyimpan Data di Back4app