Flutter 最近發(fā)布了 Flutter V2.5.1，其性能得到了很大提升，支持 Web、macOS、Android 和 iOS。 這就是為什么今天我們使用在 Web、macOS 應用、Android 和 iOS 應用上運行的 flutter 創(chuàng )建響應式博客主題。 此外，我們創(chuàng )建了一個(gè)具有自定義懸停動(dòng)畫(huà)的動(dòng)畫(huà)網(wǎng)絡(luò )菜單。 最后，您將學(xué)習如何使用 Flutter 制作響應式應用程序。
目前已新增桌面支持
預覽地址：http://47.117.1.68:251/#/
嗶哩嗶哩
https://www.bilibili.com/video/BV1oA411T7nD?spm_id_from=333.999.0.0
項目地址
github
https://github.com/ITmxs/Flutter–Mobile-Tablet-and-Web
gitee
https://gitee.com/itmxs/Flutter–Mobile-Tablet-and-Web/
目前已新增桌面支持
主分支默認空安全
pub global activate fvm
打印已安裝的 fvm 列表fvm list，
通過(guò)運行fvm use 2.5.1（在我的例子中是 12.5.1，它可能會(huì )根據您所需的版本而有所不同）命令選擇要使用的 Flutter SDK 版本，如果尚未安裝，它將下載 SDK；
現在，您可以通過(guò)運行來(lái)檢查項目中是否正在運行 flutter flutter；
此外，您還可以通過(guò)再次調用來(lái)檢查 Flutter SDK 版本是否設置fvm list。
fvm use 2.5.1–force
對于就項目我們如果想切到 fvm 的 flutter 環(huán)境，這個(gè)步驟還是非常簡(jiǎn)單的。
在項目根路徑下執行：
$ fvm use 2.5.1–force
完成上面的命令，會(huì )有個(gè) .fvm 文件夾生成，然后配置 IDE，方法同上。
可以愉快的玩耍 flutter 了。
flutter2.5.1_null-safety，并切換到新分支。
dart版本，是否為2.12或更高通過(guò)以下命令檢查你的 package 的遷移狀態(tài)
dart pub outdated --mode=null-safety
上面的輸出說(shuō)明了所有依賴(lài)的 package 都有可使用的已支持空安全的預發(fā)布版本。
在遷移你的 package 的代碼之前，請將它的依賴(lài)項升級至空安全版本。
運行 dart pub upgrade --null-safety 將依賴(lài)升級至支持空安全的最新版本。 注意： 該命令會(huì )更改你的 pubspec.yaml 文件。
dart pub upgrade --null-safety
運行 dart pub upgrade。
dart pub upgrade
你的代碼里大部分需要更改的代碼，都是可以輕易推導的。例如，如果一個(gè)變量可以為空，它的類(lèi)型需要 ? 后綴。一個(gè)不可以為空的命名參數，需要使用 required 標記。
針對遷移，你有兩個(gè)選項可以選擇：
遷移工具會(huì )帶上一個(gè)非空安全的 package ，將它轉換至空安全。你可以先在代碼中添加 提示標記
開(kāi)始轉換前，請做好如下的準備：
dart pub outdated --mode=null-safety 以確保所有依賴(lài)為最新且空安全。在包含 pubspec.yaml 的目錄下，執行 dart migrate 命令，啟動(dòng)遷移工具。
dart migrate
如果你的 package 可以進(jìn)行遷移，工具會(huì )輸出類(lèi)似以下的內容：
使用 Chrome 瀏覽器訪(fǎng)問(wèn) URL，你可以看到一個(gè)交互式的界面，引導你進(jìn)行遷移：
若要了解每個(gè)變化（或者未變化）的原因，點(diǎn)擊 Proposed Edits 窗口中的行數，原因會(huì )出現在 Edit Details 窗口中。
點(diǎn)擊 line 3 鏈接，你可以看到遷移工具添加 ! 的原因。而因為你知道 zero 不會(huì )為空，所以你可以改進(jìn)遷移結果。
當分析結果推導了錯誤的可空性時(shí)，你可以添加臨時(shí)的提示標記來(lái)改變建議的編輯：
在遷移工具的 Edit Details 窗格中，你可以通過(guò) Add /\*?\*/ hint 和 Add /\*!\*/ hint 按鈕來(lái)添加提示標記。
按下這些按鈕，相應的標記會(huì )立刻添加到代碼中，并且 無(wú)法撤銷(xiāo)。如果你想刪除標記，可以和平常一樣使用代碼編輯器刪除它。
就算遷移工具正在運行，你也可以使用編輯器添加提示標記。由于你的代碼還未遷移到空安全，所以無(wú)法使用空安全的新特性。但是你可以進(jìn)行與空安全無(wú)關(guān)的改動(dòng)，例如重構。
當你完成編輯后，點(diǎn)擊 Rerun from sources 進(jìn)行更改。
盡管我們希望你能一次性完成遷移工作，但對于大體量的應用或 package 而言并不是簡(jiǎn)單的事。如果你想只遷移部分文件，請將暫時(shí)不遷移的文件前方的綠色勾選框取消勾選。
如果你不想使用遷移工具，你也可以手動(dòng)進(jìn)行遷移。
我們推薦你 優(yōu)先遷移最下層的庫 —— 指的是沒(méi)有導入其他 package 的庫。接著(zhù)遷移直接依賴(lài)了下層庫的依賴(lài)庫。最后再遷移依賴(lài)項最多的庫。
舉個(gè)例子，假設你的 lib/src/util.dart 導入了其他（空安全）的 package 和核心庫，但它沒(méi)有包含任何 import '<本地路徑>' 的引用。那么你應當優(yōu)先考慮遷移 util.dart，然后遷移依賴(lài)了 util.dart 的文件。如果有一些循環(huán)引用的庫（例如 A 引用了 B，B 引用了 C，C 引用了 A），建議同時(shí)對它們進(jìn)行遷移。
手動(dòng)對 package 進(jìn)行遷移時(shí)，請參考以下步驟：
編輯 package 的 pubspec.yaml 文件，將最低 SDK 版本設置到至少為 2.12.0：
environment:
sdk: '>=2.12.0 <3.0.0'
重新生成 package 的配置文件：
$ dart pub get
在版本最低是 2.12.0 的 SDK 上運行 dart pub get 時(shí)，會(huì )將每個(gè) package 的默認 SDK 最低版本設定為 2.12，并且默認它們已經(jīng)遷移至空安全。
在你的 IDE 上打開(kāi)package 。
你也許會(huì )看到很多錯誤，沒(méi)關(guān)系，讓我們繼續。
利用分析器來(lái)辨析靜態(tài)錯誤，逐個(gè)遷移 Dart 文件。
按需添加 ?、!、required 以及 late 來(lái)消除靜態(tài)錯誤。
更新你的 package（在 IDE 或命令行工具中使用 dart pub get）后在 IDE 或命令行工具中對你的代碼進(jìn)行 靜態(tài)分析：
$ dart pub get
$ dart analyze # or `flutter analyze`
如果你的代碼通過(guò)了分析，接下來(lái)可以開(kāi)始測試：
$ dart test # or `flutter test`
你可能需要更新使用了空值作為預期用例的測試代碼。
如果你需要對代碼作出大量的更改，那么你可能需要重新對代碼進(jìn)行遷移。這時(shí)請先回滾代碼更改，再運行遷移工具進(jìn)行遷移。
我們希望你完成遷移后盡快將其發(fā)布，可以作為預覽版：
參考文章：
https://dart.cn/null-safety/migration-guide
細心的小伙伴可能會(huì )發(fā)現,安卓有android文件夾, iOS 有ios的文件夾,但目前目錄結構是沒(méi)有web文件夾的,
輸入下面的命令創(chuàng )建web文件
flutter create .
然后就會(huì )創(chuàng )建一系列web相關(guān)的文件 ,如下圖, 目錄結構也會(huì )多一個(gè)web的文件夾. 如下圖
我們知道要給android手機用,需要打包apk出來(lái), 要給iPhone手機用,需要打包ipa出來(lái);同樣的道理要給瀏覽器用,也需要打包web相關(guān)代碼.
flutter build web --web-renderer html
flutter build web
flutter build web --web-renderer canvaskit
這將生成包括資源的應用程序，并將文件放入項目的 /build/web 目錄中。
一般的應用程序的 release 版本具有以下結構：
content_copy
/build/web
assets
AssetManifest.json
FontManifest.json
NOTICES
fonts
MaterialIcons-Regular.ttf
<other font files>
<image files>
index.html
main.dart.js
main.dart.js.map
啟動(dòng) Web 服務(wù)器（例如，python -m SimpleHTTPServer 8000，或使用 dhttpd package），然后打開(kāi) /build/web 目錄。在瀏覽器中訪(fǎng)問(wèn) localhost:8000（前文用 Python 啟動(dòng)的服務(wù)器）以查看應用程序的 release 版本。
經(jīng)過(guò)測試,上面三種方式都可以打包web版本, 其中第一種是針對移動(dòng)端的打包方式, 第二種是一般的打包方式, 第三種是針對pc端的打包方式.
那這3種方式打包出來(lái),運行起來(lái)有什么不同呢
flutter build web --web-renderer html 打開(kāi)速度最快,兼容性好(是指ie,chrome,safari等瀏覽器兼容)
flutter build web 打開(kāi)速度一般,兼容性好
flutter build web --web-renderer canvaskit 打開(kāi)速度最慢,兼容性好
就是使用第一種打包方式會(huì )比較好
flutter build web --web-renderer html
這個(gè)屬于正常的, 這個(gè)不像前端web ,html css js那套,點(diǎn)擊index.html就能訪(fǎng)問(wèn)的. 在flutter里面是不能直接訪(fǎng)問(wèn)的,一定要放到容器里面去才能訪(fǎng)問(wèn),如:tomcat等
那是因為文件路徑引用不對.解決辦法有2種
方法1:
用編輯器打開(kāi)index.html,能看到源文件,把,改成
方法2:
用編輯器打開(kāi)index.html,能看到源文件,把,改成你服務(wù)器的路徑比喻說(shuō):
然后nginx代理
#flutter
server {
listen 251 ;
server_name flutterblog;
location / {
root /root/study/flutter/web/;
index index.html index.htm;
# proxy_pass http://127.0.0.1:12345;
# access_log /usr/local/nginx/logs/go.101.log ;
}
}
?```undefined
撒花
我們希望你完成遷移后盡快將其發(fā)布，可以作為預覽版：
參考文章：
https://dart.cn/null-safety/migration-guide
遷移桌面
flutter config --enable--desktop
要將桌面支持添加到現有 Flutter 項目，請從項目根目錄在終端中運行以下命令：
$ flutter create --platforms=windows,macos,linux .
這會(huì )將必要的桌面文件和目錄添加到您現有的 Flutter 項目中。要僅添加特定桌面平臺，請將platforms列表更改為僅包含您要添加的平臺。
必須下載vs
https://visualstudio.microsoft.com/zh-hans/thank-you-downloading-visual-studio/?sku=Community&rel=16
可以看到build目錄下已經(jīng)有windows
比如我的main.dart文件是這樣的
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:outlook/constants.dart';
import 'package:outlook/screens/main/main_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter blog',
theme: ThemeData(),
home: MainScreen(),
);
}
}
那么我的main_desktop.dart文件就是這樣的
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:outlook/constants.dart';
import 'package:outlook/screens/main/main_screen.dart';
void main() {
debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;//這句話(huà)很關(guān)鍵
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter blog',
theme: ThemeData(),
home: MainScreen(),
);
}
}
flutter和go都是google出品，如何安裝做一下不做介紹
go get -u github.com/go-flutter-desktop/hover
稍等會(huì )hover就會(huì )出現在go語(yǔ)言的SDK下面的bin文件夾下
你又會(huì )發(fā)現報錯：**exec: “gcc”: executable file not found in %PATH%**這是缺少一個(gè)環(huán)境變量，別急，補上去，
https://sourceforge.net/projects/mingw-w64/files/mingw-w64/
安裝過(guò)程會(huì )下載很多東西，都到這一步了，不要放棄，接下來(lái)配置環(huán)境變量
C:\Program Files (x86)\mingw-w64\i686-6.2.0-posix-sjlj-rt_v5-rev1\mingw32\bin
接下來(lái)，我們到你的flutter項目的目錄下面
hover init github.com/my-organization/flutter_bloc_super #前面的地址固定，后面寫(xiě)你項目的名字
就會(huì )出現一個(gè)go文件夾
生成這個(gè)文件之后再執行，
hover run
最后一步大功告成
變身！！！！！
如圖的路徑就是打包后生成的exe文件，雙擊執行，就好了。
如果報錯goland編譯報錯cc1.exe: sorry, unimplemented: 64-bit mode not compiled in
主要原因是本地的cc1.exe版本不是64位的，在64位環(huán)境下無(wú)法編譯
請下載這個(gè)、https://sourceforge.net/projects/mingw-w64/
聯(lián)系客服
