Flutter UI组件库插件mirrorfly_uikit_plugin的使用

Flutter UI组件库插件mirrorfly_uikit_plugin的使用

镜头

ScreenShot

目录

  1. 引言
  2. 要求
  3. 集成
  4. 获取帮助

引言

Mirrorfly Flutter UIKit 插件是一组预构建的UI小部件，使您可以轻松地在应用程序内集成具有所有基本消息功能的聊天。我们的开发套件包括浅色和深色主题、文本字体、颜色等。您可以自定义这些组件以创建交互式的独特界面。

要求

Flutter要求
  • Visual Studio Code 或 Android Studio
  • Dart 2.19.1 或以上版本
  • Flutter 2.0.0 或更高版本
Android要求
  • Android Lollipop 5.0 (API Level 21) 或以上版本
  • Java 7 或更高版本
  • Gradle 4.1.0 或更高版本
iOS要求
  • iOS 12.1 或更新版本

第一步：让我们集成插件到Flutter

我们的Mirrorfly UIKit插件让您能够轻松初始化和配置聊天。通过服务器端，我们的解决方案确保了应用程序内的聊天最可靠的基础设施管理服务。此外，我们将告诉您如何在您的应用中安装聊天插件，以便获得更好的应用内聊天体验。

插件许可证密钥

请按照以下步骤获取您的许可证密钥：

  1. 注册一个免费的MirrorFly帐户，请访问注册页面，如果您已经有MirrorFly帐户，请登录。
  2. 登录后，您将进入MirrorFly帐户的“概览页面”，您可以在该页面找到进一步集成过程所需的许可证密钥。
  3. 从“应用信息”部分复制许可证密钥。

第二步：安装包

安装Mirrorfly UIKit插件是一个简单的过程。请按照以下步骤操作。

创建Android依赖

在您的Android文件夹下的根build.gradle文件中添加以下内容：

allprojects {
    repositories {
        google()
        mavenCentral()
        jcenter()
        maven {
            url "https://repo.mirrorfly.com/release"
        }
    }
}
创建iOS依赖

在您的ios/Podfile文件末尾添加以下代码：

post_install do |installer|
    installer.aggregate_targets.each do |target|
        target.xcconfigs.each do |variant, xcconfig|
        xcconfig_path = target.client_root + target.xcconfig_relative_path(variant)
        IO.write(xcconfig_path, IO.read(xcconfig_path).gsub("DT_TOOLCHAIN_DIR", "TOOLCHAIN_DIR"))
        end
    end
    
    installer.pods_project.targets.each do |target|
        flutter_additional_ios_build_settings(target)
        target.build_configurations.each do |config|
            config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.1'
            config.build_settings['ENABLE_BITCODE'] = 'NO'
            config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'
            config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
            config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = 'arm64'
            
                shell_script_path = "Pods/Target Support Files/#{target.name}/#{target.name}-frameworks.sh"
                if File::exist?(shell_script_path)
                    shell_script_input_lines = File.readlines(shell_script_path)
                    shell_script_output_lines = shell_script_input_lines.map { |line| line.sub("source=\"$(readlink \"${source}\")\"", "source=\"$(readlink -f \"${source}\")\"") }
                    File.open(shell_script_path, 'w') do |f|
                        shell_script_output_lines.each do |line|
                          f.write line
                        end
                    end
                end
            end
    end
end

然后，在Xcode中启用以下功能到您的项目中：

Goto Project -> Target -> Signing & Capabilities -> Click `+ Capability` at the top left corner -> Search for `App groups` and add the `App group capability`

注意：App Group必须与json配置文件中的iOSContainerId相同。参见集成步骤2。

Flutter

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

dependencies:
  mirrorfly_uikit_plugin: ^2.0.3

然后，在项目目录中运行flutter pub get命令。

第三步：在您的应用中使用Mirrorfly UIKit插件

您可以仅通过以下导入语句来使用所有类和方法：

import 'package:mirrorfly_uikit_plugin/mirrorfly_uikit';

集成

为了在Flutter中使用Mirrorfly UIKit插件的功能，您应该通过用户认证与Mirrorfly服务器初始化MirrorflyUikit实例。此实例基于已认证的用户账户与服务器进行通信，允许客户端应用程序使用Mirrorfly插件的功能。

以下是集成Mirrorfly UIkit插件的步骤：

第一步：初始化Mirrorfly UIKit插件

要在main.dart文件中的main函数中初始化插件，请在runApp()之前放置以下代码：

final navigatorKey = GlobalKey<NavigatorState>();
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  await MirrorflyUikit.instance.initUIKIT(
      licenseKey: 'Your_Mirrorfly_License_Key',
      googleMapKey: 'Your_Google_Map_Key_for_location_messages',
      iOSContainerID: 'Your_iOS_app_Container_id',
      navigatorKey: navigatorKey,
      enableLocalNotification: true);
  runApp(const MyApp());
}
第二步：添加配置json文件

注意：以前的方法是在assets文件夹下放置mirrorfly_config.json文件（assets/mirrorfly_config.json）已被移除。配置文件设置已移至新方法。

新方法

您现在可以为UIKIT插件中的UI页面添加内联样式和主题。AppStyleConfig类用于设置UIKIT页面的样式。

设置仪表板页面样式
AppStyleConfig.setDashboardStyle(const DashBoardPageStyle(tabItemStyle: TabItemStyle(textStyle: TextStyle(fontStyle: FontStyle.italic))));
设置聊天页面样式
AppStyleConfig.setChatPageStyle(const ChatPageStyle(messageTypingAreaStyle: MessageTypingAreaStyle(sentIconColor: Colors.blue)));

信息：上述代码示例设置了仪表板和聊天页面的样式。您可以在同一方法中使用不同的样式参数添加更多样式和定制。

第三步：登录/注册用户

使用以下方法在沙盒/生产模式下注册用户：

信息：除非注销会话，否则请注意不应在一个应用程序中多次调用注册方法。

注意：在注册/登录时，下面的login方法将接受可选参数fcmToken并传递它。连接将在登录完成后自动建立。

try {
    var response = await MirrorflyUikit.instance.login(userIdentifier: uniqueId, fcmToken: "Your Google FCM Token");
    debugPrint("register user $response");
    // {'status': true, 'message': 'Register Success};
} catch (e) {
  debugPrint(e.toString());
}
第四步：导航到聊天仪表板
Navigator.push(context, MaterialPageRoute(builder: (con) => const DashboardView(title: "Chats",)));

本地通知

要启用或禁用本地通知，请使用MirrorflyUikit.instance.initUIKIT中的enableLocalNotification参数。

您可以通过以下方式处理本地通知点击：

selectNotificationStream.stream.listen((String? jid) async {
// 'jid' 表示发送消息的用户JID。
// 您可以在此处自定义逻辑，或者像第4步所示那样导航到聊天页面。
});

远程推送通知

要配置远程推送通知，您可以在应用中设置firebase_messaging包，然后通过registerUser方法发送FCM令牌。

此外

  • 添加了handleReceivedMessage方法以接收来自FCM通知的聊天消息，特别适用于Android。
  • 对于iOS，您需要添加通知扩展服务并遵循通知服务类中提供的步骤。
import mirrorfly_plugin

override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
    self.contentHandler = contentHandler
    bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
    
    MirrorFlyNotification().handleNotification(notificationRequest: request, contentHandler: contentHandler, containerID: "containerID", licenseKey: "Your License Key")
    
}

第五步：语言支持

UIKit插件支持多种语言。您可以按如下方式设置插件的语言：

MaterialApp(
    navigatorKey: navigatorKey,
    themeMode: ThemeMode.dark,
    debugShowCheckedModeBanner: false,
    /// 更改LOCALE为'en'以查看英文本地化，'ar'为阿拉伯文，'hi'为印地文
    locale: const Locale('en'),
    /// 将支持的语言添加到应用程序
    supportedLocales: AppLocalizations.supportedLocales,
    localizationsDelegates: const [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
    ],
    /// 向应用程序添加导航观察器，以处理导航事件
    navigatorObservers: [
      MirrorFlyNavigationObserver()
    ],
    /// 向应用程序添加路由生成器，以处理路由
    onGenerateRoute: (settings) {
    switch (settings.name) {
        default:
          return mirrorFlyRoute(settings);
        }
    },
    theme: ThemeData(textTheme: GoogleFonts.latoTextTheme()),
    home: YOUR_HOME_PAGE);

第六步：添加您的语言支持

要添加您的语言支持，您可以将语言文件添加到assets/locale文件夹中。语言文件应命名为en.json表示英语，ar.json表示阿拉伯语，等等，并将其添加到AppLocalizations类中的支持语言中。

AppLocalizations.addSupportedLocales(const Locale("ar","UAE"));

第七步：登出

要登出用户，请使用以下方法：

MirrorflyUikit.instance.logoutFromUIKIT().then((value) {
    debugPrint("Logout Success");
}).catchError((er) {});

更多关于Flutter UI组件库插件mirrorfly_uikit_plugin的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI组件库插件mirrorfly_uikit_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


mirrorfly_uikit_plugin 是一个用于 Flutter 的 UI 组件库插件，旨在帮助开发者快速构建具有特定设计和功能的用户界面。以下是如何使用 mirrorfly_uikit_plugin 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 mirrorfly_uikit_plugin 的依赖。

dependencies:
  flutter:
    sdk: flutter
  mirrorfly_uikit_plugin: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入库

在你的 Dart 文件中导入 mirrorfly_uikit_plugin。

import 'package:mirrorfly_uikit_plugin/mirrorfly_uikit_plugin.dart';

3. 使用组件

mirrorfly_uikit_plugin 提供了多种预定义的 UI 组件，你可以直接在应用中使用这些组件。

示例：使用按钮组件

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MirrorFly UI Kit Example'),
      ),
      body: Center(
        child: MirrorFlyButton(
          text: 'Click Me',
          onPressed: () {
            print('Button Pressed!');
          },
        ),
      ),
    );
  }
}

示例：使用卡片组件

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MirrorFly UI Kit Example'),
      ),
      body: Center(
        child: MirrorFlyCard(
          child: Text('This is a card component'),
        ),
      ),
    );
  }
}

4. 自定义主题

mirrorfly_uikit_plugin 可能还支持自定义主题，以便你可以根据应用的需求调整组件的外观。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

5. 处理事件

许多组件都支持事件处理，例如按钮点击事件。你可以通过 onPressed 等回调函数来处理这些事件。

MirrorFlyButton(
  text: 'Click Me',
  onPressed: () {
    // 处理按钮点击事件
    print('Button Pressed!');
  },
)
回到顶部