天天看點

Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目

随着APP的使用越來越多,快速開發APP顯得越發重要,目前市面主流的flutter,uni-app,ReactNative。。。等,

本系列專題主要學習flutter,在學習flutter之前需要先學習Dart,為後面學習flutter打基礎。

  • Flutter 學習(一)環境搭建以及開發工具配置
  • Flutter 學習(二)執行入口|變量|常量|資料類型|運算符|流程控制|關鍵字

1.為什麼使用 Dart ?

Google及全球的其他開發者,使用 Dart 開發了一系列高品質、 關鍵的 iOS、Android 和 web 應用。 Dart 非常适合移動和 web 應用的開發。

Dart 是免費的并開源于 GitHub。

高效

Dart 文法清晰簡潔,工具簡單而強大。 輸入檢測可幫助您盡早識别細微錯誤。 Dart 擁有久經考驗的 核心庫(core libraries) 和一個已經擁有數以千計的 packages 生态系統

快速

Dart 提供提前編譯優化,以在移動裝置和 web 上實作可預測的高性能和快速啟動。

可移植

Dart 可以編譯成 ARM 和 x86 代碼,是以 Dart 移動應用程式可以在 iOS,Android 及 更高版本上實作本地運作。 對于 web 應用程式,Dart 可以轉換為 JavaScript。

易學

Dart 是面向對象的程式設計語言,文法風格對于許多現有的開發人員來說都很熟悉。 如果您已經了解 C++,C# 或 Java ,那麼使用 Dart 也就是分分鐘的事情。

響應式

Dart 可以便捷的進行響應式程式設計。由于快速對象配置設定和垃圾收集器的實作, 對于管理短期對象(比如 UI 小部件), Dart 更加高效。 Dart 可以通過 Future 和 Stream 的特性和API實作異步程式設計。

2.Dart環境搭建

2.1工具下載下傳

  1. AndroidStudio 工具下載下傳:https://developer.android.google.cn/studio/
  2. git 工具下載下傳:https://git-scm.com/downloads

    如果git在官網下載下傳的比較慢:https://npm.taobao.org/mirrors/git-for-windows/

2.2 環境配置

  • mac:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
           
  • Windows:
Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目

2.3 下載下傳flutter源碼

2.3.1 建立一個目錄,存放源碼

官方源碼:git clone https://github.com/flutter/flutter.git -b stable

如果拉github上面的代碼很慢的話,可以拉碼雲上面映射的

git clone https://gitee.com/mirrors/Flutter.git -b stable

Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目

2.3.2 配置系統環境

将flutter 的 bin 目錄添加到path路徑中

Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目

2.3.3 win7無法使用flutter 的問題

https://www.microsoft.com/en-us/download/confirmation.aspx?id=54616

如果遇到powershell無法安裝,顯示:Windows Management Framework

https://www.microsoft.com/en-us/download/details.aspx?id=54616

2.4 使用flutter doctor指令

打開cmd視窗執行 flutter doctor 指令等待安裝完成

Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目
Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目

2.5 修改下載下傳源

我個人的安裝路徑:D:\flutter-workspace\Flutter\packages\flutter_tools\gradle\flutter.gradle

Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目

修改内容

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
maven { url 'http://download.flutter.io' }


private static final String DEFAULT_MAVEN_HOST = "https://storage.flutter-io.cn/download.flutter.io";
           

3. 啟動AndroidStudio

3.1 下載下傳flutter插件

3.2 下載下傳dart插件

Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目
Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目
Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目

如果下載下傳不下來

離線下載下傳flutter插件:https://plugins.jetbrains.com/plugin/9212-flutter/versions/stable

離線下載下傳dart插件:https://plugins.jetbrains.com/plugin/6351-dart/versions/

4.建立第一個flutter項目

Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目
Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目
Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目
Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目

4.1 使用pub get 擷取依賴

Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目

4.2 編寫helloworld

右鍵點選建立一個dart的檔案,編寫如下代碼,然後右鍵滑鼠運作代碼,可以看到控制台列印成功

Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目
Flutter 學習(一)環境搭建以及開發工具配置1.為什麼使用 Dart ?2.Dart環境搭建3. 啟動AndroidStudio4.建立第一個flutter項目