Mehr
Wie man segmentierte Schaltflächen in Flutter mit Back4app verwendet

10min
Einführung
Segmentierte Schaltflächen sind eine UI-Komponente, die in Material 3 eingeführt wurde und es Benutzern ermöglicht, aus zwei bis fünf Optionen auszuwählen. Sie sind besonders nützlich, wenn Sie eine Reihe von exklusiven oder nicht-exklusiven Auswahlmöglichkeiten auf eine saubere, organisierte Weise anbieten möchten. In diesem Tutorial werden wir erkunden, wie man segmentierte Schaltflächen in einer Flutter-App verwendet, wobei wir Back4app als Backend nutzen, um die ausgewählten Optionen zu speichern und zu verwalten.
Voraussetzungen
Stellen Sie vor dem Start sicher, dass Sie Folgendes haben:
Ein Back4app-Konto. Melden Sie sich für ein kostenloses Konto an unter Back4app.com.
Eine Flutter-Entwicklungsumgebung, die auf Ihrem lokalen Computer eingerichtet ist. Folgen Sie der Flutter-Installationsanleitung , wenn Sie sie noch nicht eingerichtet haben.
Grundkenntnisse in Dart, Flutter-Widgets und der Verwendung von Back4app für Backend-Dienste.
Schritt 1 – Einrichten Ihres Back4app-Backends
Erstellen Sie ein Back4app-Projekt: Melden Sie sich bei Ihrem Back4app-Konto an und erstellen Sie ein neues Projekt.
Erstellen Sie Parse-Klassen: Erstellen Sie für dieses Tutorial eine Parse-Klasse mit dem Namen UserPreferences , um die ausgewählten Optionen aus den segmentierten Schaltflächen zu speichern:
Benutzername (String): Der Name des Benutzers.
AusgewählteOption (String): Die vom Benutzer ausgewählte Option.
Holen Sie sich Ihre Back4app-Anmeldeinformationen: Navigieren Sie zu Ihren Projekteinstellungen, um Ihre Anwendungs-ID und Ihren Client-Schlüssel abzurufen, die Sie benötigen, um Ihre Flutter-App mit Back4app zu verbinden.
Schritt 2 – Einrichten des Flutter-Projekts
Erstellen Sie ein neues Flutter-Projekt: Öffnen Sie Ihr Terminal oder die Eingabeaufforderung und führen Sie aus:
Bash
flutter create segmented_button_example
flutter create segmented_button_example
﻿
Abhängigkeiten hinzufügen: Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Führen Sie flutter pub get aus, um diese Abhängigkeiten zu installieren.
Initialisieren Sie Parse in Ihrer App: In lib/main.dart, initialisieren Sie das Parse SDK:
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(),
    );
  }
}
﻿
Ersetzen Sie 'YOUR_BACK4APP_APP_ID' und 'YOUR_BACK4APP_CLIENT_KEY' durch Ihre tatsächlichen Back4app-Anmeldeinformationen.
Schritt 3 – Implementierung von Segmentierten Schaltflächen
Erstellen Sie das PreferenceScreen-Widget: In lib/main.dart, fügen Sie ein neues Widget hinzu, um die Segmentierten Schaltflächen anzuzeigen und zu verwalten:
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();
  }
}
﻿
Dieser Code definiert eine einfache Benutzeroberfläche mit einem Segmentierten Button, der es den Benutzern ermöglicht, aus drei Optionen zu wählen. Die ausgewählte Option wird in Back4app gespeichert, wann immer sich die Auswahl ändert.
Schritt 4 – Die App ausführen
Führen Sie Ihre App aus mit flutter run. Sie sollten die Segmentierten Buttons auf dem Bildschirm sehen. Die Auswahl einer Option aktualisiert den Status und speichert die Auswahl in Back4app.
Überprüfen Sie die Daten in Back4app indem Sie sich in Ihr Back4app-Dashboard einloggen und die UserPreferences-Klasse überprüfen. Sie sollten Einträge sehen, die Ihren Auswahlen aus der Flutter-App entsprechen.
Fazit
In diesem Tutorial haben wir untersucht, wie man Segmentierte Buttons in Flutter implementiert und verwendet. Wir haben auch demonstriert, wie man Flutter mit Back4app integriert, um Benutzereinstellungen zu speichern. Segmentierte Buttons bieten eine saubere und intuitive Möglichkeit, den Benutzern mehrere Optionen zu präsentieren, und in Kombination mit einem leistungsstarken Backend wie Back4app können sie das Benutzererlebnis Ihrer App erheblich verbessern.
Für weitere Informationen zu Flutter-Widgets, schauen Sie sich die Flutter-Dokumentation, und für Tipps zur Backend-Integration besuchen Sie die Back4app-Dokumentation. Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Erstellen und Verwenden einer Flutter DevTools-Erweiterung mit Back4app
ALS NÄCHSTES
Sammeln von Benutzerfeedback in Flutter mit der Feedback-Komponente und Speichern von Daten auf Back4app