Flutter學(xué)習(xí)指南(1):Mac 搭建flutter環(huán)境核心總結(jié)

本套教程的優(yōu)點(diǎn),提供一種思路宠哄,本人iOS開發(fā)者 壹将。按照自己的思路走下去 ,遇到問(wèn)題解決問(wèn)題 毛嫉,不會(huì)什么學(xué)習(xí)什么 诽俯。從基本的網(wǎng)絡(luò)入手(上傳,下載) -常用控件-- 上刷拉新狱庇。復(fù)雜項(xiàng)目-- 混合項(xiàng)目本地調(diào)用 惊畏。

flutter 不能替代原生,目前為止密任,大多數(shù)的底層框架很不完善 颜启。包括音視頻,直播等浪讳。

注意:flutter是寫界面缰盏,動(dòng)畫,手勢(shì)淹遵,交互口猜。 并且沒(méi)有使用原生的api,直接走的是硬件支持 透揣。不能接受的繞行济炎。中文官網(wǎng)文檔 --- 前期準(zhǔn)備

一.配置環(huán)境

1.下載flutter(需要翻墻),或者GitHub 下載
2. 解壓到一個(gè)目錄下例如home 目錄
~  #這就是home目錄的符號(hào)
3. 配置環(huán)境變量
vi $HOME/.bash_profile

按【i】鍵,添加下面代碼辐真,然后按【esc】推出輸入须尚,
之后輸入 【:wq】退出編輯

# flutter setting
# ~/flutter
export PATH=$HOME/flutter/bin:$PATH
export FLUTTER_ROOT=$HOME/flutter
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
4. 驗(yàn)證配置是否成功

運(yùn)行 source $HOME/.bash_profile 刷新當(dāng)前終端窗口.

source $HOME/.bash_profile

通過(guò)運(yùn)行flutter/bin命令驗(yàn)證目錄是否在已經(jīng)在PATH中:

echo $PATH

二. 在IDE中開發(fā)flutter

1. 編譯器的選擇。

你可以使用自己喜歡的開發(fā)工具去開發(fā) Flutter 應(yīng)用侍咱。不過(guò)官方給了兩個(gè)建議耐床,Android Studio(google自家的東西) 與 VS Code(用的人最多的)。xcode(先別想了楔脯,調(diào)試的時(shí)候用一下就得了)

我們選擇VSCODE,必須安裝的還有XCODE(調(diào)試使用) 和 android studio(調(diào)試使用) 撩轰,更新到最新版本 。

1. 為vscode 安裝 編譯環(huán)境/插件

熟悉vs code的使用
安裝 dart 和 fultter 的插件環(huán)境

2. 為vscode 安裝 編譯環(huán)境/插件

找到vscode 下方的terminal面板 運(yùn)行

flutter doctor

復(fù)制下方一條一條命令運(yùn)行。費(fèi)時(shí)間有耐心堪嫂,必須翻墻偎箫,不翻墻太費(fèi)勁了。


按照提示解決所有問(wèn)題溉苛,重新運(yùn)行 【flutter doctor】

3.! No devices available 問(wèn)題 镜廉。

USB連接一個(gè)真機(jī) ,或者運(yùn)行

flutter devices //  查看連接的設(shè)備列表
flutter emulators  //  查看模擬器設(shè)備列表

4.創(chuàng)建一個(gè)項(xiàng)目

flutter create first_flutter  // 不可以使用大寫愚战,等待一會(huì)就好
完成后很快
5主要目錄說(shuō)明

lib 主要開發(fā)位置娇唯,dart代碼位置 ,main函數(shù)主入口 寂玲。
ios 含有Xcode代碼塔插,可以使用Xcode打開適配證書,網(wǎng)絡(luò)等拓哟。
android 同上 想许。
其他項(xiàng)目配置文件和版本控制文件先不說(shuō) 。

6運(yùn)行項(xiàng)目
flutter run  // 連接真機(jī)直接安裝断序,或者第3步模擬器運(yùn)行

證書問(wèn)題打開Xcode或者 android studio 配置好重新重新運(yùn)行 流纹。

Flutter 常用命令
flutter --version    #查看 Flutter 版本
flutter -h 或者 --help #打印所有命令行用法信息
flutter analyze  #分析項(xiàng)目的 Dart 代碼
flutter build #Flutter 構(gòu)建命令
flutter channel  #列表或開關(guān) Flutter 通道
flutter clean    #刪除構(gòu)建/目錄
flutter config      #配置 Flutter 設(shè)置
flutter create    #創(chuàng)建一個(gè)新的 Flutter 項(xiàng)目
flutter devices    #連接設(shè)備的列表
flutter doctor          #顯示相關(guān)安裝工具的信息
flutter drive    #為當(dāng)前項(xiàng)目運(yùn)行 FLutter 驅(qū)動(dòng)程序測(cè)試
flutter emulators    #列出、啟動(dòng)和創(chuàng)建模擬器
flutter format    #格式一個(gè)或者多個(gè) Dart 文件
flutter fuchsia_reload    #在 Fuchsia 上進(jìn)行熱重載
flutter help    #顯示幫助信息的 Flutter
flutter install    #在附加設(shè)備刪安裝 Flutter 應(yīng)用程序
flutter logs    #顯示用于運(yùn)行 Flutter 應(yīng)用程序的日志輸出
flutter packages    #用于管理 FLutter 包
flutter precache    #填充了 Flutter 工具的二進(jìn)制工件緩存
flutter run    #在附加設(shè)備刪運(yùn)行 Flutter 應(yīng)用程序
flutter screenshot    #從一個(gè)連接的設(shè)備截圖
flutter stop    #停止在附加設(shè)備上的 Flutter 應(yīng)用程序
flutter test    #對(duì)當(dāng)前項(xiàng)目的 Flutter 單元測(cè)試
flutter trace    #開始并停止跟蹤運(yùn)行的 Flutter 應(yīng)用程序
flutter upgrade #升級(jí) Flutter 副本

小問(wèn)題較多违诗,不寫了 漱凝。有什么問(wèn)題下面留言 。幫你解決 诸迟。

運(yùn)行在linux上的web項(xiàng)目 環(huán)境配置

下載或者clon Flutter sdk /
任意新建一個(gè)目錄例如 flutterSDK

cd  ~
mkdir  flutterSDK
cd  flutterSDK
//解壓你下載的文件名稱
 tar xf   《#下載的文件目錄#》

接下來(lái)把flutter sdk茸炒、dart sdkwebhubwiz執(zhí)行文件目錄加入PATH環(huán)境變量:

~/hubwiz$ export PATH=$PATH:$HOME/flutterSDK/flutter/bin
~/hubwiz$ export PATH=$PATH:$HOME/flutterSDK/flutter/bin/cache/dart-sdk/bin
~/hubwiz$ export PATH=$PATH:$HOME/flutterSDK/flutter/.pub-cache/bin

命令行運(yùn)行一下,看看環(huán)境是否配置成功

 flutter --version && dart --version 

進(jìn)入工作目錄 例如 ~/flutterWebWorkSpace

cd  ~/flutterWebWorkSpace
git clone https://github.com/flutter/flutter_web.git
flutter pub global activate webdev //安裝webdev包
cd flutter_web/examples/hello_world  ## 進(jìn)入到下載好的web項(xiàng)目
flutter packages upgrade   ## 安裝依賴包
webdev serve  ## 啟動(dòng)web服務(wù)

檢查防火墻和安全組設(shè)置
本地訪問(wèn)http://localhost:8080 阵苇,其他端訪問(wèn) // ip:8080

問(wèn)題 更改吧brew 國(guó)內(nèi)源

cd
curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install >> brew_install
vim brew_install
    更改腳本中的資源鏈接壁公,替換成中國(guó)科學(xué)技術(shù)大學(xué)的鏡像
    就是把這兩句 
    BREW_REPO = “https://github.com/Homebrew/brew“.freeze 
    CORE_TAP_REPO = “https://github.com/Homebrew/homebrew-core“.freeze 
    更改為這兩句 
    BREW_REPO = "https://mirrors.ustc.edu.cn/brew.git".freeze
    CORE_TAP_REPO = "https://mirrors.ustc.edu.cn/homebrew-core.git".freeze
rm -rf /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core
git clone git://mirrors.ustc.edu.cn/homebrew-core.git/ /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core --depth=1
/usr/bin/ruby brew_install
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市绅项,隨后出現(xiàn)的幾起案子紊册,更是在濱河造成了極大的恐慌,老刑警劉巖快耿,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件囊陡,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡润努,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門示括,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)铺浇,“玉大人,你說(shuō)我怎么就攤上這事垛膝△⒙拢” “怎么了丁稀?”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)倚聚。 經(jīng)常有香客問(wèn)我线衫,道長(zhǎng),這世上最難降的妖魔是什么惑折? 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任授账,我火速辦了婚禮,結(jié)果婚禮上惨驶,老公的妹妹穿的比我還像新娘白热。我一直安慰自己,他們只是感情好粗卜,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開白布屋确。 她就那樣靜靜地躺著,像睡著了一般续扔。 火紅的嫁衣襯著肌膚如雪攻臀。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,554評(píng)論 1 305
  • 那天纱昧,我揣著相機(jī)與錄音刨啸,去河邊找鬼。 笑死砌些,一個(gè)胖子當(dāng)著我的面吹牛呜投,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播存璃,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼仑荐,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了纵东?” 一聲冷哼從身側(cè)響起粘招,我...
    開封第一講書人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎偎球,沒(méi)想到半個(gè)月后洒扎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡衰絮,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年袍冷,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片猫牡。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡胡诗,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情煌恢,我是刑警寧澤骇陈,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布,位于F島的核電站瑰抵,受9級(jí)特大地震影響你雌,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜二汛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一婿崭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧习贫,春花似錦逛球、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至祟身,卻和暖如春奥务,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背袜硫。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工氯葬, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人婉陷。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓帚称,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親秽澳。 傳聞我的和親對(duì)象是個(gè)殘疾皇子闯睹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • Flutter簡(jiǎn)介 Flutter 是 Google推出并開源的移動(dòng)應(yīng)用開發(fā)框架,主打跨平臺(tái)担神、高保真楼吃、高性能。開發(fā)...
    moxuyou閱讀 3,270評(píng)論 0 6
  • 二:Flutter 環(huán)境搭建? 1: 操作系統(tǒng)的選擇妄讯? 很多人會(huì)問(wèn)孩锡,學(xué)習(xí)Flutter到底使用什么操作系統(tǒng)呢?學(xué)習(xí)...
    9801525d260a閱讀 696評(píng)論 0 1
  • 為大家傾力打造的課程《Flutter從入門到進(jìn)階-實(shí)戰(zhàn)攜程網(wǎng)App》上線了亥贸,解鎖Flutter開發(fā)新姿勢(shì)躬窜,一網(wǎng)打盡...
    CrazyCodeBoy閱讀 2,827評(píng)論 4 2
  • 不知道你是不是也有過(guò)這樣的體會(huì): 你說(shuō)要早起荣挨,要讓夢(mèng)想叫自己起床溜族,可是堅(jiān)持了兩三天,叫醒自己的還是快要遲到的鬧鐘垦沉。...
    西米ximena閱讀 221評(píng)論 0 1
  • 升級(jí)10.11系統(tǒng)后發(fā)現(xiàn)pod 無(wú)法使用了 一直提示 直接執(zhí)行 會(huì)一直報(bào)下面的錯(cuò)誤 在網(wǎng)上找了半天,原來(lái)是因?yàn)?1...
    大萌哥哥閱讀 3,619評(píng)論 2 15