Flutter Native View 项目下载及安装教程

1. 项目介绍

Flutter Native View 是一个开源项目，旨在将原生窗口嵌入到 Flutter 应用程序中。该项目支持在 Flutter 窗口中嵌入原生 Windows 组件，并提供滚动支持和部件放置功能。通过该项目，开发者可以在 Flutter 应用中直接嵌入第三方窗口，如 WebView 或 VLC 播放器窗口，从而实现更丰富的用户界面和交互体验。

2. 项目下载位置

要下载 Flutter Native View 项目，请访问项目的 GitHub 仓库。项目的下载位置如下：

https://github.com/alexmercerind/flutter_native_view.git

3. 项目安装环境配置

在安装 Flutter Native View 项目之前，请确保您的开发环境已配置好以下工具和依赖项：

• Flutter SDK: 确保您已安装并配置好 Flutter SDK。您可以通过运行以下命令来检查 Flutter 是否已正确安装：

  flutter doctor
  

  如果 Flutter 未安装，请参考 Flutter 官方安装指南 进行安装。

• Dart SDK: Flutter 依赖于 Dart SDK，确保 Dart SDK 已正确安装并与 Flutter 版本兼容。

• Visual Studio: 如果您在 Windows 上开发，建议安装 Visual Studio 并确保已安装 C++ 开发工具。

• Git: 确保您已安装 Git，以便从 GitHub 仓库克隆项目。

环境配置示例

以下是配置环境的示例图片：

4. 项目安装方式

4.1 克隆项目

首先，使用 Git 克隆 Flutter Native View 项目到本地：

git clone https://github.com/alexmercerind/flutter_native_view.git

4.2 进入项目目录

克隆完成后，进入项目目录：

cd flutter_native_view

4.3 安装依赖

在项目目录中，运行以下命令以安装项目依赖：

flutter pub get

4.4 运行项目

安装依赖后，您可以通过以下命令运行项目：

flutter run

5. 项目处理脚本

Flutter Native View 项目包含一些处理脚本，用于配置和初始化项目。以下是一些常用的处理脚本：

5.1 初始化插件

在 main.dart 文件中，您需要初始化 Flutter Native View 插件：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await FlutterNativeView.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Native View Example'),
        ),
        body: Center(
          child: NativeView(
            controller: NativeViewController(
              handle: FindWindow(nullptr, 'VLC Media Player'.toNativeUtf16()),
              hitTestBehavior: HitTestBehavior.translucent,
            ),
          ),
        ),
      ),
    );
  }
}

5.2 配置原生窗口

在 windows/runner/main.cpp 文件中，添加以下代码以配置原生窗口：

#include <flutter/dart_project.h>
#include <flutter/flutter_view_controller.h>
#include <windows.h>
#include "flutter_native_view/flutter_native_view_plugin.h"
#include "flutter_window.h"
#include "utils.h"

int APIENTRY wWinMain(_In_ HINSTANCE instance, _In_opt_ HINSTANCE prev,
                      _In_ wchar_t *command_line, _In_ int show_command) {
  // ...
  flutter_native_view::NativeViewContainer::GetInstance()->Create();
  // ...
}

通过以上步骤，您可以成功下载、安装并运行 Flutter Native View 项目。