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