【Flutter桌面篇】Flutter&Windows應用嚐鮮

張風捷特烈發表於2020-07-03
FlutterWindows

零、前言

最近換了一臺新的windows，把搭建Flutter&Windows應用的環境過程順便記錄分享一下。

Flutter對MacOS的支援還是非常好的，因為iOS和MacOS最終都是用XCode構建的，所以執行在Mac桌面上也輕而易舉。

要讓Flutter執行在Windows上，還是比較麻煩的，這也造成一定的門檻。這篇就來介紹一下如何支援Windows桌面程式。

我的FlutterUnit開源專案正在進行windows端的調整適配。主要是資料庫支援方面的調整(sqlflite目前不支援windows)

一、執行Flutter初始專案

1.FlutterSDK桌面程式建立
  • 目前穩定版不支援Windows，我可以新建個資料夾，下載master分支的Flutter
  • 修改計算機的環境變數，指向master分支的Flutter SDK
  • 開啟Windows支援: flutter config --enable-windows-desktop
  • 建立Flutter專案, 建議命令列建立，比較方便。
---[·  git clone -b master https://github.com/flutter/flutter.git

---[·  flutter --version
Flutter 1.20.0-3.0.pre.124 • channel master • https://github.com/flutter/flutter.git
Framework • revision ec3368ae45 (17 hours ago) • 2020-07-02 01:58:01 -0400
Engine • revision 65ac8be350
Tools • Dart 2.9.0 (build 2.9.0-20.0.dev f8ff12008e)

---[·  flutter channel
Flutter channels:
* master
  dev
  beta
  stable
  
---[·  flutter config --enable-windows-desktop
---[·  E:
---[·  cd Projects\Flutter\Desk
---[·  flutter create toly_flutter
複製程式碼
  • 你可以看到有windows的目錄，這裡面就是Windows應用的工程

【Flutter桌面篇】Flutter&Windows應用嚐鮮

2. 執行Flutter的Windows專案

開啟windows支援後，重啟AS後，會有下面的下拉選項

【Flutter桌面篇】Flutter&Windows應用嚐鮮

直接執行可能會出錯，因為Windows應用編譯需要Visual Studio工具，就像MacOS需要Xcode一樣

可以執行一下flutter doctor看看情況

【Flutter桌面篇】Flutter&Windows應用嚐鮮

【Flutter桌面篇】Flutter&Windows應用嚐鮮

3.安裝 VisualStudio

【Flutter桌面篇】Flutter&Windows應用嚐鮮

【Flutter桌面篇】Flutter&Windows應用嚐鮮

下載完後,flutter doctor時，如下。之後就可以執行了。

【Flutter桌面篇】Flutter&Windows應用嚐鮮

【Flutter桌面篇】Flutter&Windows應用嚐鮮

二、官方桌面專案和一些桌面外掛

1.執行官方桌面示例

Github上google的flutter-desktop-embedding是官方的桌面支援專案,

裡面有很多官方提供的實用外掛，可以下載看看。

 git clone https://github.com/google/flutter-desktop-embedding.git
複製程式碼

【Flutter桌面篇】Flutter&Windows應用嚐鮮

如果上面的main.dart有個×，八成是SDK沒有配置好，可以在Settings...-->Languaes &Frameworks-->Flutter皮膚配置

【Flutter桌面篇】Flutter&Windows應用嚐鮮

可以看出這個專案引用了很多本地的外掛，這些外掛是目前桌面開發很寶貴的資源。

flutter pub get之後，就可以執行示例專案了

【Flutter桌面篇】Flutter&Windows應用嚐鮮

如果你的電腦沒有在開發者模式，使用外掛會出錯。 你可以在設定-->更新和安全-->開發者選項裡設定

Building with plugins requires symlink support. Please enable Developer Mode in your system settings

【Flutter桌面篇】Flutter&Windows應用嚐鮮

然後執行即可，專案執行效果如下:

【Flutter桌面篇】Flutter&Windows應用嚐鮮

2. 示例專案的幾個外掛
  • window_size螢幕尺寸外掛

這個外掛非常有用，桌面不同於手機。有視窗的概念，所以定義程式的視窗大小非常必要。

import 'package:window_size/window_size.dart' as window_size;

void main() {
  // Try to resize and reposition the window to be half the width and height
  // of its screen, centered horizontally and shifted up from center.
  WidgetsFlutterBinding.ensureInitialized();
  // 獲取視窗資訊，然後設定視窗資訊
  window_size.getWindowInfo().then((window) {
    if (window.screen != null) {
      final screenFrame = window.screen.visibleFrame;
      final width = math.max((screenFrame.width / 2).roundToDouble(), 800.0);
      final height = math.max((screenFrame.height / 2).roundToDouble(), 600.0);
      final left = ((screenFrame.width - width) / 2).roundToDouble();
      final top = ((screenFrame.height - height) / 3).roundToDouble();
      final frame = Rect.fromLTWH(left, top, width, height);
      //設定視窗資訊
      window_size.setWindowFrame(frame);
      //設定視窗頂部標題
      window_size
          .setWindowTitle('Flutter Testbed on ${Platform.operatingSystem}');

      if (Platform.isMacOS) {
        window_size.setWindowMinSize(Size(800, 600));
        window_size.setWindowMaxSize(Size(1600, 1200));
      }
    }
  });

  runApp(new MyApp());
}
複製程式碼
  • color_panel顏色選擇外掛

在External Libraries#Flutter Plugin中 你可以看到外掛資訊，可以看到 color_panel外掛沒有支援Windows。

在點選左上角選擇顏色時，並沒有額外處理，所以會報錯，這不太好。應該可以給個提示什麼的。

【Flutter桌面篇】Flutter&Windows應用嚐鮮

【Flutter桌面篇】Flutter&Windows應用嚐鮮

  • file_chooser檔案選擇外掛

非常實用的外掛，支援開啟檔案選擇皮膚和檔案儲存皮膚

【Flutter桌面篇】Flutter&Windows應用嚐鮮

FlatButton(
      child: const Text('OPEN'),
      onPressed: () async {
        String initialDirectory;
        if (Platform.isMacOS || Platform.isWindows) {
          initialDirectory =
              (await getApplicationDocumentsDirectory()).path;
        }
        //開啟檔案選擇皮膚
        final result = await showOpenPanel(
            allowsMultipleSelection: true,
            initialDirectory: initialDirectory);
        Scaffold.of(context).showSnackBar(SnackBar(
            content: Text(_resultTextForFileChooserOperation(
                _FileChooserType.open, result))));
      },
    )
複製程式碼

【Flutter桌面篇】Flutter&Windows應用嚐鮮

FlatButton(
  child: const Text('SAVE'),
  onPressed: () {
    //開啟檔案儲存皮膚
    showSavePanel(suggestedFileName: 'save_test.txt').then((result) {
      Scaffold.of(context).showSnackBar(SnackBar(
        content: Text(_resultTextForFileChooserOperation(
            _FileChooserType.save, result)),
      ));
    });
  },
),
複製程式碼

除此之外，還可以指定過濾型別

FlatButton(
  child: const Text('OPEN MEDIA'),
  onPressed: () async {
    final result =
        await showOpenPanel(allowedFileTypes: <FileTypeFilterGroup>[
      FileTypeFilterGroup(label: 'Images', fileExtensions: <String>[
        'bmp',
        'gif',
        'jpeg',
        'jpg',
        'png',
        'tiff',
        'webp',
      ]),
      FileTypeFilterGroup(label: 'Video', fileExtensions: <String>[
        'avi',
        'mov',
        'mpeg',
        'mpg',
        'webm',
      ]),
    ]);
    Scaffold.of(context).showSnackBar(SnackBar(
        content: Text(_resultTextForFileChooserOperation(
            _FileChooserType.open, result))));
  },
),
複製程式碼
  • url_launcher、url_launcher_fde 外掛

你會看到一些有fde結尾的 外掛，它們在plugins\flutter_plugins裡，包裡面有windows支援。

使用的方式和之前一樣，url_launcher主要用於一些連結的跳轉。

【Flutter桌面篇】Flutter&Windows應用嚐鮮

【Flutter桌面篇】Flutter&Windows應用嚐鮮

FlatButton(
  child: const Text('OPEN ON GITHUB'),
  onPressed: () {
    url_launcher
        .launch('https://github.com/google/flutter-desktop-embedding');
  },
),
複製程式碼
  • path_provider、path_provider_fde 外掛

用於獲取資料夾,這個非常有用。

【Flutter桌面篇】Flutter&Windows應用嚐鮮

void _showDir() async{
  Directory tempDir = await getTemporaryDirectory();
  Directory appDir = await getApplicationSupportDirectory();
  Directory appDocDir = await getApplicationDocumentsDirectory();
  print('----getTemporaryDirectory-----${tempDir.path}------');
  print('----getApplicationSupportDirectory-----${appDir.path}------');
  print('----getApplicationDocumentsDirectory-----${appDocDir.path}------');
}
複製程式碼

三、尾聲

1. 說一下package和plugin的區別:

Flutter對於平臺級的包是plugin，比如主要是和平臺相關的功能，如path_provider、sqlfilte,

用純Dart的開發的包是package，這和平臺無關，可以跨平臺使用，比如bloc、provider、flutter_star

【Flutter桌面篇】Flutter&Windows應用嚐鮮

目前plugin支援Windows的不多,支援Windows的sqlite資料庫外掛可以用moor_ffi

【Flutter桌面篇】Flutter&Windows應用嚐鮮

2. 關於Windows專案:

一直覺得Flutter只是個中介者，每個平臺的專案都是獨立的。

並非是One For All(一者承擔所有)，而是All By One(所有的都可以做)，比如

你想要DIY修改Android平臺的程式碼,用AndroidStudio開啟android資料夾即可

你想要DIY修改iOS平臺的程式碼,用XCode開啟ios資料夾即可

你想要DIY修改MacOS平臺的程式碼,用XCode開啟macos資料夾即可

你想要DIY修改Windows平臺的程式碼,用VS開啟windows資料夾即可

每一個都是一個完整的專案，只是Flutter將它們牽連到了一起，用Dart賦予它們UI表現和操作。

【Flutter桌面篇】Flutter&Windows應用嚐鮮

【Flutter桌面篇】Flutter&Windows應用嚐鮮

3.標準結尾

歡迎加入程式設計技術交流聖地[-Flutter群-]，一起交流。我想要營造一個分享Flutter技術、問題，平等交流的地方，絕非一個需求/新手答疑群。
注1: 張口就需求的人勿擾；招聘、廣告、內推勿擾；庸俗劣質言談者勿擾。
注2: 提問前請準備好充分的描述及相關程式碼。
注3: 每週三，群裡英文日,所有人需用英文交流。

@張風捷特烈 2020.07.03 未允禁轉
我的公眾號:程式設計之王
聯絡我--郵箱:1981462002@qq.com --微信:zdl1994328
~ END ~

相關文章