天天看點

Flutter_初體驗_建立第一個應用_AndroidStudio_windows

至于 Flutter 是啥,我就不在這啰嗦了,下面以 windows 為例,展示一下從安裝 Flutter 到運作 APP 整個過程;

2.1、中文介紹文檔:​​https://flutterchina.club/get-started/install/​​ (我的閱讀方式)

   外網介紹文檔:​​https://flutter.io/get-started/install/​​

2.2、Flutter SDK 下載下傳位址:​​https://flutter.dev/docs/get-started/install/windows ​​(我的下載下傳方式)

   Github Flutter SDK 位址:​​https://github.com/flutter/flutter​​

      看網上說用 git (git clone -b dev https://github.com/flutter/flutter.git),我偏不!

2.3、下載下傳下來解壓後的檔案目錄(我的目錄)

Flutter_初體驗_建立第一個應用_AndroidStudio_windows

2.4、配置環境變量,友善使用,配置到 path 中

Flutter_初體驗_建立第一個應用_AndroidStudio_windows

配置上國内鏡像:

Flutter_初體驗_建立第一個應用_AndroidStudio_windows
Flutter_初體驗_建立第一個應用_AndroidStudio_windows

2.5、額外補充:配上你的 sdk tool,在接下來執行 flutter doctor 過程中需要;我配的有點亂,有的還多餘了,将就看。

Flutter_初體驗_建立第一個應用_AndroidStudio_windows
Flutter_初體驗_建立第一個應用_AndroidStudio_windows

2.6、配置好環境變量後,在指令行執行 :flutter doctor

Flutter_初體驗_建立第一個應用_AndroidStudio_windows

注意:

[√]這個是安裝OK的,[X]是需要安裝的,或者者是已安裝但是沒有運作起來的。

這裡面有幾項需要注意的内容:

(1)Flutter 這是Flutter工具,就是剛才git下載下傳的那個。

(2)Android工具鍊,這裡指的是SDK,會标注出SDK的最大版本号。

(3)Android Studio 3.0版本(這個是下載下傳安裝的版本)

(4)Connected devices 已連接配接的設施,能是模拟器,也能是真機,假如已連接配接會顯示出來。

2.7、安裝 Android Studio 插件:flutter + dart

右上角:file > setting > plugins > 

Flutter_初體驗_建立第一個應用_AndroidStudio_windows
Flutter_初體驗_建立第一個應用_AndroidStudio_windows
Flutter_初體驗_建立第一個應用_AndroidStudio_windows

2.8、上邊插件裝好、重新開機AS後、接下來就是配置 flutter sdk 路徑了,畢竟這兩個插件隻是輔助你的,但是人家還不知道 sdk 路徑在哪呢。

Flutter_初體驗_建立第一個應用_AndroidStudio_windows

還記得上邊我的 flutter sdk 的解壓路徑嗎。配置上這個路徑後,dart 就不用配置了,他會自動給你配置上:

Flutter_初體驗_建立第一個應用_AndroidStudio_windows

至此安裝 flutter 結束了。

接下來就是建立 flutter 項目了,file > new > new Flutter Project...

Flutter_初體驗_建立第一個應用_AndroidStudio_windows
Flutter_初體驗_建立第一個應用_AndroidStudio_windows
Flutter_初體驗_建立第一個應用_AndroidStudio_windows
Flutter_初體驗_建立第一個應用_AndroidStudio_windows

注意:這裡能支援ios和kotlin,假如需要的話能勾上。

Flutter_初體驗_建立第一個應用_AndroidStudio_windows

在這裡,我用的我自己的真機,建立好後會自動識别的,跟建立一個普通安卓項目運作差不多,下面是我的真機運作結果:

Flutter_初體驗_建立第一個應用_AndroidStudio_windows

部落格位址:https://www.cnblogs.com/niceyoo

本文位址:https://www.cnblogs.com/niceyoo/p/9240359.html

推薦一個課程:​​《Flutter移動電商實戰》- 快速掌握實際項目開發​​

繼續閱讀