【Flutter】开发 Flutter 包和插件 ( Flutter 包和插件简介 | 创建 Flutter 插件 | 创建 Dart 包 )(一)

简介: 【Flutter】开发 Flutter 包和插件 ( Flutter 包和插件简介 | 创建 Flutter 插件 | 创建 Dart 包 )(一)

文章目录

一、Flutter 包和插件简介

二、创建 Flutter 插件

1、Android Studio 中可视化创建

2、命令行创建

三、创建 Dart 包

1、Android Studio 中可视化创建

2、命令行创建





一、Flutter 包和插件简介


" Flutter 包 " 包含 pubspec.yaml 和 lib 代码目录 ;


pubspec.yaml 配置文件 : 配置各种依赖 , 资源等 ;

lib 目录 : 是 Dart 代码所在目录 ;


Flutter 包的类型 :


Dart 包 : 仅涉及 Dart 代码 , 将 Dart 代码封装一下 , 实现特定功能 , 如解析 JSON 字符串等 , 不涉及到与 Native 应用的交互 ;

插件包 : 是专用的 Dart 包 , 包含 Dart API , 针对 Android 的 Java / Kotlin , 或 针对 iOS 的 Objective-C / Swift 的实现 , 如之前使用的拍照插件包 , 在 Android 平台使用了 Android 相机的代码 , 在 iOS 中调用了 iOS 相机相关功能 ;





二、创建 Flutter 插件



1、Android Studio 中可视化创建


可视化方式创建 " Flutter 包或插件 " :


前提 : Android Studio 中 安装了 Flutter 和 Dart 插件 , 这也是开发 Flutter 的前提 ; 菜单栏选择 " Flie / Settings … " 弹出的如下对话框中 , 选择 " Plugin " 选项 , 如下就是安装了 Flutter 和 Dart 插件 ;

image.png



在 菜单栏 选择 " File / New / New Flutter Project… " 选项 ;

image.png



在弹出的如下对话框中 , 选择 " Flutter Plugin " 就是创建 Flutter 插件 , 这里选择创建 Flutter 插件 ;


( 如果选择 " Flutter Package " , 就是创建 Flutter 包 )


image.png


输入 Flutter 插件名称 , 然后点击 " Finish " 完成创建 ;


image.png


插件包创建完毕 :


image.png


插件包目录结构介绍 :


lib : Dart 代码目录 , 在默认生成的 flutter_plugin.dart 代码中 , 使用了 MethodChannel 与 Android / iOS 本地应用进行通信 ;

pubspec.yaml : 配置了依赖 , 以及相关说明 ;

android : 存放插件中 Android 部分代码 ; android\src\main\kotlin\com\example\flutter_plugin 目录中的 FlutterPlugin.kt 就是 Android 对应的插件 ; Android 开发者可以开发 android 目录下的代码 , 开发 Android 平台的对应功能 ;

ios : 存放插件中 iOS 部分代码 ; ios\Classes 目录中的 FlutterPlugin.m 就是 iOS 中对应的插件 ; iOS 开发者可以开发 iOS 目录下的代码 , 开发 iOS 平台的对应功能 ;


Flutter 与本地应用通信参考 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 完整代码示例 ) 代码 ;



2、命令行创建


执行如下命令 , 创建 组织名为 com.example , 名称是 flutter_plugin 的 Flutter 插件包 ;


flutter create --org com.example --template=plugin flutter_plugin


--org 设置组织名 , 即 Android 中的包名 ;

--template 设置当前创建的工程类型 , plugin 表示 Flutter 插件包 ;

flutter_plugin 表示插件包的名称 ;

image.png



D:\flutter>flutter create --org com.example --template=plugin flutter_plugin
Creating project flutter_plugin...
  flutter_plugin\.gitignore (created)
  flutter_plugin\.idea\libraries\Dart_SDK.xml (created)
  flutter_plugin\.idea\modules.xml (created)
  flutter_plugin\.idea\runConfigurations\example_lib_main_dart.xml (created)
  flutter_plugin\.idea\workspace.xml (created)
  flutter_plugin\.metadata (created)
  flutter_plugin\CHANGELOG.md (created)
  flutter_plugin\lib\flutter_plugin.dart (created)
  flutter_plugin\LICENSE (created)
  flutter_plugin\flutter_plugin.iml (created)
  flutter_plugin\pubspec.yaml (created)
  flutter_plugin\README.md (created)
  flutter_plugin\test\flutter_plugin_test.dart (created)
Running "flutter pub get" in flutter_plugin...                     721ms
  flutter_plugin\example\.gitignore (created)
  flutter_plugin\example\.idea\libraries\Dart_SDK.xml (created)
  flutter_plugin\example\.idea\libraries\KotlinJavaRuntime.xml (created)
  flutter_plugin\example\.idea\modules.xml (created)
  flutter_plugin\example\.idea\runConfigurations\main_dart.xml (created)
  flutter_plugin\example\.idea\workspace.xml (created)
  flutter_plugin\example\.metadata (created)
  flutter_plugin\example\lib\main.dart (created)
  flutter_plugin\example\flutter_plugin_example.iml (created)
  flutter_plugin\example\pubspec.yaml (created)
  flutter_plugin\example\README.md (created)
  flutter_plugin\example\test\widget_test.dart (created)
Running "flutter pub get" in example...                            758ms
Wrote 25 files.
All done!
Your plugin code is in flutter_plugin\lib\flutter_plugin.dart.
You example app code is in flutter_plugin\example\lib\main.dart.
You've created a plugin project that doesn't yet support any platforms.
To add platforms, run `flutter create -t plugin --platforms <platforms> .` under flutter_plugin.
For more information, see https://flutter.dev/go/plugin-platforms.
D:\flutter>


目录
相关文章
|
22天前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
67 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
15天前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
16 1
|
16天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
112 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
6天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
60 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
14天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
58 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
3天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
21 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
19天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
55 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
23天前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
26 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
23天前
|
JavaScript 前端开发 Linux
flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
62 18
|
15天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
20 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章

  • 1
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 2
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
  • 3
    flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
  • 4
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 5
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 6
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 8
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex