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

  回車

 

 

 

 

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