FlutterApp實戰·第01天:Flutter安裝和配置

来源:https://www.cnblogs.com/obullxl/archive/2023/11/19/NTopic2023112001.html
-Advertisement-
Play Games

前面多文介紹了Dart編程語言的基本語法和語言特性。從本文開始,我們通過一個Flutter App的編碼過程,完成Flutter的學習,包括Flutter基礎知識,Flutter App啟動頁,Tab頁,個人設置頁,SQLite資料庫,HTTP API調用,到最後Flutter App打包等…… ...


Flutter安裝文檔:

Dart升級

  • Dart安裝參考前面文章(Dart安裝和初體驗):https://ntopic.cn/p/2023092301
  • 後續學習我們採用最新Flutter版本,因此建議升級Dart最新版本(當前:3.2.0):brew upgrade dart
$ brew info dart
==> dart-lang/dart/dart: stable 3.2.0, HEAD
SDK
https://dart.dev
Conflicts with:
  dart-beta (because dart-beta ships the same binaries)
/usr/local/Cellar/dart/3.2.0 (1,022 files, 560.8MB) *
  Built from source on 2023-11-19 at 10:04:05
From: https://github.com/dart-lang/homebrew-dart/blob/HEAD/Formula/dart.rb
==> Options
--HEAD
  Install HEAD version
==> Caveats
Please note the path to the Dart SDK:
  /usr/local/opt/dart/libexec

VS Code安裝

VS Code是免費的,支持Flutter的研發、調試和運行,沒有理由不使用它作為Flutter的研發IDE(IntelliJ IDEA非常強大,可惜是收費)。

下載和安裝VS Code下載:

  • 首先通過官網下載VS Code:https://code.visualstudio.com/docs/?dv=win
  • 點擊下載之後,發現下載速度很慢:右鍵複製下載鏈接,然後把功能變數名稱換成 “vscode.cdn.azure.cn”,重新通過瀏覽器打開進行下載,速度杠杠的

VS Code安裝成功之後,就進行Flutter安裝和配置。

Flutter SDK安裝

我們可以從GitHub原始倉庫和Gitee鏡像倉庫下載,由於中國訪問GitHub網速太慢,建議從Gitee鏡像倉庫下載:

# 源代碼目錄 [/Users/obullxl/FlutterSpace]
$ cd /Users/obullxl/FlutterSpace

# Gitee下載 [推薦方式]
$ git clone -b stable https://gitee.com/mirrors/Flutter.git flutter

# GitHub下載 [網速可能較慢]
$ git clone -b stable https://github.com/flutter/flutter.git flutter

Flutter SDK有多個版本,如betamasterstable等,其中beta/master為開發分支,stable為穩定分支,建議使用穩定分支

  • 查看所有分支:flutter channel
  • 切換本地分支:flutter channel xxx
  • 查看當前版本:flutter --version
  • 升級最新版本:flutter upgrade
  • 檢測Flutter配置:flutter doctor
# 切換到Flutter源代碼目錄
$ cd /Users/obullxl/FlutterSpace/flutter

# 查看Flutter所有分支 [建議stable分支]
$ flutter channel
Flutter channels:
  master
  main
  beta
* stable

# 切換到stable分支
$ flutter channel stable

# 查看當前版本,由於我的Flutter是之前安裝的版本[3.7.1]
$ flutter --version
Flutter 3.7.1 • channel stable • https://gitee.com/mirrors/Flutter.git
Framework • revision 7048ed95a5 (10 months ago) • 2023-02-01 09:07:31 -0800
Engine • revision 800594f1f4
Tools • Dart 2.19.1 • DevTools 2.20.1

# 升級Flutter版本
$ flutter upgrade

# 再次查看Flutter版本,已經是最終版本[3.16.0]
$ flutter --version
Flutter 3.16.0 • channel stable • https://gitee.com/mirrors/Flutter.git
Framework • revision db7ef5bf9f (3 days ago) • 2023-11-15 11:25:44 -0800
Engine • revision 74d16627b9
Tools • Dart 3.2.0 • DevTools 2.28.2

# 檢測Flutter配置情況
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel stable, 3.16.0, on macOS 12.6.7 21G651 darwin-x64, locale zh-Hans-CN)
    ! Warning: `dart` on your path resolves to
      /usr/local/Cellar/dart/3.1.2/libexec/bin/dart, which is not inside your current
      Flutter SDK checkout at /Users/obullxl/FlutterSpace/flutter. Consider adding
      /Users/obullxl/FlutterSpace/flutter/bin to the front of your path.
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more
      details.
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1.3)
[✓] VS Code (version 1.84.0)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

Flutter 倉庫配置

和Java編程需要配置Maven國內倉庫一樣,Flutter也需要配置國內倉庫,否則訪問國外倉庫要麼訪問不了,要麼網速太慢。

在環境變數中,增加如下配置:

# 建軟連接 [便於後面統一管理]
$ cd /opt
$ sudo ln -s /Users/obullxl/FlutterSpace/flutter ./flutter

# 系統變數
$ sudo vi /etc/profile

# 增加內容
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

export FLUTTER_GIT_URL=https://gitee.com/mirrors/Flutter.git

export PATH=$PATH:/opt/flutter/bin

# 生效環境變數
$ source /etc/profile

最後

至此,Flutter安裝和配置已經完成了,接下來我們就通過VS Code編寫Flutter App了!


我的本博客原地址:https://ntopic.cn/p/2023112001


本文作者:奔跑的蝸牛,轉載請註明原文鏈接:https://ntopic.cn


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • AOT介紹 .Net8的本地預編機器碼AOT,它幾乎進行了100%的自舉。微軟為了擺脫C++的鉗制,做了很多努力。也就是代碼幾乎是用C#重寫,包括了虛擬機,GC,記憶體模型等等。而需要C++做的,也就僅僅是引導程式,本篇通過代碼來看下這段至關重要的引導程式的運作模式。 支持功能 SqlSugar OR ...
  • 關於Anolis8/Centos8系統重啟後ip地址不顯示的原因 版權聲明:原創作品,謝絕轉載!否則將追究法律責任。 ————— 作者:kirin #、今天把之前在VMware安裝的Anolis8系統重啟了,啟動之後發現Xshell連接不上。在VMware上登錄後執行ip a命令發現ip地址不見了 ...
  • DX後臺截圖C++實現代碼 文章僅發佈於https://www.cnblogs.com/Icys/p/DXGI.html和知乎上。 傳統的GDI API (BitBlt)雖然可以完美的完成後臺截圖的任務,但是歸根結底效率還是太低。 直接使用DXGI方法截圖只能完成前臺視窗的截圖,而DX HOOK的截 ...
  • 目錄前言一、使用的元器件二、模擬圖三、項目分析四、代碼編寫總結 前言 這個項目主要針對於選擇的人們作息不規律而設計的一個項目,這個項目是使用stm32f103系列的晶元來製作的(R6和C8)都可以使用。 一、使用的元器件 DS1302時鐘晶元 STM32F103R6 按鍵 LCD1602顯示屏 蜂鳴 ...
  • 命令行交互 命令行交互一般是學習資料庫的第一步,不過這些命令在後續用的比較少,瞭解即可。 角色命令 創建角色 use admin db.createUser({"user": "root", "pwd": passwordPrompt(), "roles": [{role:"role",db:"<d ...
  • SQL INSERT INTO 語句用於在表中插入新記錄。 INSERT INTO 語法 可以以兩種方式編寫INSERT INTO語句: 指定要插入的列名和值: INSERT INTO 表名 (列1, 列2, 列3, ...) VALUES (值1, 值2, 值3, ...); 如果要為表的所有列添 ...
  • AND 運算符 SQL的AND運算符用於根據多個條件篩選記錄,確保所有條件都為TRUE才返回記錄。下麵是AND運算符的基本語法: SELECT column1, column2, ... FROM table_name WHERE condition1 AND condition2 AND cond ...
  • DM8壓縮表 0、結論 行表(普通表)不支持壓縮。但是語法支持。建表之後,查詢到的占用空間會比普通表小一半。 經過測試,裝10萬數據(兩個欄位),壓縮的、未壓縮,占用空間一樣大。 列表(huge表)支持壓縮。可以壓縮表(就是壓縮所有列),也可以選擇壓縮列。但是建表的時候就要設置,否則建好表之後修改不 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...