Flutter原生功能集成插件flutter_native的使用

Flutter原生功能集成插件flutter_native的使用

Button Preview

flutter_native

Contributors Stargazers Issues License

目录 #

项目简介 #

flutter_native 是一个命令行工具(CLI),允许开发者通过修改和添加应用程序权限来为使用 Flutter 构建的 Android 和 iOS 应用启用原生功能。

使用 Flutter 构建 💙 #

开始使用 #

前提条件 #

要使用 "flutter_native" CLI,您需要安装以下内容:

Flutter & Dart SDK

如果您系统上还没有安装 Flutter,可以从官方 Flutter 网站下载: https://flutter.dev/docs/get-started/install

安装💻 #

```sh dart pub global activate flutter_native ``` 或者本地安装: ```sh dart pub global activate --source=path <path to this package> ```

命令 🤯 #

包 flutter_native 可以通过 fnative 可执行文件访问。

```bash Flutter_native: The ultimate CLI tool for modifying app permissions and enabling native features on Android and iOS 😉

Usage: fnative <command> [arguments]

Global options: -h, --help Print this usage information. -v, --version Print the current version. –[no-]verbose Noisy logging, including all shell commands executed.

Available commands: android Command to enable feature Modification for Android Platform update Update the CLI.

Run “fnative help <command>” for more information about a command.


<h3 class="hash-header" id="usage">使用 <a href="#usage" class="hash-link">#</a></h3>
<p>进入您的 Flutter 项目目录并运行以下命令以修改 Android 应用程序的权限。</p>
```dart
/// 添加相机权限到 Android 应用程序清单
fnative android permission --enable-camera

/// 添加位置权限到 Android 应用程序清单
fnative android permission --enable-location

/// 添加拨打电话权限到 Android 应用程序清单
fnative android permission --enable-call

/// 添加存储权限到 Android 应用程序清单
fnative android permission --enable-storage

/// 添加蓝牙权限到 Android 应用程序清单
fnative android permission --enable-bluetooth

/// 同时添加上述所有权限到 Android 应用程序清单(测试版)
fnative android permission --enable-all

fnative android permission --help #

```bash fnative android permission --help Permission Sub Command allows users to Enable Native Permissions

Usage: fnative android permission [arguments] -h, --help Print this usage information. –enable-camera Enables the Camera Permission –enable-location Enables the Android Location Permission –enable-call Enables Call permission –enable-storage Enables Storage permission –enable-bluetooth Enables bluetooth permission –enable-all Enables the Camera Permission

Run “fnative help” to see global options.


<h2 class="hash-header" id="roadmap">路线图 <a href="#roadmap" class="hash-link">#</a></h2>
<p>查看 <a href="https://github.com/deepraj02/flutter_native/issues" rel="ugc">开放问题</a> 以获取拟议功能(和已知问题)的列表。</p>

<h2 class="hash-header" id="contributing">贡献指南 <a href="#contributing" class="hash-link">#</a></h2>
<p>贡献使开源社区成为一个如此令人兴奋的地方,可以学习、启发和创造。任何贡献都将被 <strong>极大赞赏</strong>。</p>
<ul>
<li>如果您对添加或删除项目有建议,请随时 <a href="https://github.com/deepraj02/flutter_native/issues/new" rel="ugc">打开一个问题</a> 讨论它,或者在编辑了 <em>README.md</em> 文件后直接创建一个拉取请求。</li>
<li>请确保检查拼写和语法。</li>
<li>为每个建议创建单独的 PR。</li>
</ul>

<h2 class="hash-header" id="limitations-and-future-plans-">限制与未来计划 🚀 <a href="#limitations-and-future-plans-" class="hash-link">#</a></h2>

<h3 class="hash-header" id="limitations">限制: <a href="#limitations" class="hash-link">#</a></h3>
<p><code>flutter_native</code> 目前只能修改和添加 Android 应用程序清单文件中的权限。
iOS 平台和其他 Android 功能将在未来的版本中可用。</p>

<h3 class="hash-header" id="future-plans">未来计划: <a href="#future-plans" class="hash-link">#</a></h3>
<ul>
<li>增加通过 CLI 修改 iOS 应用程序权限的支持。</li>
<li>增加通过 CLI 添加 Android 和 iOS 应用程序签名密钥的支持。</li>
<li>增强 CLI 界面以提高用户体验。</li>
<li>增加通过 CLI 修改其他 Android 和 iOS 配置的支持,例如为 iOS 应用程序添加权限,并修改 Android 清单文件。</li>
<li>增加通过 CLI 修改 Android 和 iOS 应用程序构建设置的支持。</li>
<li>改进包的文档并提供更多示例和教程。</li>
<li>增加通过 CLI 修改 Android 和 iOS 应用程序图标的支持。</li>
<li>增加通过 CLI 修改 Android 和 iOS 应用程序名称和描述的支持。</li>
</ul>

<h3 class="hash-header" id="creating-a-pull-request">创建拉取请求 <a href="#creating-a-pull-request" class="hash-link">#</a></h3>
<ul>
<li>分支该项目</li>
<li>创建您的功能分支 (<code>git checkout -b feature/AmazingFeature</code>)</li>
<li>提交您的更改 (<code>git commit -m 'Add some AmazingFeature'</code>)</li>
<li>推送至该分支 (<code>git push origin feature/AmazingFeature</code>)</li>
<li>打开拉取请求 (<code>选择 Staging 分支从下拉菜单中</code>)</li>
</ul>

<h2 class="hash-header" id="authors">作者 <a href="#authors" class="hash-link">#</a></h2>
<ul>
<li><strong>Deepraj Baidya</strong> - <em>Flutter SDE 实习生</em> - <a href="https://github.com/deepraj02" rel="ugc">Deepraj Baidya</a> - *🤔 *</li>
</ul>

---

### 示例代码

#### example/lib/main.dart

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是您的应用的主题。
        //
        // 尝试运行您的应用并输入 "flutter run"。你会看到一个带有蓝色工具栏的应用。
        // 然后,在不退出应用的情况下,尝试将下面的主色调更改为 Colors.green 并重新加载(按 "r" 键)。
        // 注意计数器并没有重置回零;应用并没有重启。
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是您的应用的主页。它是状态化的,意味着它有一个包含影响其外观的字段的状态对象。
  // 这个类是状态的配置。它保存由父组件(在这里是 App 小部件)提供的值(在这个例子中是标题),
  // 并在构建方法中使用。小部件子类中的字段总是标记为 "final"。

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这次调用 setState 告诉 Flutter 框架某些东西已经改变,
      // 因此它会重新运行构建方法以便反映更新后的值。
      // 如果我们不调用 setState 而只是改变了 _counter,那么构建方法就不会再次运行,
      // 所以看起来什么都不会发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每当调用 setState 时,此方法都会重新运行。
    // Flutter 框架经过优化,使得重新运行构建方法变得快速,
    // 因此您可以重建需要更新的任何东西,而不是逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 这里我们从 MyHomePage 对象中获取值,
        // 用于设置我们的应用工具栏标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center 是一个布局小部件。它接受一个子元素并将它放置在父元素的中间。
        child: Column(
          // Column 也是一个布局小部件。它接受一个子元素列表并垂直排列它们。
          // 默认情况下,它根据其子元素水平调整大小,并尽可能高。
          //
          // 调用 "调试绘制"(在控制台中按 "p" 键,从 Android Studio 中的 Flutter Inspector 中选择 "切换调试绘制" 动作,
          // 或者在 Visual Studio Code 中选择 "切换调试绘制" 命令)以查看每个小部件的线框。
          //
          // Column 有一些属性可以控制它如何调整自身大小和如何定位其子元素。
          // 在这里我们使用 mainAxisAlignment 来垂直居中子元素;
          // 主轴是垂直的,因为 Columns 是垂直的(交叉轴是水平的)。
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经按下了按钮这么多次:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ), // 这个逗号使自动格式化更好看。
    );
  }
}

更多关于Flutter原生功能集成插件flutter_native的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter原生功能集成插件flutter_native的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_native 是一个 Flutter 插件,用于在 Flutter 应用中集成原生功能。它允许开发者直接调用 Android 和 iOS 平台的原生代码,以便利用平台特定的功能或优化性能。以下是如何使用 flutter_native 插件的基本步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 flutter_native 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_native: ^0.0.1  # 请使用最新版本

然后,运行 flutter pub get 来获取依赖。

2. 创建原生代码

flutter_native 插件允许你在 Android 和 iOS 平台上编写原生代码。你需要在对应的平台上创建原生代码模块。

Android

android/app/src/main/kotlin/android/app/src/main/java/ 目录下创建一个新的 Kotlin 或 Java 类:

package com.example.flutter_native_example

import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.MethodCallHandler
import io.flutter.plugin.common.MethodChannel.Result
import io.flutter.plugin.common.PluginRegistry.Registrar

class NativeMethods : MethodCallHandler {
    companion object {
        @JvmStatic
        fun registerWith(registrar: Registrar) {
            val channel = MethodChannel(registrar.messenger(), "com.example.flutter_native/native")
            channel.setMethodCallHandler(NativeMethods())
        }
    }

    override fun onMethodCall(call: MethodCall, result: Result) {
        when (call.method) {
            "getPlatformVersion" -> {
                result.success("Android ${android.os.Build.VERSION.RELEASE}")
            }
            else -> {
                result.notImplemented()
            }
        }
    }
}

iOS

ios/Runner 目录下创建一个新的 Swift 或 Objective-C 类:

import UIKit
import Flutter

class NativeMethods: NSObject, FlutterPlugin {
    static func register(with registrar: FlutterPluginRegistrar) {
        let channel = FlutterMethodChannel(name: "com.example.flutter_native/native", binaryMessenger: registrar.messenger())
        let instance = NativeMethods()
        registrar.addMethodCallDelegate(instance, channel: channel)
    }

    func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        switch call.method {
        case "getPlatformVersion":
            result("iOS \(UIDevice.current.systemVersion)")
        default:
            result(FlutterMethodNotImplemented)
        }
    }
}

3. 注册原生代码

在 Android 和 iOS 的入口文件中注册原生代码。

Android

MainActivity.ktMainActivity.java 中注册:

import io.flutter.embedding.android.FlutterActivity
import com.example.flutter_native_example.NativeMethods

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        NativeMethods.registerWith(this)
    }
}

iOS

AppDelegate.swiftAppDelegate.m 中注册:

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        NativeMethods.register(with: self.registrar(forPlugin: "com.example.flutter_native/native")!)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

4. 在 Flutter 中调用原生方法

现在你可以在 Flutter 中调用原生方法了。首先,导入 flutter_native 插件,然后使用 MethodChannel 调用原生方法。

import 'package:flutter/material.dart';
import 'package:flutter_native/flutter_native.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Native Example'),
        ),
        body: Center(
          child: FutureBuilder<String>(
            future: getPlatformVersion(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                return Text('Platform Version: ${snapshot.data}');
              }
            },
          ),
        ),
      ),
    );
  }

  Future<String> getPlatformVersion() async {
    final String platformVersion = await FlutterNative.platformVersion;
    return platformVersion;
  }
}

5. 运行应用

现在你可以运行 Flutter 应用,并查看原生方法返回的平台版本信息。

flutter run
回到顶部