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

時間  2020-07-06
標籤 Flutter桌面篇 flutter&windows flutter windows 應用 嚐鮮 欄目 Windows 简体版
原文   原文鏈接

零、前言

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

Flutter對MacOS的支持仍是很是好的，由於iOS和MacOS最終都是用XCode構建的，因此運行在Mac桌面上也垂手可得。ios

要讓Flutter運行在Windows上，仍是比較麻煩的，這也形成必定的門檻。這篇就來介紹一下如何支持Windows桌面程序。git

個人FlutterUnit開源項目正在進行windows端的調整適配。主要是數據庫支持方面的調整(sqlflite目前不支持windows)github

1、運行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應用的工程

2. 運行Flutter的Windows項目

開啓windows支持後，重啓AS後，會有下面的下拉選項web

直接運行可能會出錯，由於Windows應用編譯須要Visual Studio工具，就像MacOS須要Xcode同樣sql

能夠執行一下flutter doctor看看狀況shell

3.安裝 VisualStudio

下載完後,flutter doctor時，以下。以後就能夠運行了。數據庫

2、官方桌面項目和一些桌面插件

1.運行官方桌面示例

Github上google的flutter-desktop-embedding是官方的桌面支持項目,macos

裏面有不少官方提供的實用插件，能夠下載看看。編程

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

若是上面的main.dart有個×，八成是SDK沒有配置好，能夠在Settings...-->Languaes &Frameworks-->Flutter面板配置

能夠看出這個項目引用了不少本地的插件，這些插件是目前桌面開發很寶貴的資源。

flutter pub get以後，就能夠運行示例項目了

若是你的電腦沒有在開發者模式，使用插件會出錯。 你能夠在設置-->更新和安全-->開發者選項裏設置

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

而後運行便可，項目運行效果以下:

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。

在點擊左上角選擇顏色時，並無額外處理，因此會報錯，這不太好。應該能夠給個提示什麼的。

  • file_chooser文件選擇插件

很是實用的插件，支持打開文件選擇面板和文件保存面板

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))));
      },
    )
複製代碼

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主要用於一些連接的跳轉。

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

用於獲取文件夾,這個很是有用。

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}------');
}
複製代碼

3、尾聲

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

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

用純Dart的開發的包是package，這和平臺無關，能夠跨平臺使用，好比bloc、provider、flutter_star

目前plugin支持Windows的很少,支持Windows的sqlite數據庫插件能夠用moor_ffi

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表現和操做。

3.標準結尾

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

@張風捷特烈 2020.07.03 未允禁轉
個人公衆號:編程之王
聯繫我--郵箱:1981462002@qq.com --微信:zdl1994328
~ END ~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程