# flutter_plugin_sample

**Repository Path**: hdjker/flutter_plugin_sample

## Basic Information

- **Project Name**: flutter_plugin_sample
- **Description**: 鸿蒙实现一个最简单的flutter接口
- **Primary Language**: Dart
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-28
- **Last Updated**: 2024-12-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

最简单的flutter插件开发流程
（需根据官网完成环境配置）

1、打开vscode  创建flutter插件

![IMAGE](./readmeFile/r1.png)

![IMAGE](./readmeFile/r2.png)

简单取个名字

![IMAGE](./readmeFile/r3.png)

目录结构如下：

![IMAGE](./readmeFile/r4.png)

2、执行命令： flutter create . --template=plugin --platforms=ohos 来增加ohos平台支持

新的目录结构如下：

![IMAGE](./readmeFile/r5.png)

在终端输入指令：（在example目录中获取相关依赖文件）

``` bash
cd example

flutter build hap
 ```

3、通过DevEco打开 example/ohos 目录进行开发

3.1进行签名配置

![IMAGE](./readmeFile/r6.png)

4、编写原生端代码实现

在DevEco中新建Static Library模块

![IMAGE](./readmeFile/r7.png)

![IMAGE](./readmeFile/r8.png)

给模块命名为addsample

在addsample/src/main/ets/components 目录下新建arkts文件——addPlugin,并编写如下代码

![IMAGE](./readmeFile/r9.png)

将编写好的AddPlugin类进行导出

![IMAGE](./readmeFile/r10.png)

5、在entry模块进行引入

![IMAGE](./readmeFile/r11.png)

![IMAGE](./readmeFile/r12.png)

如此便完成了原生段的相关函数注册。

随后回到vscode 进行前端代码编写。

6、前端接口代码编写

找到lib文件夹 可以找到三个文件

flutter_plugin_sample_xxx_channel.dart ：前端接口

flutter_plugin_sample_xxx_interface.dart ：前端接口声明

flutter_plugin_sample_xxx.dart：前端接口的调用（通过 channel通道）

![IMAGE](./readmeFile/r13.png)

三个文件需要增加的内容如下：

![IMAGE](./readmeFile/r14.png)

![IMAGE](./readmeFile/r15.png)

![IMAGE](./readmeFile/r16.png)

7、flutter 前端demo实现

![IMAGE](./readmeFile/r17.png)

![IMAGE](./readmeFile/r18.png)

8、启动程序
在vscode中运行或者DevEco中运行都可以，启动后界面如下

![IMAGE](./readmeFile/r19.png)

若要对原生代码进行调试，则需要在DevEco调试运行

![IMAGE](./readmeFile/r20.png)