# flutter_module_plugin

**Repository Path**: scenario-samples/flutter_module_plugin

## Basic Information

- **Project Name**: flutter_module_plugin
- **Description**: 【鸿蒙 Harmony Next 示例 代码】 在Flutter自定义插件中通过Router实现跳转原生页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-13
- **Last Updated**: 2025-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 在Flutter自定义插件中通过Router实现跳转原生页面

## 介绍：
通过Router打开Flutter自定义插件中的页面 Demo场景描述：伙伴有自研插件，插件中有原生页面需要跳转且三端统一，原生页面代码存在于插件中，也方便复用。

## 实现思路
1. 在插件ohos下创建原生页面，并使用Entry装饰，添加routerName属性
    ```
    @Entry({ routeName: 'pageInPlugin' })
    @Component
    export struct MainPage {
      build() {
        Row() {
          Column() {
            Text('Page In Plugin')
              .fontSize(50)
              .fontWeight(FontWeight.Bold)
          }
          .width('100%')
        }
        .height('100%')
      }
    }
    ```
2. 注册插件及MethodChannel，通过router跳转插件内页面
   ```
   onMethodCall(call: MethodCall, result: MethodResult): void {
    if (call.method == "getPlatformVersion") {
      result.success("OpenHarmony ^ ^ ")
    } else if(call.method === 'pushNamedRoute' ) {
      try {
        router.pushNamedRoute({name: 'pageInPlugin' })
      } catch (err) {
        let message = (err as BusinessError).message
        let code = (err as BusinessError).code
        console.error(`pushNamedRoute failed, code is ${code}, message is ${message}`);
      }
      result.success(null)
    } else {
      result.notImplemented()
    }
   }
   ```
3. 注意在index.ets中导出页面
   ```
   export {MainPage} from './src/main/ets/components/plugin/MainPage';
   ```
   
## 效果预览：
![flutter_module_plugin.gif](gif/flutter_module_plugin.gif)

## 工程目录：

```
flutter_opengl_texture
    |---ohos/src/main/ets.components.plugin/
    |   |---FlutterModulePlugin.ets                // 注册及MethodChannel
    |   |---MainPage.ets                           // 插件中原生页面
    |---lib/    
        |---flutter_module_plugin.dart             // 插件
```

## 约束与限制：
- IDE: DevEco Studio 5.0.5 Release
- SDK: API Version 17 Release及以上版本

## 参考文档
- [命名路由](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-routing#命名路由)

## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">