Smart Seat Selector

A universal grid-based seat selection widget for Flutter supporting Cinemas, Buses, Flights, and Event halls with zoom and pan interaction.

Features

• 🎥 Universal Support: Works for Cinemas (Screens), Buses (Drivers), and Events (Stages).
• 👆 Interactive: Built-in Zoom & Pan (InteractiveViewer) for large seat maps.
• 🎨 Highly Customizable: Control colors, sizing, gap spacing, and selection limits.
• 🧠 Smart Logic: Automatically prevents selecting booked seats, aisles, or disabled seats.
• 📱 Responsive: Grid adapts to the data you pass.

Installation

Add this to your pubspec.yaml:

dependencies:
  smart_seat_selector: ^0.0.7

Usage

Import the package in your Dart code:

import 'package:smart_seat_selector/smart_seat_selector.dart';

1. Define Your Grid

The grid is a List<List<int>> where integers represent the state of each seat:

Value	State	Description
0	Gap / Aisle	Invisible space, not clickable.
1	Available	Selectable seat.
2	Booked	Occupied seat, not clickable.
3	Disabled	Blocked seat, visible but not clickable.

final List<List<int>> seatGrid = [
  [1, 1, 1, 0, 0, 1, 1, 1], // Row A
  [1, 1, 1, 0, 0, 1, 1, 1], // Row B
  [1, 1, 1, 0, 0, 2, 2, 1], // Row C (Some booked)
  [1, 1, 1, 0, 0, 2, 3, 3], // Row D (Some booked and Disabled)
];

2. Initialize Controller

Create a SeatController and pass your grid. You can also set the maximum allowed selection.

late SeatController controller;

@override
void initState() {
  super.initState();
  controller = SeatController(
    seatGrid: seatGrid,
    maxSelection: 3, // Limits user to 3 seats
  );
}

3. Display the Layout

Use the SeatLayout widget to render the grid.

SeatLayout(
  controller: controller,
  seatConfig: SeatLayoutConfig(
    seatSize: 40,
    selectedColor: Colors.red,
    bookedColor: Colors.grey,
    availableColor: Colors.blueAccent,
  ),
  onSeatStateChanged: (List<SeatPoint> selectedSeats) {
    // Returns a list of coordinates, e.g., [SeatPoint(0, 1), SeatPoint(0, 2)]
    print("Selected seats: $selectedSeats");
  },
)

Customization

You can fully customize the look using the SeatLayoutConfig class.

Property	Type	Default	Description
seatSize	double	40.0	Width and height of a single seat box.
gapSize	double	10.0	Spacing between rows and columns.
selectedColor	Color	Green	Background color when a seat is selected.
availableColor	Color	Grey[300]	Color for available seats.
bookedColor	Color	Grey[400]	Color for occupied/booked seats.
disabledColor	Color	Grey[200]	Color for disabled/blocked seats.
selectionBorderColor	Color	Dark Green	Border color when selected.
borderRadius	BorderRadius	8.0	Curves the corners of the seat box.
labelStyle	TextStyle?	null	Custom text style for seat labels (A1, B2).

License

This project is licensed under the MIT License - see the LICENSE file for details.