當前位置：首頁 > 运维知识 > linux >内容正文

linux

Flutter Web实战项目打造真正跨平台应用（windows，android，ios，linux，macos，web）

發布時間：2025/3/19 linux 58 豆豆

生活随笔收集整理的這篇文章主要介紹了 Flutter Web实战项目打造真正跨平台应用（windows，android，ios，linux，macos，web）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Flutter Web項目

Flutter 最近發布了 Flutter V2.5.1，其性能得到了很大提升，支持 Web、macOS、Android 和 iOS。這就是為什么今天我們使用在 Web、macOS 應用、Android 和 iOS 應用上運行的 flutter 創建響應式博客主題。此外，我們創建了一個具有自定義懸停動畫的動畫網絡菜單。最后，您將學習如何使用 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/

文章目錄

Flutter Web項目
使用fvm版本控制
- 全局激活
- 勾號表示該版本正在您的項目中運行。
- 如果你的是舊項目添加 fvm
博客項目遷移空安全教程
1. 創建分支命名為
2.執行flutter doctor
3.查看`dart`版本，是否為`2.12`或更高
4. 檢查所有依賴的遷移狀態
5.升級依賴
6. 遷移
- 6.1使用遷移工具
- - - 理解遷移的結果
    - 改進遷移的結果
    - 只遷移部分文件
  - 6.2手動遷移
- 6.3.分析
- 6.4測試
7發布web版
- 1. 創建web文件夾
- 2. 打包web版本
- 3**結論**
- - 坑1: 找到了index.html,用瀏覽器打開一片空白
  - 坑2: 已經用nginx代理,用瀏覽器打開還是一片空白
8發布windows版
- 1.為現有的 Flutter 應用程序添加桌面支持
- 2..創建main_desktop.dart文件
- 3.hover安裝和環境配置
- 4.初始化，并打包
- 坑1

目前已新增桌面支持

主分支默認空安全

使用fvm版本控制

全局激活

pub global activate fvm
打印已安裝的 fvm 列表fvm list，

通過運行fvm use 2.5.1（在我的例子中是 12.5.1，它可能會根據您所需的版本而有所不同）命令選擇要使用的 Flutter SDK 版本，如果尚未安裝，它將下載 SDK；
現在，您可以通過運行來檢查項目中是否正在運行 flutter flutter；
此外，您還可以通過再次調用來檢查 Flutter SDK 版本是否設置fvm list。

勾號表示該版本正在您的項目中運行。

fvm use 2.5.1–force

如果你的是舊項目添加 fvm

對于就項目我們如果想切到 fvm 的 flutter 環境，這個步驟還是非常簡單的。
在項目根路徑下執行：
$ fvm use 2.5.1–force

完成上面的命令，會有個 .fvm 文件夾生成，然后配置 IDE，方法同上。
可以愉快的玩耍 flutter 了。

博客項目遷移空安全教程

1. 創建分支命名為

flutter2.5.1_null-safety，并切換到新分支。

2.執行flutter doctor

3.查看dart版本，是否為2.12或更高

4. 檢查所有依賴的遷移狀態

通過以下命令檢查你的 package 的遷移狀態

dart pub outdated --mode=null-safety

上面的輸出說明了所有依賴的 package 都有可使用的已支持空安全的預發布版本。

5.升級依賴

在遷移你的 package 的代碼之前，請將它的依賴項升級至空安全版本。

運行 dart pub upgrade --null-safety 將依賴升級至支持空安全的最新版本。 注意： 該命令會更改你的 pubspec.yaml 文件。

dart pub upgrade --null-safety

運行 dart pub upgrade。

dart pub upgrade

6. 遷移

你的代碼里大部分需要更改的代碼，都是可以輕易推導的。例如，如果一個變量可以為空，它的類型需要 ? 后綴。一個不可以為空的命名參數，需要使用 required 標記。

針對遷移，你有兩個選項可以選擇：

使用遷移工具，它可以幫你處理大多數可推導的變更。
自己動手，豐衣足食。

6.1使用遷移工具

遷移工具會帶上一個非空安全的 package ，將它轉換至空安全。你可以先在代碼中添加提示標記

開始轉換前，請做好如下的準備：

使用最新的 Dart SDK 穩定版本。
運行 dart pub outdated --mode=null-safety 以確保所有依賴為最新且空安全。

在包含 pubspec.yaml 的目錄下，執行 dart migrate 命令，啟動遷移工具。

dart migrate

如果你的 package 可以進行遷移，工具會輸出類似以下的內容：

使用 Chrome 瀏覽器訪問 URL，你可以看到一個交互式的界面，引導你進行遷移：

理解遷移的結果

若要了解每個變化（或者未變化）的原因，點擊 Proposed Edits 窗口中的行數，原因會出現在 Edit Details 窗口中。

點擊 line 3 鏈接，你可以看到遷移工具添加 ! 的原因。而因為你知道 zero 不會為空，所以你可以改進遷移結果。

改進遷移的結果

當分析結果推導了錯誤的可空性時，你可以添加臨時的提示標記來改變建議的編輯：

在遷移工具的 Edit Details 窗格中，你可以通過 Add /\*?\*/ hint 和 Add /\*!\*/ hint 按鈕來添加提示標記。

按下這些按鈕，相應的標記會立刻添加到代碼中，并且 無法撤銷。如果你想刪除標記，可以和平常一樣使用代碼編輯器刪除它。
就算遷移工具正在運行，你也可以使用編輯器添加提示標記。由于你的代碼還未遷移到空安全，所以無法使用空安全的新特性。但是你可以進行與空安全無關的改動，例如重構。

當你完成編輯后，點擊 Rerun from sources 進行更改。

只遷移部分文件

盡管我們希望你能一次性完成遷移工作，但對于大體量的應用或 package 而言并不是簡單的事。如果你想只遷移部分文件，請將暫時不遷移的文件前方的綠色勾選框取消勾選。

6.2手動遷移

如果你不想使用遷移工具，你也可以手動進行遷移。

我們推薦你 優先遷移最下層的庫 —— 指的是沒有導入其他 package 的庫。接著遷移直接依賴了下層庫的依賴庫。最后再遷移依賴項最多的庫。

舉個例子，假設你的 lib/src/util.dart 導入了其他（空安全）的 package 和核心庫，但它沒有包含任何 import '<本地路徑>' 的引用。那么你應當優先考慮遷移 util.dart，然后遷移依賴了 util.dart 的文件。如果有一些循環引用的庫（例如 A 引用了 B，B 引用了 C，C 引用了 A），建議同時對它們進行遷移。

手動對 package 進行遷移時，請參考以下步驟：

編輯 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 時，會將每個 package 的默認 SDK 最低版本設定為 2.12，并且默認它們已經遷移至空安全。

在你的 IDE 上打開package 。
你也許會看到很多錯誤，沒關系，讓我們繼續。

利用分析器來辨析靜態錯誤，逐個遷移 Dart 文件。
按需添加 ?、!、required 以及 late 來消除靜態錯誤。

6.3.分析

更新你的 package（在 IDE 或命令行工具中使用 dart pub get）后在 IDE 或命令行工具中對你的代碼進行靜態分析：

$ dart pub get $ dart analyze # or `flutter analyze`

6.4測試

如果你的代碼通過了分析，接下來可以開始測試：

$ dart test # or `flutter test`

你可能需要更新使用了空值作為預期用例的測試代碼。

如果你需要對代碼作出大量的更改，那么你可能需要重新對代碼進行遷移。這時請先回滾代碼更改，再運行遷移工具進行遷移。

7發布web版

我們希望你完成遷移后盡快將其發布，可以作為預覽版：

參考文章：
https://dart.cn/null-safety/migration-guide

細心的小伙伴可能會發現,安卓有android文件夾, iOS 有ios的文件夾,但目前目錄結構是沒有web文件夾的,

1. 創建web文件夾

輸入下面的命令創建web文件

flutter create .

然后就會創建一系列web相關的文件 ,如下圖, 目錄結構也會多一個web的文件夾. 如下圖

2. 打包web版本

我們知道要給android手機用,需要打包apk出來, 要給iPhone手機用,需要打包ipa出來;同樣的道理要給瀏覽器用,也需要打包web相關代碼.

flutter build web --web-renderer htmlflutter build web flutter build web --web-renderer canvaskit

這將生成包括資源的應用程序，并將文件放入項目的 /build/web 目錄中。

一般的應用程序的 release 版本具有以下結構：

content_copy

/build/webassetsAssetManifest.jsonFontManifest.jsonNOTICESfontsMaterialIcons-Regular.ttf<other font files><image files>index.htmlmain.dart.jsmain.dart.js.map

啟動 Web 服務器（例如，python -m SimpleHTTPServer 8000，或使用 dhttpd package），然后打開 /build/web 目錄。在瀏覽器中訪問 localhost:8000（前文用 Python 啟動的服務器）以查看應用程序的 release 版本。

經過測試,上面三種方式都可以打包web版本, 其中第一種是針對移動端的打包方式, 第二種是一般的打包方式, 第三種是針對pc端的打包方式.

那這3種方式打包出來,運行起來有什么不同呢

flutter build web --web-renderer html 打開速度最快,兼容性好(是指ie,chrome,safari等瀏覽器兼容)

flutter build web 打開速度一般,兼容性好

flutter build web --web-renderer canvaskit 打開速度最慢,兼容性好

3結論

就是使用第一種打包方式會比較好

flutter build web --web-renderer html

坑1: 找到了index.html,用瀏覽器打開一片空白

這個屬于正常的, 這個不像前端web ,html css js那套,點擊index.html就能訪問的. 在flutter里面是不能直接訪問的,一定要放到容器里面去才能訪問,如:tomcat等

坑2: 已經用nginx代理,用瀏覽器打開還是一片空白

那是因為文件路徑引用不對.解決辦法有2種
方法1:
用編輯器打開index.html,能看到源文件,把,改成

方法2:
用編輯器打開index.html,能看到源文件,把,改成你服務器的路徑比喻說:

然后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發布windows版

我們希望你完成遷移后盡快將其發布，可以作為預覽版：

參考文章：
https://dart.cn/null-safety/migration-guide

遷移桌面
flutter config --enable--desktop

1.為現有的 Flutter 應用程序添加桌面支持

要將桌面支持添加到現有 Flutter 項目，請從項目根目錄在終端中運行以下命令：

$ flutter create --platforms=windows,macos,linux .

這會將必要的桌面文件和目錄添加到您現有的 Flutter 項目中。要僅添加特定桌面平臺，請將platforms列表更改為僅包含您要添加的平臺。

必須下載vs

https://visualstudio.microsoft.com/zh-hans/thank-you-downloading-visual-studio/?sku=Community&rel=16

可以看到build目錄下已經有windows

2…創建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;//這句話很關鍵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安裝和環境配置

go get -u github.com/go-flutter-desktop/hover

稍等會hover就會出現在go語言的SDK下面的bin文件夾下

你又會發現報錯：**exec: “gcc”: executable file not found in %PATH%**這是缺少一個環境變量，別急，補上去，
https://sourceforge.net/projects/mingw-w64/files/mingw-w64/

安裝過程會下載很多東西，都到這一步了，不要放棄，接下來配置環境變量

C:\Program Files (x86)\mingw-w64\i686-6.2.0-posix-sjlj-rt_v5-rev1\mingw32\bin

4.初始化，并打包

接下來，我們到你的flutter項目的目錄下面

hover init github.com/my-organization/flutter_bloc_super #前面的地址固定，后面寫你項目的名字

就會出現一個go文件夾

生成這個文件之后再執行，

hover run

最后一步大功告成

變身！！！！！
如圖的路徑就是打包后生成的exe文件，雙擊執行，就好了。

坑1

如果報錯goland編譯報錯cc1.exe: sorry, unimplemented: 64-bit mode not compiled in

主要原因是本地的cc1.exe版本不是64位的，在64位環境下無法編譯

請下載這個、https://sourceforge.net/projects/mingw-w64/

總結

以上是生活随笔為你收集整理的Flutter Web实战项目打造真正跨平台应用（windows，android，ios，linux，macos，web）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： flutter项目打包.exe文件发布w
下一篇： linux 环境安装Flutter