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 upgrade

6. 遷移

你的代碼里大部分需要更改的代碼，都是可以輕易推導(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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。