Di più
Come utilizzare i pulsanti segmentati in Flutter con Back4App?

10min
Introduzione
I Pulsanti Segmentati sono un componente UI introdotto in Material 3 che consente agli utenti di selezionare da due a cinque opzioni. Sono particolarmente utili quando si desidera offrire un insieme di scelte esclusive o non esclusive in modo pulito e organizzato. In questo tutorial, esploreremo come utilizzare i Pulsanti Segmentati in un'app Flutter, sfruttando Back4app come backend per memorizzare e gestire le opzioni selezionate.
Requisiti
Prima di iniziare, assicurati di avere quanto segue:
Un account Back4app. Registrati per un account gratuito su Back4app.com.
Un ambiente di sviluppo Flutter configurato sul tuo computer locale. Segui la guida all'installazione di Flutter se non l'hai ancora configurato.
Conoscenze di base di Dart, widget Flutter e utilizzo di Back4app per i servizi backend.
Passo 1 – Configurare il tuo backend Back4app
Crea un Progetto Back4app: Accedi al tuo account Back4app e crea un nuovo progetto.
Crea Classi Parse: Per questo tutorial, crea una Classe Parse chiamata UserPreferences per memorizzare le opzioni selezionate dai Pulsanti Segmentati:
username (String): Il nome dell'utente.
selectedOption (String): L'opzione selezionata dall'utente.
Ottieni le tue Credenziali Back4app: Naviga nelle impostazioni del tuo progetto per recuperare il tuo ID Applicazione e la Chiave Client, che ti serviranno per connettere la tua app Flutter a Back4app.
Passo 2 – Configurazione del Progetto Flutter
Crea un Nuovo Progetto Flutter: Apri il tuo terminale o prompt dei comandi e esegui:
Bash
flutter create segmented_button_example
flutter create segmented_button_example
﻿
Aggiungi Dipendenze: Apri pubspec.yaml e aggiungi le seguenti dipendenze:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Esegui flutter pub get per installare queste dipendenze.
Inizializza Parse nella tua app: In lib/main.dart, inizializza il SDK di 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(),
    );
  }
}
﻿
Sostituisci 'YOUR_BACK4APP_APP_ID' e 'YOUR_BACK4APP_CLIENT_KEY' con le tue credenziali effettive di Back4app.
Passo 3 – Implementazione dei Pulsanti Segmentati
Crea il Widget PreferenceScreen: In lib/main.dart, aggiungi un nuovo widget per visualizzare e gestire i Pulsanti Segmentati:
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();
  }
}
﻿
Questo codice definisce un'interfaccia utente semplice con un Pulsante Segmentato che consente agli utenti di scegliere tra tre opzioni. L'opzione selezionata viene memorizzata in Back4app ogni volta che la selezione cambia.
Passo 4 – Esecuzione dell'App
Esegui la tua app utilizzando flutter run. Dovresti vedere i Pulsanti Segmentati visualizzati sullo schermo. Selezionare un'opzione aggiornerà lo stato e memorizzerà la selezione in Back4app.
Verifica i dati in Back4app accedendo al tuo dashboard di Back4app e controllando la UserPreferences classe. Dovresti vedere voci corrispondenti alle tue selezioni dall'app Flutter.
Conclusione
In questo tutorial, abbiamo esplorato come implementare e utilizzare i Pulsanti Segmentati in Flutter. Abbiamo anche dimostrato come integrare Flutter con Back4app per memorizzare le preferenze degli utenti. I Pulsanti Segmentati offrono un modo pulito e intuitivo per presentare agli utenti più opzioni e, quando combinati con un backend potente come Back4app, possono migliorare significativamente l'esperienza utente della tua app.
Per ulteriori informazioni sui widget Flutter, dai un'occhiata alla documentazione di Flutter, e per suggerimenti sull'integrazione del backend, visita la documentazione di Back4app. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Crea e usa un'estensione Flutter DevTools con Back4app
AVANTI IL PROSSIMO
Raccolta del feedback degli utenti in Flutter utilizzando il componente Feedback e archiviazione dei dati su Back4app