零、前言
最近換了一臺新的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應用嚐鮮](https://i.iter01.com/images/22ef0b4e911a1e8e99120938f94063bc87734242eb0c337a4df0c5f9a73b9a9e.png)
2. 執行Flutter的Windows專案
開啟windows支援後,重啟AS後,會有下面的下拉選項
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/172acd041b8920b4f6d7a312ad3c235c4a923ddc325062bcb23a72f73f7bc6b6.png)
直接執行可能會出錯,因為Windows應用編譯需要Visual Studio工具,就像MacOS需要Xcode一樣
可以執行一下
flutter doctor
看看情況
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/e097b496906904f214c6de926e0256580f1d8f63ba26cd5c3cf9635d9d7711fe.png)
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/2b318a6b00e3d67a380ce6bf307e0da415b38faf500cc566f330047e79af1eb3.png)
3.安裝 VisualStudio
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/f04da9ae655484ea8f8035ea9511c425a095ad263f81f14818602c1758190305.png)
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/77cb72f91772cfe39d4adcbe07632b26209a08c880a9a06661d9fdb252cbf078.png)
下載完後,
flutter doctor
時,如下。之後就可以執行了。
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/b888dc4f531f8a44b4646e2b0d11c8a5d9fcdd53c47ecee16771c8d471b6b174.png)
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/189d427ef9c42500a63222ea2358319273430dcb3b4547af7e46faba73d74ba2.png)
二、官方桌面專案和一些桌面外掛
1.執行官方桌面示例
Github上google的flutter-desktop-embedding是官方的桌面支援專案,
裡面有很多官方提供的實用外掛,可以下載看看。
git clone https://github.com/google/flutter-desktop-embedding.git
複製程式碼
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/2bfa2b03f40e7ff42e52b25e708e5922aa0c41e396022a3a60bf5c7bca2df50e.png)
如果上面的main.dart有個×,八成是SDK沒有配置好,可以在
Settings...-->Languaes &Frameworks-->Flutter
皮膚配置
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/4e0db3b84e54c48a99dc4a11b0f34a17070e1ba6d026996a1816b2fa15e76d83.png)
可以看出這個專案引用了很多本地的外掛,這些外掛是目前桌面開發很寶貴的資源。
flutter pub get
之後,就可以執行示例專案了
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/22c146eeb2a336cf8493a0f5e8455fc89bb00e327ad3615c09ac93acf9f26d20.png)
如果你的電腦沒有在
開發者模式
,使用外掛會出錯。 你可以在設定-->更新和安全-->開發者選項
裡設定
Building with plugins requires symlink support. Please enable Developer Mode in your system settings
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/a7cd0c57756485e581418d34da582e39e0b95c656f614ededa2bc151f197a1d6.png)
然後執行即可,專案執行效果如下:
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/8cf31b4f479cc6925b28a8515bbfe6f6ab2fc6c4877ab887d2fd0069fafe9647.png)
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應用嚐鮮](https://i.iter01.com/images/b44cf16ee34ee3f2f1ed53bf934c0fdff034a4e96417771ef98bf8f1fa1660ac.png)
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/62014d690dd7651deac560153245f972cca5f8e694223e6edd0b5f6d6dcbb5e5.png)
file_chooser
檔案選擇外掛
非常實用的外掛,支援
開啟檔案選擇皮膚
和檔案儲存皮膚
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/1c0676f498ef4f8a105f978ed73f3602f01ba5c1dd54b7f0d488a91bc3678aa4.png)
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應用嚐鮮](https://i.iter01.com/images/34b6031a3dabbc3e9c2c877dd2ec7c85176548df4ba70a4acca7146c6faaadc8.png)
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應用嚐鮮](https://i.iter01.com/images/eed3f19ac758d266a894a53253b9d0ab01ec536766135de87cad0d1ca8c29725.png)
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/e6c4e6218a71cc340546c8d09d77d558684dafb6098d5852e3ca1105c979b003.png)
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應用嚐鮮](https://i.iter01.com/images/d20c9223df5566b32847af9814186c4c3185fece13e30ea927e4f463d4aef011.png)
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應用嚐鮮](https://i.iter01.com/images/498b2ec45ce57cc45e393d952bd7561d4a4dae4634f7a6f21d94558386a75ca7.png)
目前plugin支援Windows的不多,支援Windows的sqlite資料庫外掛可以用
moor_ffi
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/50ac9f43778771032081fe7b9fcadbe847cb706071922c41eaa0f3b6b91b33f9.png)
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應用嚐鮮](https://i.iter01.com/images/6a368adb38664916c5e7b9b7f1bd24245948fc01202890d4ee374dfb865a1813.png)
![【Flutter桌面篇】Flutter&Windows應用嚐鮮](https://i.iter01.com/images/3e61d887197d5ab60aa40a11b44b2212d70afae096d60944639d9c431dd29a90.png)
3.標準結尾
歡迎加入
程式設計技術交流聖地[-Flutter群-]
,一起交流。我想要營造一個分享Flutter技術、問題,平等交流的地方,絕非一個需求/新手答疑群
。
注1: 張口就需求的人勿擾;招聘、廣告、內推勿擾;庸俗劣質言談者勿擾。
注2: 提問前請準備好充分的描述及相關程式碼。
注3: 每週三,群裡英文日,所有人需用英文交流。
@張風捷特烈 2020.07.03 未允禁轉
我的公眾號:程式設計之王
聯絡我--郵箱:1981462002@qq.com --微信:zdl1994328
~ END ~