book_my_seat
This is a flutter package to create seat booking layout for bus, theatre, aeroplane etc. This gives you facility to select a seat by gestures like zoom-in, zoom-out, pan etc.
Some examples(below is for theatre but you can implement the package for bus etc also)
Example project and blog for better understanding 🚀
Getting Started 🤩
Add this dependency in your pubspec.yaml file
dependencies:
book_my_seat: <version number>
How to use ⌨️
First, import it:
import 'package:book_my_seat/book_my_seat.dart';
Simply create SeatLayoutWidget
widget and add the required parameters.
Example:
SeatLayoutWidget(
onSeatStateChanged: (rowIndex, colIndex, updatedSeatState) {
print("tapped $rowIndex $colIndex $updatedSeatState");
},
stateModel: SeatLayoutStateModel(
rows: 12,
cols: 15,
seatSvgSize: 30,
pathUnSelectedSeat: 'assets/svg_unselected_bus_seat.svg',
pathSelectedSeat: 'assets/svg_selected_bus_seat.svg',
pathSoldSeat: 'assets/svg_sold_bus_seat.svg',
pathDisabledSeat: 'assets/svg_disabled_bus_seat.svg',
currentSeatsState: <explained below>,
),
)
Parameters explained:
-
onSeatStateChanged:
- This is a callback method which gets called when user clicks on a seat which has current state equals to either SeatState.selected or SeatState.unselected. The params in this method are:
rowIndex - the index of the row where this seat is situated
colIndex - the index of the column where this seat is situated
updatedSeatState - this is the updated state of the seat after user clicks on the seat. It is an enum of typeSeatState
-
stateModel:
- It is an object of class SeatLayoutStateModel which describes the initial state of the whole layout(maybe bus or aeroplane or theatre). The params in this method are:
rows - number of rows in the area(I will refer bus/aeroplane/theatre etc as area from now onwards)
cols - number of columns in the area.
seatSvgSize - size of individual seat
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 typeList<List<SeatState>>
(SeatState enum is explained below). This describes the initial state of the area 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 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 itselected
- 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 userdisabled
- state when a seat is disabled and nobody can select itempty
- 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
.
Example project and blog for better understanding 🚀
Contributors 💻
Prateek Sharma - Linkedin | Github