Flutter學習-01-在Mac上環境搭建

語言: CN / TW / HK

小知識,大挑戰!本文正在參與“程式設計師必備小知識”創作活動。
之前有過簡單的學習過,今天開始學習下flutter,並記錄下flutter學習的知識點,記錄下自己的知識點學習。

1. Flutter安裝

關於flutter安裝網上教程比較多,這裡記錄下自己安裝flutter環境,flutter的官方網站

image.png 點選後選擇install 我們選擇macOS環境下

image.png 這裡我們選擇穩定版本進行下載

  • 1.1 解壓並安裝Flutter SDK

image.png - 1.2 配置映象檔案 我們解壓後需要配置映象檔案 可以參考官網說明

image.png 如果您在中國安裝或使用Flutter,使用託管Flutter依賴項的值得信賴的本地映象網站可能會有所幫助。要指示Flutter工具使用備用儲存位置,您需要在執行flutter命令之前設定兩個環境變數PUB_HOSTED_URLFLUTTER_STORAGE_BASE_URLexport PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 新版的Mac電腦終端都是使用的zsh,其配置檔案路徑為~/.zshrc;

老版本Mac電腦終端使用的是bash,其配置檔案路徑為~/.bash_profile;

image.png 跟新新系統後預設的是zsh,這樣的話我們會有兩份配置檔案,那麼我們只需要在zshrc檔案最後新增如下指令,就可以直接將bash_profile檔案中所有的環境變數引入zshrc

```js if [ -f ~/.bash_profile ]; then . ~/.bash_profile; fi

``` 我們配置

js export PUB_HOSTED_URL=https://pub.flutter-io.cn #國內使用者需要設定 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn #國內使用者需要設定 export PATH=/Users/*****/****/flutter/bin:$PATH 配置完成之後,重新開啟終端,或者直接在終端中輸入指令重新載入配置:

```js

zsh 指令

source ~/.zshrc

bash 指令

source ~/.bash_profile

```

2.android studio 安裝

我們知道flutter是跨平臺開發,需要用到Xcode和android, android studio 下載Mac端下載地址其中 image.png 我們根據嚮導安裝即可,之後需要安裝幾個sdk

image.png 安裝 Android SDK Command-line Tools

  • 安裝外掛 我們需要安裝兩個外掛Flutterdart,安裝後重啟即可建立flutter專案

image.png

3. 驗證

終端輸入flutter doctor:

image.png 基本上沒啥問題 一些警告可以不用管 我們建立一個flutter專案執行一下試下

image.png 建立一個預設flutter專案,使用Xcode執行,第一次時間比較久。

截圖2021-10-17 下午11.47.50.png