鸿蒙版Flutter三方库适配案例【screen_brightness】

鸿蒙版Flutter三方库适配案例【screen_brightness】

大家好，今天我们一起来实现一个鸿蒙版本的screen_brightness

screen_brightness

简介

项目是一个用于控制屏幕亮度的 Flutter 插件项目，支持 Android、iOS、macOS 和 Windows 平台。

开发背景

目前社区里还有一个screen，但是在使用的时候发现一个问题，就是目前screen并没有支持空安全，在3.21的项目里不能使用，但是为了方便开发者，我其实也做了适配，大家可以直接使用，地址：gitcode.com/jianguoxu/f…，

但是相比较来说，screen_brightness目前一直在更新，所以我们今天就一起来看看如何对这个库进行适配。

一、准备工作

flutter开发环境已配置：参考gitee.com/openharmony…

下载待适配的三方插件：官方插件库地址pub.dev/

目前screen_brightness在github上。

github.com/aaassseee/s…

二、插件目录

lib： 是对接dart端代码的入口，由此文件接收到参数后，通过channel将数据发送到原生端；

android：安卓端代码实现目录；

ios：ios原生端实现目录；

example： 一个依赖于该插件的Flutter应用程序，来说明如何使用它；

README.md：介绍包的文件；

CHANGELOG.md： 记录每个版本中的更改；

LICENSE： 包含软件包许可条款的文件。

根目录文件

• .gitignore：指定 Git 版本控制系统中需要忽略的文件和文件夹，避免将不必要的文件纳入版本控制。
• LICENSE：项目的开源许可证文件，规定了项目代码的使用、修改和分发规则。
• README.md：项目的说明文档，包含项目概述、插件信息和维护者信息。项目概述部分提到这是一个用于控制屏幕亮度的插件，并且实现了应用生命周期内设置和重置亮度的功能。同时还列出了各个平台插件的 Pub 链接，方便用户查看和使用。

子目录

• screen_brightness_macos：包含 macOS 平台的插件代码和相关配置文件。其中 example 目录可能包含 macOS 平台的示例项目，macos 目录可能包含 macOS 原生代码和配置文件。
• screen_brightness_android：包含 Android 平台的插件代码和相关配置文件。android 目录可能包含 Android 原生代码和配置文件，example 目录可能包含 Android 平台的示例项目。
• screen_brightness_windows：包含 Windows 平台的插件代码和相关配置文件。
• .idea：IntelliJ IDEA 或 Android Studio 的配置文件目录，包含 IDE 的项目设置、运行配置等信息。
• .github：包含 GitHub 相关的配置文件和工作流。例如，可能包含用于自动化构建、测试和发布的 GitHub Actions 工作流配置文件。
• screen_brightness_ios：包含 iOS 平台的插件代码和相关配置文件。
• screen_brightness：主插件代码目录，可能包含跨平台的 Dart 代码和一些通用配置。
• screen_brightness_platform_interface：包含跨平台接口定义的代码，为不同平台的插件提供统一的接口，方便实现多平台支持。

三、创建插件的ohos模块

命令：flutter create --platforms ohos,android,ios --org <org> <appName>

步骤：

1）用VScode打开刚刚下载好的插件；

2）打开Terminal，cd到插件目录下；

3）执行命令flutter create --platforms ohos screen_brightness_ohos 创建一个ohos平台的flutter模块。

执行创建命令前：

执行创建命令后，可以将screen_brightness_ohos目录下的.dart_tool和.ldea文件删除。

删除后

四、编写ohos插件的dart接口和pubspec.yaml文件

可直接复制screen_brightness_android目录下lib的dart代码和pubspec.yaml文件进行修改；

android目录

name: screen_brightness_android
description: The Android federated plugin implementation of screen_brightness.
version: 2.1.1
homepage: https://github.com/aaassseee/screen_brightness
repository: https://github.com/aaassseee/screen_brightness/tree/master/screen_brightness_android
issue_tracker: https://github.com/aaassseee/screen_brightness/issues
​
topics:
  - screen
  - monitor
  - brightness
​
environment:
  sdk: ">=3.0.0 <4.0.0"
  flutter: ">=3.0.0"
​
dependencies:
  flutter:
    sdk: flutter
  screen_brightness_platform_interface: ">=2.1.0 <3.0.0"
​
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ">=3.0.0 <4.0.0"
​
#dependency_overrides:
#  screen_brightness_platform_interface:
#    path: ../screen_brightness_platform_interface/
​
flutter:
  plugin:
    platforms:
      android:
        package: com.aaassseee.screen_brightness_android
        pluginClass: ScreenBrightnessAndroidPlugin

ohos目录

name: screen_brightness_ohos
description: "A new Flutter project."
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
​
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1
​
environment:
  sdk: '>=3.4.0 <4.0.0'
​
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter
​
​
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.6
​
dev_dependencies:
  flutter_test:
    sdk: flutter
​
  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^3.0.0
​
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
​
# The following section is specific to Flutter packages.
flutter:
​
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
​
  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
​
  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware
​
  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages
​
  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages
​

dart代码基本不需要修改，只需要将android字样改为ohos。

lib目录dart代码：

修改后的仅做参考

name: screen_brightness_o ho s
description: The ohos federated plugin implementation of screen_brightness.
version: 2.1.1
homepage: https://github.com/aaassseee/screen_brightness
repository: https://github.com/aaassseee/screen_brightness/tree/master/screen_brightness_ohos
issue_tracker: https://github.com/aaassseee/screen_brightness/issues
​
topics:
  - screen
  - monitor
  - brightness
​
environment:
  sdk: ">=3.0.0 <4.0.0"
  flutter: ">=3.0.0"
​
dependencies:
  flutter:
    sdk: flutter
  screen_brightness_platform_interface: ">=2.1.0 <3.0.0"
​
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ">=3.0.0 <4.0.0"
​
#dependency_overrides:
#  screen_brightness_platform_interface:
#    path: ../screen_brightness_platform_interface/
​
flutter:
  plugin:
    platforms:
      ohos:
        package: com.aaassseee.screen_brightness_ohos
        pluginClass: ScreenBrightnessohosPlugin

五、编写ohos插件的原生ets模块

1、创建ohos的插件模块

由于是写ohos平台的flutter插件，而不是写一个应用,需要将原来的entry模块删除，新建一个path_provider插件的静态模块，用来写ets原生代码逻辑。

步骤：

1）用DevEco Studio打开screen_brightness_ohos下的ohos项目：

2）新建一个名称为screen_brightness的静态模块：

在DevEco Studio左上角点击Flie > New > Module > Static Library > Next ；

module name填写为screen_brightness,其他选项为默认，点击Finish，完成创建。

3）删除entry以及其他多余目录：

entry目录（entry是用来写应用的，现在是要写插件，此处已不需要，应该删除）；

删除entry

将screen_brightness > src > main > ets目录下的文件全部删除(此处是一些模板代码可删除)。

2、修改相关配置文件

1）在screen_brightness目录内的oh-package.json5添加libs/flutter.har 依赖：

{
  "name": "screen_brightness",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "Index.ets",
  "author": "",
  "license": "Apache-2.0",
  "dependencies": {
    "@ohos/flutter_ohos": "file:libs/har/flutter.har"  //此处为添加的依赖
  }
}
​

2）将screen_brightness目录外侧的oh-package.json5的dependencies中的flutter.har依赖删除：

/*
* Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
​
{
  "modelVersion": "5.0.0",
  "name": "screen_brightness_ohos",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
  "dependencies": {
​
  },
  "devDependencies": {
    "@ohos/hypium": "1.0.6"
  },
  "overrides": {
​
  }
}
​

3）在screen_brightness目录下添加flutter.har：

3、编写ets代码

文件结构，和代码逻辑可参考安卓或ios：

gitcode.com/nutpi/scree…

ohos的api可以参考：gitcode.com/openharmony…

4、修改index文件

​
import {ScreenBrightnessPlugin} from './src/main/ets/flutter/plugins/screenbrightness/ScreenBrightnessPlugin'
​
export default ScreenBrightnessPlugin

5、打har

写完代码，改完配置文件后，即可打har包：

打包工具：DevEco Studio

打包步骤：1、鼠标定位到screen_brightness目录；2、点击DevEco Studio中的Build；3、点击Make Module 'screen_brightness'选项；4、等待打包完成。

预期结果：

在screen_brightness > build > default > outputs中有screen_brightness生成，即为打har包成功。

六、编写example

1、创建一个ohos平台的flutter example应用,用来验证刚刚适配的插件功能

cd 到screen_brightness_ohos目录下 ；

命令：flutter create --platforms ohos example

工具：Vscode

2、修改dart代码

复制screen_brightness_android\example\lib下的main.dart代码，替换screen_brightness_ohos\example\lib下的main.dart代码。

3、修改example pubspec.yaml文件

name: screen_brightness_android_example
description: Demonstrates how to use the screen_brightness_android plugin.
​
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
​
environment:
  sdk: ">=3.0.0 <4.0.0"
​
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter
  screen_brightness_ohos:
    path: ../
  screen_brightness_platform_interface:
​
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ">=3.0.0 <4.0.0"
​
dependency_overrides:
  screen_brightness_platform_interface:
    path: ../../screen_brightness_platform_interface/
​
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
​
# The following section is specific to Flutter.
flutter:
​
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
​
  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
​
  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.
​
  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages
​
  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages
​

七、修改screen_brightness的pubspec.yaml文件

flutter: plugin:platforms添加ohos；

dependencies:添加screen_brightness_ohos依赖。

name: screen_brightness
description: A Plugin for controlling screen brightness with application life cycle reset implemented
version: 2.1.2
homepage: https://github.com/aaassseee/screen_brightness
repository: https://github.com/aaassseee/screen_brightness/tree/master/screen_brightness
issue_tracker: https://github.com/aaassseee/screen_brightness/issues
​
topics:
  - screen
  - monitor
  - brightness
​
environment:
  sdk: ">=3.0.0 <4.0.0"
  flutter: ">=3.0.0"
​
dependencies:
  flutter:
    sdk: flutter
  screen_brightness_platform_interface: ">=2.1.0 <3.0.0"
  screen_brightness_android: ">=2.1.1 <3.0.0"
  screen_brightness_ios: ">=2.1.1 <3.0.0"
  screen_brightness_macos: ">=2.1.1 <3.0.0"
  screen_brightness_windows: ">=2.1.0 <3.0.0"
  screen_brightnes_ohos:
    path: ../screen_brightnes_ohos    #此处为添加
​
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ">=3.0.0 <4.0.0"
  plugin_platform_interface: ">=2.0.0 <3.0.0"
  async: ">=2.0.0 <3.0.0"
​
#dependency_overrides:
#  screen_brightness_platform_interface:
#    path: ../screen_brightness_platform_interface/
#  screen_brightness_android:
#    path: ../screen_brightness_android
#  screen_brightness_ios:
#    path: ../screen_brightness_ios
#  screen_brightness_macos:
#    path: ../screen_brightness_macos
#  screen_brightness_windows:
#    path: ../screen_brightness_windows
​
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
​
# The following section is specific to Flutter.
flutter:
  # This section identifies this Flutter project as a plugin project.
  # The 'pluginClass' and Android 'package' identifiers should not ordinarily
  # be modified. They are used by the tooling to maintain consistency when
  # adding or updating assets for this project.
  plugin:
    platforms:
      android:
        default_package: screen_brightness_android
      ios:
        default_package: screen_brightness_ios
      macos:
        default_package: screen_brightness_macos
      windows:
        default_package: screen_brightness_windows
      ohos:
        default_package: screen_brightness_ohos   #此处为添加
  # To add assets to your plugin package, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  #
  # For details regarding assets in packages, see
  # https://flutter.dev/assets-and-images/#from-packages
  #
  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.
​
  # To add custom fonts to your plugin package, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts in packages, see
  # https://flutter.dev/custom-fonts/#from-packages

八、运行example

1、签名

用 Deveco Studio 打开三方库的 example > ohos 目录；

单击 File > Project Structure > Project > Signing Configs 界面勾选 Automatically generate signature，等待自动签名完成即可，单击 OK；

2、运行

cd到path_provider_ohos\example > ohos目录，使用下列指令运行：

flutter pub get
flutter run -d <device-id>

参考

ohos平台适配flutter三方库指导

如何使用Flutter与OpenHarmony通信 FlutterChannel

关于

作者：坚果派

公众号：nutpi

phone：17752170152 官网： www.nutpi.net/