iT邦幫忙

2024 iThome 鐵人賽

DAY 3
0
Mobile Development

Flutter基礎入門系列 第 3

【Day 03】下載與測試

  • 分享至 

  • xImage
  •  

Flutter官方網站中有著詳細的下載步驟教學,在這篇中將帶著大家一起下載並做一個簡單的執行測試。

下載步驟

在官方下載教學檔案中,我們最先會見到以下這個畫面,是選擇我們使用的電腦的作業系統,下一步則是選擇我們想將應用程式開發至哪個平台,若不確定選哪個,官方建議選擇Android。
之後的下載內容教學也會針對我們在此選擇的選項而有所差別。因為筆者是使用Linux的作業系統,因此本文章中也將詳細介紹Linux中的安裝方法。
https://ithelp.ithome.com.tw/upload/images/20240917/201694461Bkl5MUmD1.png

接著首先會看到電腦的軟硬體要求,確認自己的電腦符合要求後,接下來就是下載一些開發工具了。

開發工具下載

首先,先確定自己的電腦是否已經有bash, file, mkdir, rm, which這幾個工具安裝好,這些應該都是作業系統中原就安裝好的內容,不會有太大問題。

$ which bash file mkdir rm which
/bin/bash
/usr/bin/file
/bin/mkdir
/bin/rm
which: shell built-in command

接下來,使用apt-get下載curl, git, unzip, xz-utils, zip, libglu1-mesa

$ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

Android Studio安裝

詳細的安裝步驟在此
Android Studio Download Archive下載的Android Studio 2023.3.1 (Jellyfish)或是更新的版本,等待下載的過程中,我們先來下載一些額外需要的資料庫。
根據自己的作業系統,執行以下程式碼以下載檔案。

sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386
sudo yum install zlib.i686 ncurses-libs.i686 bzip2-libs.i686

好了後,我們來安裝Android Studio吧。

先將檔案解壓縮,接著根據需求,將解壓縮後的資料夾移至/usr/local/或是/opt/中,此部份將會需要用到系統管理原的權限。若與筆者下載相同版本,可執行以下程式可將壓縮檔解壓縮至/usr/local/中。

sudo tar -xf ~/Downloads/android-studio-2023.3.1.20-linux.tar.gz -C /usr/local

此時我們的/usr/local/中會有個資料夾名為android-studio,接下來執行android-studio/bin中的studio.sh。

./studio.sh

這時後會跳出一個安裝小精靈,跟著它的說明,順利安裝完成後會出現以下畫面。
https://ithelp.ithome.com.tw/upload/images/20240917/20169446xFsqyhpCeL.png

p.s. studio.sh也是之後開啟android-studio的方法,可以建立一個alias方便之後開啟

下載Flutter SDK

這裡點選連結可下載最新版本的SDK壓縮檔。官方文件說明中建議可在home directory中創立一個development的資料夾,並將檔案解壓縮至那裡。

mkdir ~/development
tar -xf ~/Downloads/flutter_linux_3.24.3-stable.tar.xz -C ~/development/

想在shell中執行Flutter指令,需要將Flutter加入我們的Path variable,筆者使用的是zsh,因此只須開啟~/.zshrc,並在那中加入一行export PATH="~/development/flutter/bin:$PATH即可。

重開啟shell,或是source ~/.zshrc後,輸入flutter,便能看到以下畫面,這代表我們已成功設定好Flutter SDK了。
https://ithelp.ithome.com.tw/upload/images/20240917/201694463fPt8BKmAI.png

最後,在使用Flutter前,我們先同意所有的Android SDK條款。
執行以下程式,並同意所有項目:

flutter doctor --android-licenses

最終將會得到此結果:All SDK package licenses accepted.

這樣我們就完成下載安裝的步驟了!

執行測試

最後,我們來跑個簡單的執行測試。
開啟我們的terminal,執行以下程式碼,便能夠自動生成一個範例檔案。

flutter create test_drive

接著進入剛建立好的資料夾test_drive中,執行flutter run,輸入數字以選擇執行裝置,就能夠跑我們的測試檔案了。

https://ithelp.ithome.com.tw/upload/images/20240918/2016944674Cb5swyZQ.png

p.s. 如果遇到CMake error,很可能是因為有位下載的資料庫導致程式無法執行,可參考此網站以下載所需的內容。


感謝閱讀到這裡的你,有任何想說的話都歡迎留言或email告訴我!
我們明天將開始寫下我們的第一個小app,敬請期待!


上一篇
【Day 02】Flutter是什麼?
下一篇
【Day 04】製作第一個app
系列文
Flutter基礎入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
arguskao
iT邦新手 3 級 ‧ 2024-09-29 09:02:06

如果我想在我的Mac上寫,而且只要用mac電腦模擬,是不是就不用安裝Android Studio

thanks

nny02426 iT邦新手 5 級 ‧ 2024-09-29 19:56:13 檢舉

不用的,但mac需要下載Xcode,部份package需要CocoaPods

這裡是MacOS的下載教學,可以跟著上面的步驟完成安裝與設定。

arguskao iT邦新手 3 級 ‧ 2024-09-29 21:40:36 檢舉

sudo gem install cocoapods
居然出現While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/gems/2.6.0 directory.
都已經用sudo,還有權限不允許?

nny02426 iT邦新手 5 級 ‧ 2024-09-30 00:09:54 檢舉

根據這則的回應,gem是Apple安裝的,給Apple他們使用的,因此他們是不希望用戶去更改他們的東西。

最好的方法是使用rbenv去下載。
如果覺得麻煩,也可以使用--user-install來下載:

gem install cocoapods --user-install

如果沒有預先設定ruby的$PATH,可以將以下這行加入bashrc來設定:

if which ruby >/dev/null && which gem >/dev/null; then
    PATH="$(ruby -rubygems -e 'puts Gem.user_dir')/bin:$PATH"
fi

我要留言

立即登入留言