2025 iThome鐵人賽
「 Flutter ：30天打造念佛App，跨平台從Mobile到VR，讓極樂世界在眼前實現！」
Day 6
「 Flutter Git 實戰應用篇—穿越到Coding世界的勇者啊，你骨骼驚奇需要這本秘笈(1) 」

前言

昨天我們已經「建立遠端儲存庫」完成第一次推送，
今天我們要來認識「 GUI 」並且實際操作 Source Control面板 將.gitignore推送到GitHub。

如此一來，我們就能取得 Git 秘笈—
Git 的操作方式1：「 圖像化介面 (GUI, Graphical User Interface)」

Day6 文章目錄：
一、VSCode Source Control
二、操作流程
三、Git擴充套件

一、VSCode Source Control

Git GUI 是以圖形化介面操作 Git 的方式，
不需要終端機Terminal打指令( Command-Line,CLI )，
而是透過點選圖像介面完成常見操作。

VSCode 內建的Source Control 面板，可以視為一個輕量級的 Git GUI。
提供常見的 Git 操作按鈕，像是 commit、push、pull、切分支。

• 左下顯示當前所在分支，點選分支名稱會出現分支操作選項。

打開VScode，點選左側的分支符號，可以開啟Source Control面板。
如果專案還沒有建立專案的本機Repo，就會看到Initialize Repository的按鈕。

二、操作流程

1. 編輯檔案

• 編輯檔案後，會出現commit按鈕

• 檔案狀態符號 對照表

• 點擊檔案名稱，可以對照修改

減號紅色代表刪除
加號綠色代表新增

2. 放入暫存區

• 點擊檔名右側 按鈕＋，放入暫存區
• 編輯檔案後，點擊檔名右側 按鈕↺ ，可以將檔案撤回修改，回到修改前的狀態

• 暫存區檔案，點擊檔案名稱右側 按鈕−，可以從暫存區撤回

4. 提交至本機儲存庫

• 提交方法1 : 輸入commit message，點選提交按鈕。
• 提交方法2 : 點擊commit按鈕，編輯commit message，macOS 按 ⌘W 離開編輯。

5. 同步至雲端儲存庫

• 點擊Sync Changes 同步到雲端儲存庫，點選確認ＯＫ，會先進行pull 再push。

6.(可選)撤回提交

• 如果先不同步到雲端，想先撤回commit，可以Undo Last Commit

• 常見操作的功能選單

例如：
Pull / Push / Fetch 同步遠端儲存庫
Branch 分支操作的相關功能
Stash 暫存區的相關功能

• Show Git Output

這個功能會打開 VSCode 的 Git 輸出面板，顯示背後實際執行的Git指令與結果。
當我們在Source control面板按下Commit、Sync Changes等按鈕時，
實際是VSCode幫我們在背後執行了對應的CLI指令。

前面提到的 Undo last commit，其實是VSCode幫我們執行了：

git reset --soft HEAD~1

2025-09-20 21:31:11.767 [info] > git reset --soft HEAD~ [6ms]

三、Git 擴充套件

1.Git History

2.Git Graph

Day6 重點回顧