GitLocker: The Coding Marketplace

Description:

book my seat

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 🚀 #
Read my article with example
Getting Started 🤩 #
Add this dependency in your pubspec.yaml file
dependencies:
book_my_seat: <version number>
copied to clipboard
How to use ⌨️ #
First, import it:
import 'package:book_my_seat/book_my_seat.dart';
copied to clipboard
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>,
),
)
copied to clipboard
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 type SeatState

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 type List<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 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.
Example project and blog for better understanding 🚀 #
Read my article with example
Contributors 💻 #
Prateek Sharma - Linkedin | Github
If you like this package, please do a thumbs up on it on pub.dev, give star on github and you can buy me a coffee also 🙏👇 #