Flutter座位预订管理插件seatsio的使用

描述

seatsio 是一个用于 Seatsio 的Flutter插件。它可以帮助你在Flutter应用中集成座位图。如果你想了解更多关于Seatsio SDK的信息，请访问 seats.io。

开始使用

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 seatsio 作为依赖项：

dependencies:
  flutter:
    sdk: flutter

  seatsio: ^0.4.0

2. 导入包

然后，在你的Dart文件中导入 seatsio 包：

import 'package:seatsio/seatsio.dart';

3. 配置图表

接下来，配置你的座位图并设置一些参数：

class _MyHomePageState extends State<MyHomePage> {
  SeatsioWebViewController? _seatsioController;
  final List<String> selectedObjectLabels = ['Try to click a seat object'];

  late SeatingChartConfig _chartConfig;

  @override
  void initState() {
    super.initState();

    _chartConfig = SeatingChartConfig.init().rebuild((b) => b
      ..workspaceKey = YourWorkspaceKey
      ..eventKey = YourEventKey
      ..session = "start");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 456,
              child: _buildSeatsioView(),
            ),
            SizedBox(
              height: 100,
              child: ListView.builder(
                  itemCount: selectedObjectLabels.length,
                  itemBuilder: (_, index) => Text(selectedObjectLabels[index])),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _loadSeatsio,
        child: Icon(Icons.refresh),
      ),
    );
  }

  Widget _buildSeatsioView() {
    return SeatsioWebView(
      onWebViewCreated: (controller) {
        print("[Seatsio]->[example]-> onWebViewCreated");
        _seatsioController = controller;
        _loadSeatsio();
      },
      onChartRendered: (_) =>
          print("[Seatsio]->[example]-> onChartRendered"),
      onChartRenderingFailed: () =>
          print("[Seatsio]->[example]-> onChartRenderingFailed"),
      onObjectSelected: (object, type) {
        print(
            "[Seatsio]->[example]-> onObjectSelected, label: ${object.label}");
        _selectSeat(object);
      },
      onObjectDeselected: (object, type) {
        print(
            "[Seatsio]->[example]-> onObjectDeselected, label: ${object.label}");
        _deselectSeat(object);
      },
      onHoldSucceeded: (objects, ticketTypes) {
        print(
            "[Seatsio]->[example]-> onObjectSelected, objects: $objects | ticket types: $ticketTypes");
      },
      onHoldTokenExpired: () {
        print("[Seatsio]->[example]-> onHoldTokenExpired");
      },
      onSessionInitialized: (holdToken) {
        print(
            "[Seatsio]->[example]-> onSessionInitialized, holdToken: $holdToken");
      },
    );
  }

  void _selectSeat(SeatsioObject object) {
    setState(() {
      selectedObjectLabels.add(object.label);
    });
  }

  void _deselectSeat(SeatsioObject object) {
    if (selectedObjectLabels.contains(object.label)) {
      setState(() {
        selectedObjectLabels.remove(object.label);
      });
    }
  }

  void _loadSeatsio() {
    final newChartConfig = _chartConfig.rebuild((b) => b..showLegend = false);
    _seatsioController?.reload(newChartConfig);
  }
}

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 seatsio 插件：

import 'package:built_collection/built_collection.dart';
import 'package:flutter/material.dart';
import 'package:seatsio/seatsio.dart';

const String YourWorkspaceKey = ""; // 替换为你的workspace key
const String YourEventKey = ""; // 替换为你的event key

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Seatsio Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Assign Seats Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  SeatsioWebViewController? _seatsioController;
  final List<String> selectedObjectLabels = ['Try to click a seat object'];

  late final SeatingChartConfig _chartConfig;

  @override
  void initState() {
    super.initState();

    _chartConfig = SeatingChartConfig.init().rebuild((b) => b
      ..workspaceKey = YourWorkspaceKey
      ..eventKey = YourEventKey
      ..pricing = ListBuilder<PricingForCategory>([
        PricingForCategory(
          (b) => b
            ..category = "expensive"
            ..price = 100,
        ),
      ])
      ..enableHoldSucceededCallback = true
      ..enableHoldFailedCallback = true
      ..enableHoldTokenExpiredCallback = true
      ..enableSessionInitializedCallback = true
      ..enableObjectClickedCallback =
          false // Set this to false if you want to have the objectToolTip to be shown
      ..session = "continue");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          SizedBox(
            height: 400,
            child: SeatsioWebView(
              onWebViewCreated: (controller) {
                print("[Seatsio]->[example]-> onWebViewCreated");
                _seatsioController = controller;
                _loadSeatsio();
              },
              onChartRendered: (_) =>
                  print("[Seatsio]->[example]-> onChartRendered"),
              onChartRenderingFailed: () =>
                  print("[Seatsio]->[example]-> onChartRenderingFailed"),
              onObjectSelected: (object, type) {
                print(
                    "[Seatsio]->[example]-> onObjectSelected, label: ${object.label}");
                _selectSeat(object);
              },
              onObjectDeselected: (object, type) {
                print(
                    "[Seatsio]->[example]-> onObjectDeselected, label: ${object.label}");
                _deselectSeat(object);
              },
              onHoldSucceeded: (objects, ticketTypes) {
                print(
                    "[Seatsio]->[example]-> onObjectSelected, objects: $objects | ticket types: $ticketTypes");
              },
              onHoldTokenExpired: () {
                print("[Seatsio]->[example]-> onHoldTokenExpired");
              },
              onSessionInitialized: (holdToken) {
                print(
                    "[Seatsio]->[example]-> onSessionInitialized, holdToken: $holdToken");
              },
            ),
          ),
          SizedBox(
            height: 100,
            child: ListView.builder(
              itemCount: selectedObjectLabels.length,
              itemBuilder: (_, index) => Text(selectedObjectLabels[index]),
            ),
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _loadSeatsio,
        child: Icon(Icons.refresh),
      ),
    );
  }

  void _selectSeat(SeatsioObject object) {
    setState(() {
      selectedObjectLabels.add(object.label);
    });
  }

  void _deselectSeat(SeatsioObject object) {
    if (selectedObjectLabels.contains(object.label)) {
      setState(() {
        selectedObjectLabels.remove(object.label);
      });
    }
  }

  void _loadSeatsio() {
    final newChartConfig = _chartConfig.rebuild((b) => b..showLegend = false);
    _seatsioController?.reload(newChartConfig);
  }
}

请确保替换 YourWorkspaceKey 和 YourEventKey 为你自己的Seatsio工作区和事件密钥。这个示例展示了如何初始化、加载和交互座位图，并处理各种回调函数。