flutter-run-example

从 pub.dev 插件主页上提供的 Repository (GitHub) 下载源码到本地,cd 进入 example 目录执行 flutter run 即可运行插件 demo(lib/main.dart)。

flutter-run

flutter run 背后会自动执行 flutter pub get 安装依赖,如果检测到联机设备是iOS,则接下来依次执行以下步骤:

  1. certificate choice:检测本地安装的开发者证书,如果有多个需交互选择;
  2. signing app:使用developer identity配置APP的签名;
  3. pod install:安装Podfile中描述的原生依赖;
  4. xcodebuild:执行Xcode编译。

说明:Android 稍有不同,请自行对照参考。

分解步骤

也可不执行一步到位的 flutter run,自行执行安装 flutter 和原生平台依赖(cocoapods、gradle)、配置签名(iOS)、打开IDE编译等步骤。

fluttertoast 插件为例,首先需要打开 pubspec.yaml,检查 environment 中的 flutter sdk 版本。
如果当前安装的 flutter SDK 版本过低,考虑使用 FVM 切换到插件要求的最低支持版本。

# Step1: 直接在主目录或cd进入example目录,执行 pub get 安装flutter package依赖:
cd example && flutter pub get
# Step2: cd进入ios目录,执行 pod install 安装 iOS 原生依赖:
cd ios && pod install
# Step3: 在Xcode IDE中打开工程
open Runner.xcworkspace
# Step4: 在Xcode IDE中配置 Signing
# 按需修改 Display Name、Display Identifier,然后执行编译

toastyfluttertoastfluttertoastalertflutter_flexible_toast 等依赖 methodChannel 原生实现的插件,一般要执行 pod install。例如 fluttertoast pod 依赖了 SCLAlertView。对于纯 Flutter 工程,则无需执行 pod install

但是,有些插件的demo工程可能基于较旧的flutter SDK创建,导致无法编译运行,下文为pub.dev中的部分插件编译遇到的问题及解决方案。

flutter_smart_dialog

flutter_smart_dialog 源码样例,在 example 下执行 flutter pub get 将会报错:

Running "flutter pub get" in example...
Because example depends on flutter_smart_dialog from path which doesn't exist (could not find package flutter_smart_dialog at "..\..\flutter_smart_dialog"), version solving failed.

这是因为文件路径分隔符(python中的os.sep)的识别问题:在Windows平台上是 \,在Linux/macOS平台上则是 /,macOS平台下无法识别Windows平台的路径写法。

example/pubspec.yaml 如下:

dependencies:

  flutter_smart_dialog:
    path: ..\..\flutter_smart_dialog

macOS 下可修改为如下:

dependencies:

  flutter_smart_dialog:
    path: ../

  # 或者直接使用版本
  # flutter_smart_dialog: ^2.0.5

重新执行 flutter pub getflutter run 即可运行起demo。

ftoast

ftoast 为 Fliggy-Mobile 系列组件之一。

ftoast 插件主页上提供的 Repository (GitHub) 链接下载源码到本地,exampe 下只有一个 lib 目录,没有 ios/android 目录。

根据pub.dev主页最后一段的说明,需要进入 example 目录执行 flutter create .,然后再执行 flutter run 即可运行起demo。


如果公司内不支持 SSH,则需要将 example/pubspec.yaml 中 fcommon.git 地址中的 SSH url 修改为 https url。

      url: 'git@github.com:Fliggy-Mobile/fcommon.git'

替换为:

      url: 'https://github.com/Fliggy-Mobile/fcommon.git'

toast

toast 插件主页上提供的 Repository (GitHub) 链接下载源码到本地,exampe 下只有一个 lib 目录,没有 ios/android目录。

参考 ftoast,进入 example 目录下执行 flutter create .

执行 open ios/Runner.xcworkspace 打开 Xcode 工程,配置好证书后编译(或 flutter run )报错:

toast-Not-Found

解决方案:修改 example/pubspec.yaml,在 dependencies 或 dev_dependencies 分组中添加 toast 插件本地相对路径:

dev_dependencies:
  flutter_test:
    sdk: flutter
  toast:
    path: ../

然后再执行 flutter run 即可运行起demo。

oktoast

oktoast 插件主页上提供的 Repository (GitHub) 链接下载源码到本地,example 编译报错:

oktoast-No-Such-File

可在本地重新创建 example 解决。

  1. 备份原有 example:mv example example0

  2. 重新创建 example:flutter create example

  3. 复制原有 example 下的依赖配置和测试代码:

    • cp example0/pubspec.yaml example/pubspec.yaml
    • cp -r example0/lib/* example/lib/
    • cp 其他资源文件…
  4. 检查 example/pubspec.yaml,在 dependencies 或 dev_dependencies 分组中按需添加 oktoast 插件的本地相对路径。

  5. 由于修改了 pubspec.yaml 文件,需重新执行 flutter pub get 更新依赖包。

  6. 打开Xcode工程,配置好签名(Signing),即可编译运行。

完整测试用例参考 oktoast,部分代码略加修改支持 Null safety 即可运行。

说明

  1. 如果用 FVM 配置了 per-project 的 flutter SDK,则执行相关 flutter 命令需加上 fvm 代理前缀。例如用 fvm flutter create example 代替 flutter create example
  2. 如果 xcodebuild 遇到诸如 Invalid depfile: ~/oktoast/example/.dart_tool/flutter_build/6f462094efa2e3a279f832b5facc24d0/kernel_snapshot.d 此类错误,则考虑执行 flutter clean 后重新 flutter pub get

flutter_styled_toastbot_toastflutter_easyloadingeasy_alerttextfield_tags 等插件 example 无法运行问题均可参考以上处理。

参考

Flutter Plugin开发流程
Flutter插件iOS端开发教程
flutter-发布一个package到pub.dev 超详细教程
How can I run an example from a Flutter package/library?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
这里是一个简单的Flutter MQTT例子,它连接到一个公共MQTT代理,并订阅一个主题。当收到来自该主题的消息时,它会在UI上显示它们。 首先,您需要在`pubspec.yaml`文件中添加`mqtt_client`依赖项,然后运行`flutter packages get`以安装它。 ``` dependencies: mqtt_client: ^4.0.0 ``` 然后,您可以使用以下代码创建Flutter应用程序。 ``` import 'package:flutter/material.dart'; import 'package:mqtt_client/mqtt_client.dart'; import 'package:mqtt_client/mqtt_server_client.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { MqttServerClient client; String message = ''; @override void initState() { super.initState(); client = MqttServerClient('broker.hivemq.com', ''); client.onConnected = onConnected; client.onSubscribed = onSubscribed; client.onDisconnected = onDisconnected; client.onUnsubscribed = onUnsubscribed; client.pongCallback = pong; connect(); } void connect() async { try { await client.connect(); } catch (e) { print('Exception: $e'); } } void subscribe() { client.subscribe('topic/test', MqttQos.atLeastOnce); } void onConnected() { print('Connected'); subscribe(); } void onSubscribed(String topic) { print('Subscribed to $topic'); } void onDisconnected() { print('Disconnected'); } void onUnsubscribed(String topic) { print('Unsubscribed from $topic'); } void pong() { print('Ping response client callback invoked'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('MQTT Chat'), ), body: Center( child: Text(message), ), ), ); } } ``` 在上面的代码中,我们首先创建了一个`MqttServerClient`对象,它连接到公共MQTT代理`broker.hivemq.com`。我们还设置了一些回调函数,以便在连接,订阅和断开连接时得到通知。 在`initState`方法中,我们连接到MQTT服务器。一旦连接成功,我们将订阅`topic/test`主题。 当我们收到来自该主题的消息时,我们将在UI上显示它们。为此,我们可以在`onSubscribed`回调函数中添加以下代码。 ``` void onSubscribed(String topic) { print('Subscribed to $topic'); client.updates.listen((List<MqttReceivedMessage<MqttMessage>> messages) { final recMess = messages[0].payload as MqttPublishMessage; final pt = MqttPublishPayload.bytesToStringAsString(recMess.payload.message); setState(() { message = pt; }); }); } ``` 上面的代码将使用`client.updates`流监听来自MQTT服务器的消息。当收到消息时,它将在UI上显示它们。 这是一个简单的Flutter MQTT例子。您可以根据自己的需要进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值