零、前言
最近換了一臺新的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應用的工程

2. 執行Flutter的Windows專案
開啟windows支援後,重啟AS後,會有下面的下拉選項

直接執行可能會出錯,因為Windows應用編譯需要Visual Studio工具,就像MacOS需要Xcode一樣
可以執行一下
flutter doctor
看看情況


3.安裝 VisualStudio


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


二、官方桌面專案和一些桌面外掛
1.執行官方桌面示例
Github上google的flutter-desktop-embedding是官方的桌面支援專案,
裡面有很多官方提供的實用外掛,可以下載看看。
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}------');
}
複製程式碼
三、尾聲
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 ~