How to Use Segmented Buttons in Flutter with Back4app

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 https //www back4app com a flutter development environment set up on your local machine follow the flutter installation guide https //flutter dev/docs/get started/install 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 https //www back4app com/ 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 flutter create segmented button example add dependencies open pubspec yaml and add the following dependencies 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 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 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 https //flutter dev/docs , and for backend integration tips, visit the back4app documentation https //www back4app com/docs happy coding!