# cordova-plugin-flutter

> cordova-plugin-flutter

Latest version **2.0.0** (published 2021-01-28) · Apache License Version 2.0 license · 0 weekly downloads

## Install

```sh
npm install cordova-plugin-flutter
pnpm add cordova-plugin-flutter
yarn add cordova-plugin-flutter
bun add cordova-plugin-flutter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-01-28 |
| First published | 2020-05-30 |
| Weekly downloads | 0 |
| License | Apache License Version 2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 601.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | qijing chen |
| Maintainers | waitaction |
| Keywords | cordova-plugin-flutter, cordova, cordova-android |

## Links

- npm: https://www.npmjs.com/package/cordova-plugin-flutter
- Repository: https://github.com/waitaction/cordova-plugin-flutter
- Homepage: https://github.com/waitaction/cordova-plugin-flutter#readme
- Issues: https://github.com/waitaction/cordova-plugin-flutter/issues
- npm.io page: https://npm.io/package/cordova-plugin-flutter

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2021-01-28
- 1.0.4 — 2021-01-22
- 1.0.3 — 2021-01-19
- 1.0.2 — 2020-05-30
- 1.0.1 — 2020-05-30

## README

# cordova应用与flutter混合开发

让你的cordova应用能与flutter进行混合开发

| 开发环境        | 版本     |
| --------------- | -------- |
| cordova         | ≥ 10.0.0 |
| cordova-android | ≥ 9.0.0  |
| cordova-ios     | ≥ 5.0.0  |
| flutter         | ≥ 1.17.0 |

示例代码：`https://github.com/waitaction/cordovaFlutterDemo`
## 安装

安装cordova-plugin-flutter插件

``` shell
cordova plugin add cordova-plugin-flutter
```

> 安装完之后会产生`flutter_module`文件夹，不要去修改flutter_module文件夹名称
> 安装过程可能会卡住，等一小会就正常

编译android

``` shell
cordova build android
```

> 编译过程中会下载jar包，可能需要几分钟时间...

编译ios

``` shell
cordova build ios
```

> 编译过程会下载缺失的flutter framework，可能需要几分钟时间...

## 在`cordova`调用`flutter`

**flutter.init** `使用前初始化，尽可能早的初始化，在deviceready之后，且只初始一次`

``` javascript
flutter.init(function(){
    console.log("初始化成功");
},function(err){
    console.log("初始化失败");
})
```

下面的方法都要在`flutter.init`之后才能调用

**flutter.open** `打开flutter`

``` javascript
//请在flutter.init方法之后调用
flutter.open(
    undefined,
    function (result) {
        console.log("打开flutter成功");
        console.log(result);
    }, function (err) {
        console.log("打开flutter失败");
    }
);

flutter.open(
    '/HomePage', //flutter路由名称    
    function (result) {
        console.log("打开flutter成功");
    },
    function (err) {
        console.log("打开flutter失败");
    }
);
```

对应flutter路由名称

``` dart
 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        platform: TargetPlatform.iOS,
      ),
      routes: {
        '/HomePage': (BuildContext context) => new HomePage(),
        '/NextPage': (BuildContext context) => new NextPage(),
      },
      initialRoute: '/HomePage', //初始化路由为first页面
      // onGenerateRoute: AppRouter.router.generator,
    );
  }
```

## 在`flutter`返回结果给`cordova`的

在`flutter`调用

`dart`代码：

``` dart
import 'package:flutter_module/cordova.dart';
//在需要的地方调用
await CordovaPlatform.finish({"format": "yyyy年MM月dd日"});
```

## 示例代码

``` js
flutter.init(function () {
    console.log("初始化成功");
    flutter.open(null,function (result) {
        console.log("打开flutter成功");
        //result 是flutter返回的结果，此处代码会输出 {"format":"yyyy年MM月dd日"}
        console.log("result")
    }, function (err) {
        console.log(err);
    })
}, function (err) {

});
```

## 编译

编译ios时，需要在虚拟机的调试请使用`cordova build ios`编译

开发完成后，需要上架到app store，请使用`cordova build ios --release` 编译

> 如果使用`cordova build ios --release`命令编译，使用xcode运行在虚拟机会提示`Building for iOS Simulator, but the embedded framework 'Flutter.framework' was built for iOS`的错误

## 如何调试`flutter`代码

使用 `visual studio code`，安装`flutter`扩展，打开`cordova项目路径/flutter_module`目录，使用`visual studio code`调试工具创建`Flutter: Attach to Device`，运行app后附加调试。

![因网络原因，截图'/screenshot/1590851583248.jpg'无法加载](/screenshot/1590851583248.jpg "截图")

![因网络原因，截图'/screenshot/1590851885254.jpg'无法加载](/screenshot/1590851885254.jpg "截图")

## 其它

感谢 `@zhangjianying` 大神编写的ios代码和ios构建脚本.

目前仍有许多不足之处，由于工作繁忙，其它细节，你可以 [fork一份代码](https://github.com/waitaction/cordova-plugin-flutter) 进行优化。

---
_Source: https://npm.io/package/cordova-plugin-flutter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._