Flutter插件meili_flutter的介绍与使用方法

Meili Flutter 插件简介

Meili Flutter 插件允许您将 Meili 的体验集成到您的 Flutter 应用程序中。通过该插件，您可以轻松实现卡支付、预订管理等功能。

功能特点

• 跨平台支持：Meili 插件支持 iOS 和 Android 平台。
• 可定制化 UI：提供强大的、可自定义的 UI 屏幕和元素，用于收集用户详细信息。
• 直接集成：与 Meili 直接集成，确保无缝的用户体验。
• 平台特定实现：为 iOS 和 Android 提供不同的实现，以确保每个平台的最佳性能。

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
    meili_flutter: ^1.0.0

运行以下命令以安装包：

flutter pub get

要求

• iOS 版本：16.0 或更高版本
• Android 版本：根据项目的最低 SDK 要求

iOS

与目标 iOS 16 或更高版本的 App 兼容。

在 project.pbxproj 中更新 iOS 部署目标为 13.0，或者在 Xcode 的 Build Settings 中进行设置。

更新 Podfile：

source 'https://github.com/meili-travel-tech/meili-ios-pods'

platform :ios, '16.0'

使用

卡支付

有三种处理卡支付的方法：

Meili Direct

要打开 Meili 的直接流视图，使用以下代码片段：

import 'package:meili_flutter/meili_flutter.dart';

void _openMeiliView() async {
    final params = MeiliParams(
      ptid: 'ptid',
      currentFlow: FlowType.direct,
      env: 'dev',
    );

    try {
      await Meili.openMeiliView(params);
    } catch (e) {
      print("Failed to open MeiliView: $e");
    }
}

Meili Booking Manager

要打开 Meili 的预订管理流视图，使用以下代码片段：

import 'package:meili_flutter/meili_flutter.dart';

void _openMeiliView() async {
    final params = MeiliParams(
      ptid: 'ptid',
      currentFlow: FlowType.bookingManager,
      env: 'dev',
      bookingParams: BookingParams(
        confirmationId: "1234ABCD",
        lastName: "Doe"
      )
    );

    try {
      await Meili.openMeiliView(params);
    } catch (e) {
      print("Failed to open MeiliView: $e");
    }
}

Meili Connect

要使用 MeiliConnectWidget，将其集成到您的小部件树中，并传递必要的参数：

import 'package:flutter/material.dart';
import 'package:meili_flutter/meili_flutter.dart';

MeiliConnectWidget(
  ptid: '100.10',
  env: 'dev',
  availParams: AvailParams(
    pickupLocation: 'BCN',
    dropoffLocation: 'BCN',
    pickupDate: '2025-01-01',
    pickupTime: '12:00',
    dropoffDate: '2025-01-07',
    dropoffTime: '12:00',
    driverAge: 25,
    currencyCode: 'EUR',
    residency: 'IE',
  )
);

错误处理

如果在尝试打开 Meili 视图时发生错误，将抛出 PlatformException，并且错误消息将打印到控制台。

平台支持

iOS

Meili 视图在 iOS 上受支持。iOS 的 MethodChannel 为 meili_flutter_ios。

Android

我们正在努力将 Meili Android SDK 集成到 Meili Flutter 插件中。Meili 视图对 Android 的支持很快就会可用。在此期间，尝试在 Android 上打开 Meili 视图可能会导致 PlatformException，错误消息为 “Android platform view is not yet supported”。

示例代码

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

import 'package:flutter/cupertino.dart';
import 'package:meili_flutter/meili_flutter.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const CupertinoApp(home: TabHomePage());
  }
}

class TabHomePage extends StatefulWidget {
  const TabHomePage({super.key});

  [@override](/user/override)
  State<TabHomePage> createState() => _TabHomePageState();
}

class _TabHomePageState extends State<TabHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            label: 'Direct',
            icon: Icon(CupertinoIcons.arrow_right),
          ),
          BottomNavigationBarItem(
            label: 'Connect',
            icon: Icon(CupertinoIcons.link),
          ),
          BottomNavigationBarItem(
            label: 'Booking Manager',
            icon: Icon(CupertinoIcons.person),
          ),
        ],
      ),
      tabBuilder: (context, index) {
        switch (index) {
          case 0:
            return const MeiliDirectFlowButton();
          case 1:
            return const HomePage();
          case 2:
            return const MeiliBookingManagerFlowButton();
          default:
            return Container();
        }
      },
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('IN PATH BOOKING'),
      ),
      child: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Padding(
                padding: EdgeInsets.all(8),
                child: Text(
                  'Welcome to the Flutter Example App',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(8),
                child: Text(
                  'This is some dummy content above the MeiliView widget.',
                  style: TextStyle(fontSize: 16),
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(8),
                child: Text(
                  'More dummy content above the MeiliView widget.',
                  style: TextStyle(fontSize: 16),
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(8),
                child: Text(
                  'Even more dummy content above the MeiliView widget.',
                  style: TextStyle(fontSize: 16),
                ),
              ),

              // MeiliConnectWidget
              MeiliConnectWidget(
                ptid: '125.10',
                env: 'prod',
                availParams: AvailParams(
                  pickupLocation: 'MUC',
                  dropoffLocation: 'MUC',
                  pickupDate: '2025-01-01',
                  pickupTime: '12:00',
                  dropoffDate: '2025-01-07',
                  dropoffTime: '12:00',
                  driverAge: 25,
                  currencyCode: 'EUR',
                  residency: 'IE',
                ),
              ),

              // Dummy content below the MeiliView
              const Padding(
                padding: EdgeInsets.all(8),
                child: Text(
                  'This is some dummy content below the MeiliView widget.',
                  style: TextStyle(fontSize: 16),
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(8),
                child: Text(
                  'Enjoy exploring the app!',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(8),
                child: Text(
                  'Even more dummy content below the MeiliView widget.',
                  style: TextStyle(fontSize: 16),
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(8),
                child: Text(
                  'More dummy content below the MeiliView widget.',
                  style: TextStyle(fontSize: 16),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MeiliDirectFlowButton extends StatelessWidget {
  const MeiliDirectFlowButton({super.key});

  Future<void> _openMeiliView() async {
    final params = MeiliParams(
      ptid: '100.9',
      flow: FlowType.direct,
      env: 'dev',
    );

    try {
      await Meili.openMeiliView(params);
    } catch (e) {
      print('Failed to open MeiliView: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoButton(
      onPressed: _openMeiliView,
      child: const Text('Open Meili Direct'),
    );
  }
}

class MeiliBookingManagerFlowButton extends StatelessWidget {
  const MeiliBookingManagerFlowButton({super.key});

  Future<void> _openMeiliView() async {
    final params = MeiliParams(
      ptid: '100.9',
      flow: FlowType.bookingManager,
      env: 'dev',
    );

    try {
      await Meili.openMeiliView(params);
    } catch (e) {
      print('Failed to open MeiliView: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoButton(
      onPressed: _openMeiliView,
      child: const Text('Open Meili Booking Manager'),
    );
  }
}