DOJO004

  • Dashool 創辦人
  • 喜歡調酒
  • Rails、Nextjs、TypeScript

我要自學 Flutter! - 01

Flutter

為什麼要學 Flutter?

最重要的當然是，提升自己的競爭力! 好讓薪水不斷升高!
同時對這個新接觸的到框架頗有興趣，能夠只維護一個版本的程式碼，就可以在 Mobile、Web、Desktop，多平台上使用，豈不是超方便?
本系列就是記錄我自學 Flutter的過程，希望對你也會有幫助🙂

所以…什麼是 Flutter?

Flutter 是我們 Google 大哥製作的開源框架，用於只要維護單一程式碼，即可以在多平台上使用。
Flutter 的特色
  • 高效能 Flutter 使用 Dart 程式語言，原生的編譯器可以編譯為 ARM、Intel machine code、JavaScript，以便在任何裝置上實現快速效能。
  • 熱重載 ( Hot Reload ) 使用 Hot Reload 在更新程式碼之後可以立即看到更改。
  • 豐富的組件 ( Widgets) Flutter 提供大量的內建組件，可以方便的進行組合、自定義，以創建高質量的 UI。
  • 強大的生態系統 Flutter 能夠無縫接軌 Google 的其他服務。ex: Firebase、Google Ads、Google Pay…
哪些指名品牌使用了 Flutter?
還有更多，有興趣可以到官方看一下。https://flutter.dev/showcase

安裝環境

可以使用線上的編輯器，或是本地安裝環境。
我這邊選擇的是在本地安裝。
選擇作業系統

選擇想要的平台，底下也很貼心的提示
Your choice informs which parts of Flutter tooling you configure to run your first Flutter app. You can set up additional platforms later. *If you don't have a preference, choose Android.

我們的選擇會告訴您配置 Flutter 工具的哪些部分來運行您的第一個 Flutter 應用程式。您可以稍後設定其他平台。 如果您沒有偏好，請選擇 Android。

檢查軟硬體的需求是否符合
Flutter supports Debian Linux 11 or later and Ubuntu Linux 20.04 LTS or later . Flutter 支援 Debian Linux 11 或是 Ubuntu Linux 20.04 LTS 以上的版本。

安裝開發工具

  • 檢查是否安裝以下工具 : bash, file, mkdir, rm
$ which bash file mkdir rm which
  • 安裝軟體包 : curl, git, unzip, xz-utils, zip, libglu1-mesa
$ sudo apt-get update -y && sudo apt-get upgrade -y;
$ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa
  • 安裝 Android Studio 的必要套件 : libc6 : i38y, libncurses5 : i386, libstdc++6 : i386, lib32z1, libbz2-1.0 : i386
$ sudo apt-get install \\
    libc6:i386 libncurses5:i386 \\
    libstdc++6:i386 lib32z1 \\
    libbz2-1.0:i386
  • 安裝 Android Studio 2023.2.1 (lguana) 或更高的版本。Flutter 需要完整版的 Android Studio。 
跟我一樣使用 WSL 的人，可以參考這篇文章。

我在安裝 Android Studio 的時候遇到很多問題，這邊分享一下我安裝的方法。
  •  到官方找到下載 Linux 的載點 
  •  複製下載連結 
  •  建立一個 “Downloads” 資料夾，並輸入指令下載 Android Studio 
$ mkdir Downloads && cd Downloads
$ wget <https://redirector.gvt1.com/edgedl/android/studio/ide-zips/2023.3.1.18/android-studio-2023.3.1.18-linux.tar.gz>
  • 回到根目錄之後建立一個 “Applications” 資料夾，並且在這裡面將剛剛的檔案解壓縮進來
$ mkdir Applications && cd Applications
$ tar xfv $(ls -1t $HOME/Downloads/android-studio-* | head -n1)
  • 設定 flutter 使用這個路徑，之後查看是否安裝正確
$ flutter config --android-studio-dir $HOME/Applications/android-studio/
$ flutter doctor -v
並在這時候我遇到了 :

看訊息是因為我沒有安裝到 “cmdline-tools”，那就去安裝吧。
首先打開 android studio，但因為我們是使用 wsl 所以用指令開。
先找到 “studio.sh” 這個檔案，應該會在 “Applications/android-studio/bin/studio.sh”。 找到之後執行他。
	$ sh studio.sh
找到 “SDK Manager”

點選 "SDK Tools" tab，在找到最新版本的 Command-line Tools

按照指示安裝完成之後，應該就沒問題了。
執行 “flutter doctor” 檢查一下，都是綠燈就OK了! 🎉

版權所有 © 2023 DOJO004

Deployed on Zeabur