Flutter SegmentedButton | Movie Ticket Booking

Flutter SegmentedButton :

Flutter SegmentedButton concept is explained in this blog with the help of a movie ticket booking example.

In Flutter, a segmented button is a UI element that presents a set of options to the user in a segmented control format. Segmented buttons are similar to radio buttons but have a different visual appearance.

They are commonly used in mobile applications to allow users to choose from a set of mutually exclusive options.

A SegmentedButton is a UI element that allows users to select from a group of options by clicking on one of several mutually exclusive buttons. The buttons are typically arranged horizontally or vertically and are visually separated from one another.

Flutter SegmentedButton Video Tutorial :

Go through the below tutorial for detailed implementation of Flutter SegmentedButton.

main.dart :

Let us start by creating enum and adding numbers in terms of words. So in this example we are considering movie ticket booking so i am considering numbers in enum.

enum Seats {one,two, three, four, five, six, seven, eight, nine, ten}

We will create a object using which we can store the selection made by user and specify a default value

Set<Seats> multipleSelection = <Seats>{Seats.four};

Now we will create a button inside the segment and this is how we need to provide necessary details

ButtonSegment(value: Seats.one, label: Text("1", style: TextStyle(fontSize: 20.0, color: Colors.black),)),

These ButtonSegments pile up to form a complete SegmentedButton

SegmentedButton(segments: const <ButtonSegment<Seats>>[
  ButtonSegment(value: Seats.one, label: Text("1", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
  ButtonSegment(value: Seats.two, label: Text("2", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
  ButtonSegment(value: Seats.three, label: Text("3", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
  ButtonSegment(value: Seats.four, label: Text("4", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
  ButtonSegment(value: Seats.five, label: Text("5", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
],

Make use of the object we have created earlier

selected: multipleSelection,

When user tap’s on the ButtonSegment we will track down the selection as below

onSelectionChanged: (Set<Seats> newSelection){
  setState(() {
    multipleSelection = newSelection;
  });
},

Also you need to enable multi selection to such that user can select multiple buttons.

multiSelectionEnabled: true,

Now we have got a list of selections user made which can be used as per your requirement.

We are now creating multiple SegmentedButton to create two rows.

Complete code for SegmentedButton

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

enum Seats {one,two, three, four, five, six, seven, eight, nine, ten}

class _MyAppState extends State<MyApp> {

  Set<Seats> multipleSelection = <Seats>{Seats.four};

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text("Book Your Ticket"),),
        body: Column(
          children: [
            SizedBox(height: 40,),
            Image.asset('images/screen.png'),
            SizedBox(height: 30,),
            SegmentedButton(segments: const <ButtonSegment<Seats>>[
              ButtonSegment(value: Seats.one, label: Text("1", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
              ButtonSegment(value: Seats.two, label: Text("2", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
              ButtonSegment(value: Seats.three, label: Text("3", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
              ButtonSegment(value: Seats.four, label: Text("4", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
              ButtonSegment(value: Seats.five, label: Text("5", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
            ], selected: multipleSelection,
            onSelectionChanged: (Set<Seats> newSelection){
              setState(() {
                multipleSelection = newSelection;
              });
            },
            multiSelectionEnabled: true,),
            SegmentedButton(segments: const <ButtonSegment<Seats>>[
              ButtonSegment(value: Seats.six, label: Text("6", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
              ButtonSegment(value: Seats.seven, label: Text("7", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
              ButtonSegment(value: Seats.eight, label: Text("8", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
              ButtonSegment(value: Seats.nine, label: Text("9", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
              ButtonSegment(value: Seats.ten, label: Text("10", style: TextStyle(fontSize: 20.0, color: Colors.black),)),
            ], selected: multipleSelection,
              onSelectionChanged: (Set<Seats> newSelection){
                setState(() {
                  multipleSelection = newSelection;
                });
              },
              multiSelectionEnabled: true,)
          ],
        ),
      ),
    );
  }
}

If you have any query’s in this tutorial on Flutter SegmentedButton do let us know in the comment section below.If you like this tutorial do like and share us for more interesting updates.