Logo

菜单

发布于 2026-01-06 1 阅读
0

Flutter桌面版

Flutter桌面版

已编辑

随着跨平台趋势的兴起🤩，Flutter 相较于其他框架树立了更高的标准。其主要优势在于它可以直接编译成机器代码。

让我们来看看 Flutter 在桌面应用程序中是如何实现的😁。由于该功能尚未标准化，因此它在仓库的master分支中可用。

将仓库克隆到类似/etc/binLinux 或C:\Program Files\Windows 的文件夹中。

git clone https://github.com/flutter/flutter.git
Enter fullscreen mode Exit fullscreen mode

如果需要检出其他版本，可以列出远程分支并检出使用它们。

git branch -a #will list out branches
git checkout <your-specific-branch>
Enter fullscreen mode Exit fullscreen mode

克隆完成后，将 bin 文件夹路径及其前缀添加到环境变量中。

  • Linuxexport PATH=$PATH:<your-flutter-path>/flutter/bin
  • 视窗setx PATH="%path%;<your-flutter-path/flutter/bin>"

请务必将其添加到Linux 系统的.bashrc 文件或Windows 系统的控制台环境变量中。这样就能永久保存该路径。

现在看看你是否能够访问flutter-cli，
flutter --version
这条命令会安装一些 Flutter 的二进制文件，稍后会打印出版本号。我写这篇文章时，版本号是 1.13.5。

Flutter 1.13.5-pre.11 • channel master • https://github.com/flutter/flutter.git
Framework • revision 72a3d914ee (6 hours ago) • 2019-12-20 08:50:42 -0800
Engine • revision 472197a8e9
Tools • Dart 2.8.0 (build 2.8.0-dev.0.0 8d11c1dce6)
Enter fullscreen mode Exit fullscreen mode

现在我们来检查它是否具备运行桌面应用程序所需的所有依赖项。为此，我们需要运行……

#Prints out devices if available for desktop
flutter devices
1 connected device:

Windows • Windows • windows-x64 • Microsoft Windows [Version 10.0.18362.535]
Enter fullscreen mode Exit fullscreen mode

现在，让我们看看构建应用程序的工具链是否准备就绪。

#This'll run a basic diagnosis on the requirements
flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, v1.13.5-pre.11, on Microsoft Windows [Version 10.0.18362.535], locale en-IN)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    X Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed
      instructions.
[!] Visual Studio - develop for Windows (Visual Studio Community 2019 16.2.2)
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop
      development with C++" workload, and include these components:
        MSBuild
        MSVC v142 - VS 2019 C++ x64/x86 build tools
       - If there are multiple versions, install the latest one
        Windows 10 SDK (10.0.17763.0)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.41.1)
[√] Connected device (1 available)

! Doctor found issues in 2 categories.
Enter fullscreen mode Exit fullscreen mode

就我而言，我缺少构建桌面应用程序所需的三个依赖项，它们是：

  • Windows 10 SDK
  • MSBuild
  • MSVC V142

启动 Visual Studio 安装程序。在 Visual Studio 2019 下选择“修改”选项。
然后选择以下组件。

构建选项

另外，请务必选中包含 MSVC v142 的选项。
msvc v142

现在点击“修改”开始安装过程。安装完成后，运行 flutter doctor 命令检查是否一切正常。

安装完成后，重新运行 flutter doctor 命令，查看一切是否正常。

flutter doctor
[√] Flutter (Channel master, v1.13.5-pre.11, on Microsoft Windows [Version 10.0.18362.535], locale en-IN)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    X Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed
      instructions.
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.4.2)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.41.1)
[√] Connected device (1 available)

! Doctor found issues in 1 category.
Enter fullscreen mode Exit fullscreen mode

离开 Android 工具链，让我们运行第一个项目：Flutter Desktop。创建一个 Flutter 项目。进入你希望存放应用程序源代码的目录，或者你认为适合作为测试环境的目录。
由于该flutter create命令仅支持 macOS，我们需要使用一个示例仓库，其中包含已修改的模板，该模板也适用于 Linux 系统。

git clone https://github.com/google/flutter-desktop-embedding desktop_app
Enter fullscreen mode Exit fullscreen mode

现在让我们为项目启用桌面功能。

  • flutter config --enable-linux-desktop启用Linux。
  • flutter config --enable-macos-desktop启用 macOS。
  • flutter config --enable-windows-desktop启用 Windows。

启用该功能后，实际上会设置环境变量。现在，请切换到项目文件夹，并进入一个名为 example 的文件夹。
cd desktop_app/example

在项目树中，您可以找到特定于 Windows 和 Linux 的文件夹，其中包含特定于平台的桌面应用程序配置，这些配置不稳定，并且正如 Flutter 团队所说，尚未更改。

├───fonts
│   └───Roboto
├───lib
├───linux
│   └───flutter
├───macos
│   ├───Flutter
│   ├───Runner
│   │   ├───Assets.xcassets
│   │   │   └───AppIcon.appiconset
│   │   ├───Base.lproj
│   │   └───Configs
│   ├───Runner.xcodeproj
│   │   ├───project.xcworkspace
│   │   │   └───xcshareddata
│   │   └───xcshareddata
│   │       └───xcschemes
│   └───Runner.xcworkspace
│       └───xcshareddata
├───test
└───windows
    ├───flutter
    ├───resources
    └───scripts
Enter fullscreen mode Exit fullscreen mode

现在让我们构建应用程序，看看它的效果如何。

flutter run
Enter fullscreen mode Exit fullscreen mode

构建完成后，应用程序启动，您可以进行编辑以查看更改是否生效。
您需要修改lib\main.dart文件。
选中终端并按回车键r key即可刷新应用程序。

Windows 应用

希望你喜欢这篇文章🤗，欢迎在评论区留下你的想法，也欢迎提出任何疑问。🏇
其实，我才刚刚开始我的 Flutter 之旅。

文章来源：https://dev.to/droidmakk/flutter-for-desktop-2on5
“高效懒惰”的例子有哪些？
开源：我的第一个 Pull Req...