Flutter開發(fā)環(huán)境搭建到創(chuàng)建項目(Windows)

Android Studio的安裝步驟



【Flutter簡介】

Flutter是谷歌公司開發(fā)的一款開源免費的移動UI框架,可以在IOS和Andriod上構建原生用戶界面但指,它最大的特點就是跨平臺以及高性能寡痰。Flutter是基于谷歌的Dart 語言開發(fā)的,要學Flutter的話我們必須首先得會Dart語言Dart官網鏈接https://dart.dev/棋凳。


【flutter環(huán)境搭建】

一拦坠、電腦上 下載 安裝 配置 JAVA SDK

【目前建議java JDK版本要控制在8,保守起見推薦在下面鏈接下載對應版本JDK剩岳,本人當時跳坑贞滨,就是因為版本的問題】

第1步:

JAVA SDK下載地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

第2步:

安裝完SDK后 配置 環(huán)境變量:

(桌面上找到?我的電腦?圖標 → 右擊鼠標 → 選擇屬性?,打開?控制面板\所有控制面板項\系統(tǒng)?→ 點擊左邊高級系統(tǒng)設置卢肃,打開屬性系統(tǒng)?→ 點擊右下角環(huán)境變量疲迂,打開環(huán)境變量?→ 找到下面系統(tǒng)變量?→ 點擊新建?)

系統(tǒng)變量里面新增JAVA_HOME, 值為 java sdk的根目錄才顿,如下圖:

然后點擊確定按鈕

在系統(tǒng)變量里找到Path, 在Path環(huán)境變量里面增加代碼:%JAVA_HOME%\jre\bin

注意:?環(huán)境變量之間的英文分號;

然后點擊確定按鈕

第3步:

環(huán)境變量配置完后 打開命令行

輸入:java?,出現一堆不報錯的東西(如下圖所示)尤蒿, 表示JDK安裝成功 郑气。

輸入:javac,同樣出現一堆不報錯的東西(如下圖所示)腰池, 表示JDK配置成功 尾组。

(老鐵沒毛病,繼續(xù)加油J竟)

二讳侨、電腦上 下載 安裝 Android Studio

第1步:

下載Android Studio

Android Studio 下載地址 (不翻墻):?https://developer.android.google.cn/studio?(推薦)

Android Studio 下載地址 (翻墻):?https://developer.android.com/studio/index.html

第2步:

下載完后,安裝Android Studio:

找到剛才下載的軟件包: (雙擊 → next → next → (如下圖所示) …)

注意:?sdk 目錄不能有中文奏属,不能有空格声怔,并且放SDK的盤保證足夠大的容量缩搅。

需耐心等待一段時間

點擊取消。

點擊Next

需要耐心等待一段時間…

(到這一步 Android Studio就已經安裝成功了,革命尚未成功假抄,老鐵繼續(xù)加油J柚)

三胆筒、電腦上下載 配置 Flutter SDK

第1步:

下載 Flutter SDK

Flutter SDK下載地址:?https://flutter.dev/docs/development/tools/sdk/releases#windows?(推薦)

Flutter SDK 的 git hub地址:https://github.com/flutter/flutter/releases

建議安裝最新版

第2步:

把下載好的Flutter SDK壓縮包解壓到你想放的目錄朽色,注意路徑里不能有中文 不能有空格(如:E:\flutter_windows\flutter)。

第3步:

配置環(huán)境變量

打開Flutter SDK文件齿兔,找到bin目錄 如下圖:

將此地址E:\flutter_windows\flutter\bin配置到環(huán)境變量path后面

(和剛才配置JAVA SDK的Path環(huán)境變量一樣的套路橱脸,記得中間加英文分號;)

配完后 一路點擊確定按鈕

打開命令行:

輸入:flutter -v?出現一堆不報錯的東西 表示 Flutter SDK 配置成功 (如下圖所示)

**四、配置flutter國內鏡像 **

( 由于國內外網絡原因分苇,flutter在國內執(zhí)行命令訪問的時候添诉,可能出現訪問不了的情況。Flutter官方給咱們開放了一個國內鏡像组砚。)

第1步:

打開地址:

https://flutter-io.cn?(推薦)

或?https://flutter.dev/community/china

滾動條往下拉(如上圖所示)吻商,拉到最下面(如下圖所示)

第2部:

配置環(huán)境變量:

把上圖紅框中的兩句話配置到環(huán)境變量里面,(在環(huán)境變量里面新增key 和 value 值)

FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn

PUB_HOSTED_URL:: https://pub.futter-io.cn

(和剛才配置JAVA SDK的 新增 環(huán)境變量一個套路,點擊新建)

然后 點擊確定按鈕

然后 點擊確定按鈕

(到這一步如果沒有寫錯變量名或者變量值的情況下糟红, flutter國內鏡像就已經配置成功了)

五艾帐、運行 flutter doctor 檢測環(huán)境是否搭建成功

打開命令行

輸入:flutter doctor

注意:

如果前面是對號?表示該項已經安裝配置成功

如果前面是x,表示沒有成功(下面會講類似情況)

如果是windows7系統(tǒng)可能會出現亂碼,此時打開git命令行輸入flutter doctor檢查即可(如下圖所示)盆偿。

如果是windows10就(如上圖所示)

第一次運行時候可能會出現下面的錯誤

這個時候復制上面紅色框的命令 :flutter doctor --android-licenses

提示輸入Y/N的地方全部輸入Y

六柒爸、打開 Android Studio 安裝 Flutter 插件

第一次運行 Android Studio,右邊列表里沒有下圖第二項:Start a new Flutter project 事扭,需要配置這個Flutter插件捎稚。

如圖所示:點擊右下角?Configure?→ 點擊Plugins

在搜索框輸入:flutter

安裝flutter插件

安裝過程中彈框提示:是否安裝Dart(如下圖所示),點擊Yes按鈕

安裝完成之后,會提示重啟 今野,點擊重啟按鈕(如圖所示)

重啟Android Studio后葡公,就有了Start a new Flutter project這一項

(恭喜老鐵!到目前為止你已經為學習Flutter打下了堅實的基礎条霜。

快去創(chuàng)建的你的第一個Flutter項目吧催什。go go go …)


【創(chuàng)建Flutter項目】

七、創(chuàng)建Flutter項目

打開 Android Studio 宰睡, 點擊右邊列表里的?Start a new Flutter project?這一項

(可能比較慢蒲凶,需耐心等會兒)

創(chuàng)建 Flutter App

→ 選擇第一個 Flutter Application

→ 點擊 Next

→ 配置項目名稱,

→ 配置 Flutter SDK(前面我們已經配置過Flutter SDK環(huán)境變量了拆内,就默認顯示了旋圆,不需要動),

→ 選擇項目目錄麸恍,

→ 描述(默認有灵巧,可改可不改)

→ 點擊 Next

→ 域名: 有默認域名

(介意修改為自己的域名,改完后會自動配置包名,包名格式:com.公司名.項目名或南,包名是唯一的沒有重復)孩等。

→ 最下面勾選 Android 和 ios 兩個都勾選上

點擊 Finish (耐心等待一會艾君,需要下載一些東西)

項目創(chuàng)建成功后采够,會自動導入到 Andr Studio 里,同時在剛才選的對應的目錄中也生成了剛才創(chuàng)建的項目文件

注意:?要運行這個項目 不能直接運行默認導入 Android Studio 的 項目冰垄,需要重新導入一下這個項目

→ 點擊左上角 File

→ 點擊Open

→ 找到剛才創(chuàng)建的項目蹬癌,選中 android 文件夾

→ 點擊 Ok

→ 點擊This Window (表示在當前窗口打開這個項目)

第一次導入 比較慢

(因為:它會執(zhí)行 =》左上角File =》Sync Project with Gradle Files 這個文件 =》文件運行編譯完后我們才能運行這個項目)

(這個過程只會在第一次導入時才會執(zhí)行,后面就比較快了)

編譯過程中可能會出錯虹茶,如下圖所示:

如果報錯:

→ 點擊左上角File

→ 點擊Sync Project with Gradle Files

重新下載 Gradle 這個文件逝薪,文件運行編譯完后我們才能運行這個項目,如果多次運行失敗蝴罪,建議手機開啟熱點董济,電腦連接手機熱點后再嘗試這個步驟,成功概率會高一些要门。

如果彈出下面彈窗虏肾,先不要更新,等項目開發(fā)完成欢搜,沒事的時候再更新封豪。

真機調試:

→ 手機通過數據線USB接口連上電腦

→ 手機開啟調試模式 (不會可以問度娘)

→ 點擊 Android Studio 的?Run

→ 點擊?Run 'app'

默認會彈出你剛才連接成功的設備(如下圖所示)

如果這里沒有這個設備的話:

可能是你連接電腦的手機還沒有開啟調試模式

也可能是你手機和電腦沒有連接成功

也可能是其他的軟件把你這個端口占用了

選中設備

點擊Ok

這個時候就會把這個Flutter應用安裝到我們的手機上

并且在手機上啟動了這個應用

這一路 降妖除魔 老鐵辛苦 了!

恭喜老鐵炒瘟!此時此刻你的第一個 Flutter App 已經創(chuàng)建成功吹埠!

萬事開頭難

加油吧老鐵!!缘琅!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
禁止轉載粘都,如需轉載請通過簡信或評論聯(lián)系作者。
  • 序言:七十年代末刷袍,一起剝皮案震驚了整個濱河市驯杜,隨后出現的幾起案子,更是在濱河造成了極大的恐慌做个,老刑警劉巖鸽心,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異居暖,居然都是意外死亡顽频,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門太闺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來糯景,“玉大人,你說我怎么就攤上這事省骂◇盎矗” “怎么了?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵钞澳,是天一觀的道長怠惶。 經常有香客問我,道長轧粟,這世上最難降的妖魔是什么策治? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮兰吟,結果婚禮上通惫,老公的妹妹穿的比我還像新娘。我一直安慰自己混蔼,他們只是感情好履腋,可當我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著惭嚣,像睡著了一般遵湖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上料按,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天奄侠,我揣著相機與錄音,去河邊找鬼载矿。 笑死垄潮,一個胖子當著我的面吹牛烹卒,可吹牛的內容都是我干的。 我是一名探鬼主播弯洗,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼旅急,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了牡整?” 一聲冷哼從身側響起藐吮,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎逃贝,沒想到半個月后谣辞,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡沐扳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年泥从,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沪摄。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡躯嫉,死狀恐怖,靈堂內的尸體忽然破棺而出杨拐,到底是詐尸還是另有隱情祈餐,我是刑警寧澤,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布哄陶,位于F島的核電站帆阳,受9級特大地震影響,放射性物質發(fā)生泄漏奕筐。R本人自食惡果不足惜舱痘,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望离赫。 院中可真熱鬧,春花似錦塌碌、人聲如沸渊胸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽翎猛。三九已至,卻和暖如春接剩,著一層夾襖步出監(jiān)牢的瞬間切厘,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工懊缺, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留疫稿,地道東北人。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像遗座,于是被迫代替她去往敵國和親舀凛。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,877評論 2 345