Flutter Web 項目 創建 web_app 練習項目

flutter_web 環境配置

下載 官網穩定版本 Flutter SDK ,配置環境變量
你可以去參考 環境搭建和環境變量配置
Flutter_for_web 環境搭建: https://blog.csdn.net/qq_35905501/article/details/90021762
運行官網 helloworld 你可以參考
運行官方hello_world示例代碼

以下創建flutter_web 項目應用官網 stable 穩定版本SDK ,添加 web 支持工具,
安裝webdev工具
使用命令行進行安裝 flutter packages pub global activate webdev, 如果安裝不了,請科學上網再試。

webdev命令會下載以下這些包:(需要一點時間)
在這裏插入圖片描述

下載flutter_web源碼 並 創建自己的web_app

打開git客戶端,輸入 git clone https://github.com/flutter/flutter_web.git,或者在其它git下載工具中輸入git目錄。

創建練習項目 web_app 工程目錄,拷貝 flutter_web 源碼中的 pubspec.yaml 文件 (examples/hello_world/pubspec.yaml)到 web_app根目錄,修改 name : web_app

在這裏插入圖片描述
拷貝 源碼裏面的 packages 文件到 web_app 根目錄
在這裏插入圖片描述
在終端 執行 flutter pub get 和 pub get ,配置 flutter_web SDK, 並創建出 .dart_tool 文件夾。
在這裏插入圖片描述
在工程目錄下創建 web 文件夾,添加 index.html 和 main.dart 文件,
在這裏插入圖片描述

再創建 lib 工程code文件夾 lib 文件夾
添加 main.dart 文件,
在這裏插入圖片描述

再終端輸入 webdev serve ,輸出如下表示成功,瀏覽器輸入 127.0.0.1:8080 既可以看到 web_app 頁面

在這裏插入圖片描述

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章