Helloooo again👋, in this article we are going to see how we can create a seat booking app with a flutter package book_my_seat 🚀 This package can be used to create seat booking layout for many places like bus, theatre, aeroplane etc.

In this article we will be building a seat booking layout for a bus 🚌 but if you want to see an example for a movie theatre 🎥, you can head over to this example of mine for theatre.

Our end output will be similar to this 👇

None
final seat layout
None

NOTE: check out this github example repo which have all of the code explained in this blog (if you stuck anywhere below) 😎

Step 1

Create a simple flutter project.(I am assuming you know how to do it 😊)

Step 2

Add the package book_my_seat in pubspec.yaml file 🚀

Step 3

An individual seat can have four states. We will be adding four svgs for each of those. These types are selected, unselected, sold and disabled.

  1. Selected — which you selected right now(in the app same session)
  2. Unselected — which is available and you can select and book that.
  3. Sold — which is already sold. Someone else have booked it.
  4. Disabled — which is disabled and nobody can book that. It can be a broke seat etc.

So, we need to create a folder named assets in the root level of the project. And just paste four .svg files for these seat types in the same folder.

After this, we need to declare this assets folder in pubspec.yaml like below:

And, now just do flutter pub get .

Step 4

In this step, we need to add flutter_svg package dependency to render SVGs on the seat widgets.

Pro tip: you can have more beautiful svgs to give the layout more better feel 🌻

Step 5 — The main code 👊

Code Explanation —

> NOTE: I will explain only main part of the widget. You can find the rest of the ui code for showing the legend and other buttons in main.dart of this example github repo.

> We are using SeatLayoutWidget for creating the main layout of the bus. Params passed in its constructor —

  • onSeatStateChanged — this is a callback method which gets called every time you click on a seat whose current state is either SeatState.selected or SeatState.unselected. The callback gets three params rowI, colI and seatState which describes row index, column index and the updated state respectively for that seat.
  • stateModel — It is of type SeatLayoutStateModel which describes the initial state of the whole bus layout. The params in this method are: rows — number of rows in the bus cols — number of columns in the bus seatSvgSize — size of individual seat widget pathUnSelectedSeat, pathSelectedSeat, pathSoldSeat, pathDisabledSeat — path of the svg assets you want to show for unselected(available), selected(by you right now), already sold and disabled(non-choosable) seats respectively currentSeatsState — this is the main parameter. It is a 2D list i.e. of type List<List<SeatState>>(SeatState enum is explained below). This describes the initial state of the bus i.e. state of each seat whether it is already sold or unselected(available) or selected by you or disabled(non-selectable).

SeatState enum:

It is a dart enum. This describes the current state of an individual seat. This currently holds 5 states unselected, selected, sold, disabled and empty. Brief description of each:

  • unselected - state when a seat is available and user can select it
  • selected - state when user has selected an unselected(available) seat (i.e. a seat which had its state == unselected)
  • sold - state when it is already sold to some other user
  • disabled - state when a seat is disabled and nobody can select it
  • empty - state of the cell in 2D area which is an empty place(consider vacant ground) in the bus/theatre/aeroplane etc. This can mimic staircase or aisle or some other place in the area where there are no seats

NOTE: User can only click on seats which have state equals to SeatState.selected or SeatState.unselected.

This is all about this package and its usage. If you have any questions or doubts, feel free to ask on this blog or any of my social networks mentioned below 👇

Links 🔗

> My all social links — https://linktr.ee/sharmaprateek196

> book_my_seat pub package — https://pub.dev/packages/book_my_seat

> Full code of this blog example — https://github.com/SharmaPrateek196/book_my_seat_example

❤️ Best thing is that you can clap 👏 on this blog as many as 50 times. So, go ahead and do so to appreciate my work if you like it ❤️

🚀 Another best thing you can do is to follow my medium profile to get updates when I publish a new blog 🚀