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 segmentedbutton
cd 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});
  @override
  Widget 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==
Implementation of the complete application

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 Sizes with different size options.

  • Line 32: We define a Choices widget class that extends StatefulWidget. This widget holds the selected size(s).

  • Lines 44–59: A SegmentedButton widget presents segmented buttons for each size option defined in the enum. It manages the selected size(s) using the selected parameter and updates the state when the selection changes using the onSelectionChanged callback. The multiSelectionEnabled parameter in the SegmentedButton constructor is set to false, indicating that only one size can be selected at a time.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved