Comment utiliser des boutons segmentés dans Flutter avec Back4app

10min
Introduction
Les Boutons Segmentés sont un composant UI introduit dans Material 3 qui permet aux utilisateurs de sélectionner entre deux et cinq options. Ils sont particulièrement utiles lorsque vous souhaitez offrir un ensemble de choix exclusifs ou non exclusifs de manière claire et organisée. Dans ce tutoriel, nous allons explorer comment utiliser les Boutons Segmentés dans une application Flutter, en utilisant Back4app comme backend pour stocker et gérer les options sélectionnées.
Prérequis
Avant de commencer, assurez-vous d'avoir ce qui suit :
Un compte Back4app. Inscrivez-vous pour un compte gratuit sur Back4app.com.
Un environnement de développement Flutter configuré sur votre machine locale. Suivez le guide d'installation de Flutter si vous ne l'avez pas encore configuré.
Connaissances de base en Dart, widgets Flutter et utilisation de Back4app pour les services backend.
Étape 1 – Configuration de votre backend Back4app
Créer un projet Back4app: Connectez-vous à votre compte Back4app et créez un nouveau projet.
Créer des classes Parse: Pour ce tutoriel, créez une classe Parse nommée UserPreferences pour stocker les options sélectionnées des Boutons Segmentés :
nom d'utilisateur (String) : Le nom de l'utilisateur.
optionSélectionnée (String) : L'option sélectionnée par l'utilisateur.
Obtenez vos identifiants Back4app: Accédez aux paramètres de votre projet pour récupérer votre ID d'application et votre clé client, dont vous aurez besoin pour connecter votre application Flutter à Back4app.
Étape 2 – Configuration du projet Flutter
Créer un nouveau projet Flutter: Ouvrez votre terminal ou invite de commande et exécutez :
Bash
flutter create segmented_button_example
flutter create segmented_button_example
﻿
Ajouter des dépendances: Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Exécutez flutter pub get pour installer ces dépendances.
Initialiser Parse dans votre application: Dans lib/main.dart, initialisez le 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(),
    );
  }
}
﻿
Remplacez 'YOUR_BACK4APP_APP_ID' et 'YOUR_BACK4APP_CLIENT_KEY' par vos véritables identifiants Back4app.
Étape 3 – Implémentation des Boutons Segmentés
Créer le Widget PreferenceScreen: Dans lib/main.dart, ajoutez un nouveau widget pour afficher et gérer les Boutons Segmentés :
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();
  }
}
﻿
Ce code définit une interface utilisateur simple avec un bouton segmenté permettant aux utilisateurs de choisir parmi trois options. L'option sélectionnée est stockée dans Back4app chaque fois que la sélection change.
Étape 4 – Exécution de l'application
Exécutez votre application en utilisant flutter run. Vous devriez voir les boutons segmentés affichés à l'écran. Sélectionner une option mettra à jour l'état et stockera la sélection dans Back4app.
Vérifiez les données dans Back4app en vous connectant à votre tableau de bord Back4app et en vérifiant la UserPreferences classe. Vous devriez voir des entrées correspondant à vos sélections de l'application Flutter.
Conclusion
Dans ce tutoriel, nous avons exploré comment implémenter et utiliser des boutons segmentés dans Flutter. Nous avons également démontré comment intégrer Flutter avec Back4app pour stocker les préférences des utilisateurs. Les boutons segmentés offrent un moyen clair et intuitif de présenter plusieurs options aux utilisateurs, et lorsqu'ils sont combinés avec un backend puissant comme Back4app, ils peuvent considérablement améliorer l'expérience utilisateur de votre application.
Pour plus d'informations sur les widgets Flutter, consultez la documentation Flutter, et pour des conseils sur l'intégration backend, visitez la documentation Back4app. Bon codage!
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Construire et utiliser une extension Flutter DevTools avec Back4app
Collecte de commentaires des utilisateurs dans Flutter à l'aide du composant Feedback et stockage des données sur Back4app