How to Use Segmented Buttons in Flutter with Back4app

10min
Introduction
Segmented Buttons are a UI component introduced in Material 3 that allows users to select from two to five options. They are particularly useful when you want to offer a set of exclusive or non-exclusive choices in a clean, organized manner. In this tutorial, we will explore how to use Segmented Buttons in a Flutter app, leveraging Back4app as a backend to store and manage the selected options.
Prerequisites
Before starting, ensure you have the following:
A Back4app account. Sign up for a free account at Back4app.com.
A Flutter development environment set up on your local machine. Follow the Flutter installation guide if you haven't set it up yet.
Basic knowledge of Dart, Flutter widgets, and using Back4app for backend services.
Step 1 – Setting Up Your Back4app Backend
Create a Back4app Project: Log in to your Back4app account and create a new project.
Create Parse Classes: For this tutorial, create a Parse Class named UserPreferences to store the selected options from the Segmented Buttons:
username (String): The name of the user.
selectedOption (String): The option selected by the user.
Get Your Back4app Credentials: Navigate to your project settings to retrieve your Application ID and Client Key, which you’ll need to connect your Flutter app to Back4app.
Step 2 – Setting Up the Flutter Project
Create a New Flutter Project: Open your terminal or command prompt and run:
Bash
flutter create segmented_button_example
flutter create segmented_button_example
﻿
Add Dependencies: Open pubspec.yaml and add the following dependencies:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Run flutter pub get to install these dependencies.
Initialize Parse in Your App: In lib/main.dart, initialize the 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(),
    );
  }
}
﻿
Replace 'YOUR_BACK4APP_APP_ID' and 'YOUR_BACK4APP_CLIENT_KEY' with your actual Back4app credentials.
Step 3 – Implementing Segmented Buttons
Create the PreferenceScreen Widget: In lib/main.dart, add a new widget to display and handle the Segmented Buttons:
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();
  }
}
﻿
This code defines a simple UI with a Segmented Button allowing users to choose from three options. The selected option is stored in Back4app whenever the selection changes.
Step 4 – Running the App
Run your app using flutter run. You should see the Segmented Buttons displayed on the screen. Selecting an option will update the state and store the selection in Back4app.
Verify the data in Back4app by logging into your Back4app dashboard and checking the UserPreferences class. You should see entries corresponding to your selections from the Flutter app.
Conclusion
In this tutorial, we explored how to implement and use Segmented Buttons in Flutter. We also demonstrated how to integrate Flutter with Back4app to store user preferences. Segmented Buttons offer a clean and intuitive way to present users with multiple options, and when combined with a powerful backend like Back4app, they can significantly enhance your app's user experience.
For more information on Flutter widgets, check out the Flutter documentation, and for backend integration tips, visit the Back4app documentation. Happy coding!
Updated 27 Aug 2024
Did this page help you?
Building and Using a Flutter DevTools Extension with Back4app
Collecting User Feedback in Flutter Using the Feedback Component and Storing Data on Back4app