Flutter 高效自學筆記（一）

Flutter 高效自學筆記（二）

為什麼要學 Flutter

學就行了，哪那麼多廢話。

Get Started

中文：flutterchina.club/get-started… 英文：flutter.dev/docs/get-st…

入門教程質量非常高，基本沒有阻礙，而且把 VSCode 和 Android Studio 都講了。

我本人當然是選擇 Android Studio 啦，因為我的桌上型電腦效能過剩嘛 :)

效能不行的同學可以選擇 VSCode。

注意：看教程時你可能會發現網路不是很通暢，那麼這時你可以設定中國映象：

set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

或 

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼

也可以使用 Privoxy + ss 給 Android Studio 設定代理。

如果不會翻牆，就不用學程式設計了。

---

可以看出中英文教程還是不太一樣的。英文教程只有 4 步，把其他步驟放在了 Part 2；而中文教程直接就是 7 步，沒有 Part 2。

其實直接看英文教程裡的程式碼就好，程式碼周圍的廢話不用看得太細。

有 TypeScript 基礎的前端秒上手，沒有 TS 基礎的前端滾去學 TS 或者學 Dart 基本語法吧。

瞭解更多

學完 Get Started 教程後，官方給出了一個教程列表。（中文文件的列表內容比英文文件的少）

• Building layouts in Flutter tutorial
• Add interactivity tutorial
• Introduction to widgets
• Flutter for Android developers
• Flutter for React Native developers
• Flutter for web developers
• Flutter's Youtube channel
• Build Native Mobile Apps with Flutter (a free Udacity course)
• Flutter cookbook
• From Java to Dart codelab
• Bootstrap into Dart: learn more about the language

讓我來看看哪些有用。

1. 第一個教程教我如何使用 Layout，我進去大概掃了一下，就是各個佈局控制元件的用法，先放著，用到再學。
2. 第二個教程教我如何使用 setState 改變各種元件的狀態，比 Get Started 稍微深入一些，先放著，用到再學。
3. 第三個教程教我一個元件的完整使用，需要重點看。
4. 第四個教程是給安卓開發者看的，將安卓開發者熟悉的概念對映到 Flutter 中，不適合我看。
5. 第五個教程是給 React Native 開發者看的，不適合我看。
6. 第六個教程是給 Web 開發者看的，適合我看。進去看一下
   1. 講了如何設定樣式
   2. 講了如何定位、變形、加漸變、加圓角、加陰影
   3. 講了如何操作文字
   4. 寫教程的人是不是對 Web 開發者有什麼誤解，我想看的不是這些
   5. 也許我應該看給 React Native 開發者看的教程
7. 第七個教程是官方的 Youtube 頻道，有 30 多個英文視訊，果斷關掉。
8. 第八個教程是 Udacity 的免費課程，點進去看看
   1. 視訊是英文對白，中文字幕
   2. 教程分兩部分，第一部分可以通過看第一個教程和第二個教程搞定，第二部分可以通過看第六個教程搞定
   3. 我不打算看這個 8 小時的免費課程了。
9. 第九個教程是 Cookbook（菜譜），它講核心概念按首字母順序排列了出來。顯然這隻能當字典使用，不適合閱讀。
10. 第十個教程是教 Dart 語法的，對 Dart 不熟可以先看這個。不過它預設你學過 Java。
    • 裡面介紹了一個叫做 DartPad 的工具，可以實時練習 Dart，好用。
11. 第十一個教程是一個完整的 Dart 教程的索引，內容相當多。用到再看。

掃完這些連結之後，我打算先看第三個教程，然後自己試著做一個 Demo，遇到 Flutter 問題就看上面對應的教程。

未完待續……