How to use SegmentedButton in Flutter
Flutter is a powerful toolkit created by Google to build fast mobile, web, and desktop applications using just one Codebase. It offers an easy-to-use and flexible development environment, making it a popular choice for developers to create beautiful and responsive user interfaces across multiple platforms.
Segmented button
A segmented button is a Material button that allows the user to select from a limited set of options. Segmented buttons assist with selecting choices, switching options, or sorting elements. They are typically utilized in situations where there are just 2–5 options.
Creating a SegmentedButton
Follow the steps mentioned below to create a segmented button in a Flutter application:
1. Create a Flutter project
Let’s start by creating a new Flutter project. For this, open the terminal and execute the following commands:
flutter create segmentedbuttoncd segmentedbutton
2. Create the user interface
Let’s create a simple SegmentedButton inside the Choices class in the main.dart file. Here is the code:
SegmentedButton<Sizes>(segments: const <ButtonSegment<Sizes>>[ButtonSegment<Sizes>(value: Sizes.extraSmall, label: Text('XS')),ButtonSegment<Sizes>(value: Sizes.small, label: Text('S')),ButtonSegment<Sizes>(value: Sizes.medium, label: Text('M')),ButtonSegment<Sizes>(value: Sizes.large, label: Text('L')),ButtonSegment<Sizes>(value: Sizes.extraLarge, label: Text('XL')),],selected: selection,onSelectionChanged: (Set<Sizes> newSelection) {setState(() {selection = newSelection;});},multiSelectionEnabled: false,);
In the above code, we create a SegmentedButton and define the segments inside it using the ButtonSegment property, which requires a value and a label (lines 3–7). We also disable the selection of multiple options by setting the multiSelectionEnabled to false, which will allow us to select only one option at a time (line 15).
Now, inside the MyApp class, we create a column to display the options by calling the Choices class. We also give a heading of Multiple choice in lines 13–14 of the following code:
class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(useMaterial3: true),home: const Scaffold(body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[SizedBox(height: 20),Text('Multiple choice'),Choices(),],),),),);}}
3. Complete implementation
The following is the complete code of the Flutter application with the implementation of SegmentedButton:
IyBUaGlzIGZpbGUgY29uZmlndXJlcyB0aGUgYW5hbHl6ZXIsIHdoaWNoIHN0YXRpY2FsbHkgYW5hbHl6ZXMgRGFydCBjb2RlIHRvCiMgY2hlY2sgZm9yIGVycm9ycywgd2FybmluZ3MsIGFuZCBsaW50cy4KIwojIFRoZSBpc3N1ZXMgaWRlbnRpZmllZCBieSB0aGUgYW5hbHl6ZXIgYXJlIHN1cmZhY2VkIGluIHRoZSBVSSBvZiBEYXJ0LWVuYWJsZWQKIyBJREVzIChodHRwczovL2RhcnQuZGV2L3Rvb2xzI2lkZXMtYW5kLWVkaXRvcnMpLiBUaGUgYW5hbHl6ZXIgY2FuIGFsc28gYmUKIyBpbnZva2VkIGZyb20gdGhlIGNvbW1hbmQgbGluZSBieSBydW5uaW5nIGBmbHV0dGVyIGFuYWx5emVgLgoKIyBUaGUgZm9sbG93aW5nIGxpbmUgYWN0aXZhdGVzIGEgc2V0IG9mIHJlY29tbWVuZGVkIGxpbnRzIGZvciBGbHV0dGVyIGFwcHMsCiMgcGFja2FnZXMsIGFuZCBwbHVnaW5zIGRlc2lnbmVkIHRvIGVuY291cmFnZSBnb29kIGNvZGluZyBwcmFjdGljZXMuCmluY2x1ZGU6IHBhY2thZ2U6Zmx1dHRlcl9saW50cy9mbHV0dGVyLnlhbWwKCmxpbnRlcjoKICAjIFRoZSBsaW50IHJ1bGVzIGFwcGxpZWQgdG8gdGhpcyBwcm9qZWN0IGNhbiBiZSBjdXN0b21pemVkIGluIHRoZQogICMgc2VjdGlvbiBiZWxvdyB0byBkaXNhYmxlIHJ1bGVzIGZyb20gdGhlIGBwYWNrYWdlOmZsdXR0ZXJfbGludHMvZmx1dHRlci55YW1sYAogICMgaW5jbHVkZWQgYWJvdmUgb3IgdG8gZW5hYmxlIGFkZGl0aW9uYWwgcnVsZXMuIEEgbGlzdCBvZiBhbGwgYXZhaWxhYmxlIGxpbnRzCiAgIyBhbmQgdGhlaXIgZG9jdW1lbnRhdGlvbiBpcyBwdWJsaXNoZWQgYXQKICAjIGh0dHBzOi8vZGFydC1sYW5nLmdpdGh1Yi5pby9saW50ZXIvbGludHMvaW5kZXguaHRtbC4KICAjCiAgIyBJbnN0ZWFkIG9mIGRpc2FibGluZyBhIGxpbnQgcnVsZSBmb3IgdGhlIGVudGlyZSBwcm9qZWN0IGluIHRoZQogICMgc2VjdGlvbiBiZWxvdywgaXQgY2FuIGFsc28gYmUgc3VwcHJlc3NlZCBmb3IgYSBzaW5nbGUgbGluZSBvZiBjb2RlCiAgIyBvciBhIHNwZWNpZmljIGRhcnQgZmlsZSBieSB1c2luZyB0aGUgYC8vIGlnbm9yZTogbmFtZV9vZl9saW50YCBhbmQKICAjIGAvLyBpZ25vcmVfZm9yX2ZpbGU6IG5hbWVfb2ZfbGludGAgc3ludGF4IG9uIHRoZSBsaW5lIG9yIGluIHRoZSBmaWxlCiAgIyBwcm9kdWNpbmcgdGhlIGxpbnQuCiAgcnVsZXM6CiAgICAjIGF2b2lkX3ByaW50OiBmYWxzZSAgIyBVbmNvbW1lbnQgdG8gZGlzYWJsZSB0aGUgYGF2b2lkX3ByaW50YCBydWxlCiAgICAjIHByZWZlcl9zaW5nbGVfcXVvdGVzOiB0cnVlICAjIFVuY29tbWVudCB0byBlbmFibGUgdGhlIGBwcmVmZXJfc2luZ2xlX3F1b3Rlc2AgcnVsZQoKIyBBZGRpdGlvbmFsIGluZm9ybWF0aW9uIGFib3V0IHRoaXMgZmlsZSBjYW4gYmUgZm91bmQgYXQKIyBodHRwczovL2RhcnQuZGV2L2d1aWRlcy9sYW5ndWFnZS9hbmFseXNpcy1vcHRpb25zCg==
Note: You can find your application running at the given link once you run the code widget above.
Code explanation
Line 30: We define an enum called
Sizeswith different size options.Line 32: We define a
Choiceswidget class that extendsStatefulWidget. This widget holds the selected size(s).Lines 44–59: A
SegmentedButtonwidget presents segmented buttons for each size option defined in the enum. It manages the selected size(s) using theselectedparameter and updates the state when the selection changes using theonSelectionChangedcallback. ThemultiSelectionEnabledparameter in theSegmentedButtonconstructor is set tofalse, indicating that only one size can be selected at a time.
Free Resources
