Flutter - flutter desktop embedding / flutter 桌面支持

2019年5月9日，隨着谷歌在IO19宣布Flutter支持Web平台，就標志着Flutter已經全面支持所有平台（移動、網頁、桌面、嵌入式）。

 

 

現編一個跨平台小段子：

微軟Xarmarin：喵喵喵？？？不是我最先做的嗎，咋沒人關注？？？

Facebook React Native：我是做的最好的跨平台。

谷歌Flutter：去你的吧，支持桌面端不，嵌入式？哈哈哈

蘋果SwiftUI：老司機們，等等我。

 

 

但是這次要說的是，Flutter for desktop，Flutter支持桌面版已經有很長一段時間了，但是一直都沒大研究。主要原因就是現在除了Flutter for mobile可以用在production以外，其他的三個平台知識現在已經驗證技術上可行，但仍處於technical preview。像現在的官方大部分plugins，仍然沒有適配desktop版本，更不要說第三方的plugins。這些plugins在桌面上調用時，輕者會點擊毫無反應，重者會導致程序崩潰。而且現在桌面版普遍的一個問題就是，當app最小化的時候，app崩潰。

所以大家激動歸激動，千萬別沖動。

不過既然有了flutter for desktop，我們就嘗鮮一下，看看在桌面上是什么效果。

 

1 工具准備

我用的是Windows平台，需要Visual Studio 2017 or 2019，並且包含“C++桌面開發負載”。其他平台可以去Github主頁查看。

 

2 下載官方示例

打開 Desktop Embedding for Flutter，下載整個項目並解壓。把整個example文件夾拖進VS Code或者在VS Code 里面打開文件夾，

 

 然后VS Code提示 Some packages are missing or out of date, would you like to get them now?

 毫不猶豫的點擊Get Packages按鈕，或者在終端輸入flutter packages get也行

 如果網絡沒問題的話或者鏡像配置正確（下載不下來或者配置鏡像自行搜索，本文不做介紹）的話，VS Code就會輸出

[example] flutter packages get
Running "flutter pub get" in example...                             6.7s
exit code 0

 

3 桌面版運行配置

由於我們下載的是官方示例，所里都配置好了。但是我們還是要看一下，因為以后要移植自己的項目鴨~~~

  3a 打開pubspec.yaml文件

# See https://github.com/flutter/flutter/wiki/Desktop-shells#fonts
  fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto/Roboto-Thin.ttf
          weight: 100
        - asset: fonts/Roboto/Roboto-Light.ttf
          weight: 300
        - asset: fonts/Roboto/Roboto-Regular.ttf
          weight: 400
        - asset: fonts/Roboto/Roboto-Medium.ttf
          weight: 500
        - asset: fonts/Roboto/Roboto-Bold.ttf
          weight: 700
        - asset: fonts/Roboto/Roboto-Black.ttf
          weight: 900

 

官方指定了Roboto字體，大部分應用也都需要指定一個字體。但是現在的話，不指定，也可以運行。不過有的Widgets可能在字體顯示上有異常。

官方的解釋：

Fonts
Flutter applications may default to fonts that are standard for the target platform, but unavailable on desktop. For instance, if the target platform is TargetPlatform.iOS the Material library will default to San Francisco, which is available on macOS but not Linux or Windows.

Most applications will need to set the font (e.g., via ThemeData) based on the host platform, or set a specific font that is bundled with the application. Other widgets that doesn't use ThemeData may not display without extra font specification (e.g., the DEBUG banner's text).

Symptoms of missing fonts include text failing to display and/or console logging about failure to load fonts.

 

  3b 打開main.dart

       設置運行平台

import 'package:flutter/foundation.dart'
    show debugDefaultTargetPlatformOverride;

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;

  runApp(new MyApp());
}

 

   3c 切換flutter到master channel

        在終端中輸入

flutter channel master

  3d 升級master channel到最新版，然后會自動運行運行flutter doctor

flutter upgrade

  3e 設置運行平台為桌面模式

      如果VS Code終端是PowerShell，那么輸入

$env:ENABLE_FLUTTER_DESKTOP="true"

      CMD輸入

set ENABLE_FLUTTER_DESKTOP=true

 

4 Flutter Run

  如果按照上面操作沒有問題的話，那么最激動🤩人心的時刻就要到到來了

  在終端輸入

flutter run

  回車

 

 

 

 

噔噔燈燈...(*￣０￣)ノ