Venue Layout

Build the room. Pick the seat.

A full-featured seating-plan editor, viewer and customer picker for Flutter and the web. Design tables and custom layouts, arrange an entire venue, and let guests choose their places from the same portable plan.

Built for Festapp. Use it independently in your own app, with your own backend, branding and booking flow.

Flutter package: venue_seat_picker · JavaScript package: @festapp/venue-layout.

Try the interactive demo · Flutter package · JavaScript integration

Create the whole venue: tables, chairs, custom outlines, curved rows, standing areas, couches, buses and train carriages.
Edit faster: drag and drop, animated chair layout, Ctrl-drag copies, multi-selection, shared styling and undo/redo.
Start with a template: editable balls, halls, theatres, conferences, lounges and transport layouts, with fresh identities for every plan.
Let guests choose: zoomable Flutter and JavaScript pickers, async selection, pending feedback, rejection rollback and standing quantities.
Make it yours: light/dark themes, English/Czech localization, host-supplied availability and prices, and portable JSON with local font/image resources.

What this repository provides

Flutter editor and picker: venue_seat_picker, including the template gallery, editing controller, customer selection and native/web rendering.
Portable geometry: venue_layout_core, the shared document, geometry, display lists and selection rules used by Flutter and the JavaScript kernel.
JavaScript viewer and picker: @festapp/venue-layout, an SVG consumer for web applications that use their own backend and booking flow.
Runnable examples: the Flutter studio, standalone JavaScript demo and recorded workflows below.

The package manages plans and selection UI. Your application manages live availability, prices, reservation locks, orders and payments.

Start with a ready-made plan

From halls and theatres to buses and train carriages, choose an editable starting plan and adapt it to your event. Here is the development template catalog:

Ready-to-edit venue templates for halls, cinemas, conferences and transport

See it in action

Six focused workflows, recorded on 21 October 2026 from the 0.3 editor in light mode with English captions. The hosted demo and registry releases are updated separately. Video downloads and captions.

Place a table. Make it yours.

Drag a table onto the plan, add and remove chairs, then try a round shape. Seats animate into place as you edit.

Drag a table onto the plan and customize its chairs and shape

Build and style a whole row

Hold Ctrl to drag out copies. Select the row and give every table a coordinated appearance in one step.

Ctrl-drag copies and style the whole row together

Draw the table your room needs

Paint a connected custom outline, then click to add chairs one by one around its perimeter.

Paint a custom table and add chairs individually

Shape the audience around the stage

Drag curved seating into the center of the plan. Add or remove rows and columns, adjust the curvature, then try selecting a place in the Flutter viewer.

Drag an arc into the center, reshape the rows and try seat selection

Give transport its own style

Drag in a complete bus layout and switch to coordinated transport seating with a different palette. Ready-made components can match your application.

Style a ready-made bus with coordinated transport seats

Choose places. Review tickets.

Follow the complete mobile flow: zoom into the plan, choose seats, check the count and price, then review the selected places in one clean summary.

Choose seats and review the selected places and total on a phone

Start building

Add the package to your Flutter application's pubspec.yaml:

dependencies:
  venue_seat_picker: ^0.4.7

Version 0.4.4 supports Dart 3.12+ and Flutter 3.44+. See SDK and dependency compatibility for the source compatibility contract, host theming and localization.

The object API uses VenueLayoutController, VenueLayoutEditor, VenueLayoutViewer and VenueLayoutPicker. Flutter and the JavaScript SVG consumer share the Dart layout core for geometry, scene rendering and hit tests.

import 'package:venue_seat_picker/venue_seat_picker.dart';

final resources = await loadLayoutFixtureResources();
final controller = VenueLayoutController(
  VenueLayoutTemplates.create('studio-tables'),
  resources: resources,
);

// Place inside a bounded widget, such as Scaffold.body.
VenueLayoutEditor(controller: controller);
// Dispose the controller when its owning State closes.

To try the object editor from this repository:

git clone https://github.com/festappnet/venue_seat_picker.git
cd venue_seat_picker
fvm install
python3 tool/configure_workspace.py
fvm flutter pub get
cd example
fvm flutter pub get
fvm flutter run -d chrome

The source checkout resolves its layout core locally. Use VenueLayoutTemplates.all to discover templates and create(id) to create a fresh plan. The full example includes the template gallery, autosave, portable import/export and Flutter/web previews.

For a read-only view, pass the same document and resources to VenueLayoutViewer. Use VenueLayoutPicker with onSelectionRequested for customer selection, or mount the JavaScript picker in a web app. The original VenueSeat* grid API remains available for grid-based integrations.

Touch selection

Grid and object surfaces resolve completed taps with an 8 logical pixel radial margin, independent of camera zoom. Exact targets win; otherwise the nearest real outline wins in paint order. Availability and pending targets stay in the resolution so an unavailable seat cannot select a farther free seat. Existing handlers own feedback, reservation and rollback; semantic seat activation uses the same handler as coordinate taps.

In the object editor, the same margin selects objects on pointer down and starts object drags, double-click editing and context menus. A slight movement beside a thin stroke therefore moves that object rather than navigating. Empty space beyond the margin pans by touch or starts mouse marquee selection. Handles and drawing tools retain their own hit geometry. Two fingers own navigation until the entire pointer sequence ends; cancel restores an unfinished edit. Architectural decoration is selected by its outline and must be enclosed to join a marquee selection.

Integrate with your app

The package owns layout geometry, rendering, editing history and selection UI. Your application owns pricing, live availability, authorization, reservation locking, orders and payments. Failed or rejected async selection requests roll back the optimistic UI; a visual selection does not create a reservation.

Licensed local font fixtures are included for examples. Hosts can supply their own font/image resources without runtime font downloads.

Task	Guide
Run the complete object editor and previews	Example studio
Embed the JavaScript viewer/picker	Web integration
Connect availability and reservations	Backend integration
Persist drafts and understand JSON	Editing and serialization
Customize appearance	Theming
Maintain a grid-based integration	Getting started
Work with the shared layout model	Core contract and operations

Hosted interactive demo · Issues · Contributing · Security

Licensed under the MIT License.

Flutter UI types in 0.4

The Flutter wrapper uses standalone material_ui, which supplies its Cupertino dependencies. The source supports Flutter 3.44+; development builds use Flutter 3.47.7. Use their widgets/themes in the host and include VenueLayoutLocalizations.localizationsDelegates. The public geometry, resource, reservation and serialization contracts remain unchanged. The external flutter_colorpicker is isolated behind the SDK Material compatibility bridge.