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.

" "

Read my article with example

Add this dependency in your pubspec.yaml file

dependencies:
  book_my_seat: <version number>

import 'package:book_my_seat/book_my_seat.dart';

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>,
  ),
)

• 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).

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.

Read my article with example

Prateek Sharma - Linkedin | Github