flutter教學#1:環境設置及基本觀念

Jerrywu
Sep 14, 2021

--

大家好, 因為我最近當上了gdsc lead, 在google summer bootcamp開始接觸了flutter, 剛好flutter的中文教學資源還不是很多, 所以我想在medium上發表一下學習的心得和一些筆記.

請各位先安裝android studio, 安裝好了打開, 打開會出現類似下方的畫面(專案一開始是空的)

接著同時按ctrl+alt+s, 會跑出下面的畫面

然後點選左邊的pluggins並搜尋flutter, 按下install就安裝好了

安裝好會自動重開android studio,接著就可以看到create new flutter project這個選項了

如果還沒安裝flutter sdk記得要去flutter的官網下載喔!!

將sdk解壓縮完並放到你想要的位置後就可以選擇路徑並按next了

接著就輸入自己要的project name和organization(記住!!Organization不能和市面上的app重複到喔)

這樣一來,基本的環境設置就完成了

再來是flutter的一些基本觀念,我是從The Net Ninja在Youtube上的flutter教學影片學到的,這個頻道講得很清楚,大家可以多多參考.

source:www.javatpoint.com

在flutter裡面,每個東西都是widget, 而且各個widget會利用flutter特有的widget tree進行處理. 在上圖我們可以看到App Bar Widget的子樹是text widget,轉換成介面就是上面的app Bar會有寫著my first app的text.

轉成程式碼如下

各位可以看到app Bar在程式碼裡有title這個property, 然後我在title裡新增了text widget, 就形成了appBar widget的子樹是text widget.

--

--