前言

大家好，我目前是清大資應所碩二的學生，應實驗室同學邀請一起報名參加鐵人賽。選Flutter作為主題是因為近年來跨平台框架正夯，而Flutter由於發展較晚中文的資料相對不多，希望能藉由這次的鐵人賽順便學習和分享我的心得，由於我剛接觸Flutter不到3個月所以這30天的內容我想也會相對基礎，希望能對剛想踏入Flutter坑的人一些幫助。

這30天的規劃大概會長這樣，視情況做更改：

Day1~Day2 安裝Flutter與介紹

Day3~Day5 Dart Language教學

Day6~Day8 檔案架構、基礎Widget、Package介紹

Day9~Day30 實作專案，目前App規劃的內容會有(Bloc Design Pattern、Firebase註冊登入、Google登入、接Youtube Api等等)

若你對以上內容有興趣就一起來走完這30天的鐵人賽吧^_^

什麼是Flutter

一個能建立原生跨平台的框架，用一種程式語言(dart)寫一份Code能同時讓iOS與Android平台使用，也支援Web以及桌面應用程式。
Flutter因擁有豐富且方便的元件(widget)以及優秀的性能，目前正在快速發展。
只需要學習一種程式語言就能夠寫兩個平台的App，買一送一，好Flutter不學嗎?

Flutter的SDK(Software Development Kit)會將我們寫的程式碼編譯成native machine code，轉換成Android或iOS讀得懂的code
Flutter內建了許多常用的UI元件(widget)，可以用像堆積木的方式建立你的介面

什麼是Dart

Dart是Google開發的程式語言，主要針對前端介面開發所使用的程式語言(mobile apps, web)

Dart屬於物件導向語言，語法結合了javascript、java、c#的特性，基本上只要你有程式基礎要上手是非常容易的。
Day3我會介紹Dart語言的用法，到時候我想你可能會抱怨這也太簡單了吧，是不是在拖時間R。

所以千萬別因為Flutter使用了沒聽過的Dart語言而讓你卻步了。

Flutter跟Dart的關係

Flutter是一個框架(內含許多專用的Library、widget)，而Dart則是程式語言。 有點像Python與Django的關係

下載 Flutter(Windows)

方法一 (推薦)

1. 安裝Git for Windows(https://git-scm.com/download/win)
2. 下載Flutter SDK
   在C槽點滑鼠右鍵「Git bash here」，便會開啟git bash，你就可以在裡面下git command。
   

接著輸入git clone -b stable https://github.com/flutter/flutter.git
電腦就會自己去找Flutter官方發布的最新穩定版本並下載到當前資料夾。

方法二

1. 到https://flutter.dev/docs/development/tools/sdk/releases 下載最新版flutter sdk
2. 解壓縮到C槽

安裝Flutter

1. 進到flutter資料夾，執行flutter_console.bat
   可以在這裡下flutter的指令，輸入「flutter doctor」，系統會自動去檢查電腦環境，並幫你下載Dart的SDK。
   最後會產生一個簡易的報表，這時你可能會看到一些錯誤或警告。
   別緊張，後面的步驟會一步一步處理它們。
   
   
   

2. 設定環境變數，之後就可以直接在cmd或powershell使用flutter commands
   在使用者變數區域找到「path」變數，新增一個路徑到C:\flutter\bin
   

3. 下載安裝Android Studio

Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors; a later step will discuss that.

4. 設定模擬器
點一下右下「Configure」，選擇AVD Manager

Create Virtual Device，接著可以選一個你喜歡的螢幕尺寸

挑選android api level(建議選新一點的，Flutter只支援api level 16以上)後下載

最後你會得到一個全新的模擬器。
試著開啟它，第一次開啟模擬器可能會花一段時間，根據你的CPU及記憶體規格而會有所不同
這時候我們在powerShell或cmd輸入「flutter doctor」，可以看到系統偵測到我們開啟的模擬器了

5. 安裝Flutter和dart plugin
   依照你的習慣可以使用Android Studio或是Visual Studio Code開發兩個IDE都有提供Flutter的plugin可供使用
   這裡我只示範Android Studio的安裝方式。一樣從Configure點選plugins，搜尋flutter安裝第一個。
   建議Flutter Snippts也可以安裝，之後寫程式很方便，這個外掛讓我們只要輸入縮寫就能產生常用的程式碼模板(當然你也可以自己設定喜歡的喔)
   安裝好後我們再來執行一次flutter doctor讓醫生來檢查檢查
   哇!!!全部都打勾了^_^/
   
   
   

今日總結

恭喜你邁向學習flutter的第一步，我們成功安裝設定好所有必要東西。
明天我會介紹Flutter框架以及Flutter和react native的比較