# 榮沛 Flutter 試煉(第二屆)

###### tags: `獎金` `Flutter`
> 更新時間：2021/07/26

:::success
**Flutter 進度繳交區連結：**
https://drive.google.com/drive/folders/1T-uDsN-j0sibjjsNv9qWK5y1lzIG9CJC?usp=sharing
資料夾命名規則為名字+目前進度關卡，範例：Tom_第4關。
:::

試煉共計==十週==，請在限定時間內將進度完成到指定關卡並上傳，建議如有提早完成可以先接下去做喔：
1. 第二週結束前：建立第一個 Flutter 專案。
2. 第三週結束前：APP icon 設定 + APP 啟動畫面（Splash Screen）
3. 第四週結束前：Flutter 基本 UI + 在 APP 內嵌入 WebView
4. 第五週結束前：使用 http 套件發送 GET 請求。
5. 第六週結束前：Google Map 套件。
8. 第七週結束前：利用 SQLite 資料庫製作一個 CRUD 功能。
9. 第十週結束前：完成創意 APP。

[TOC]
<!--參考資料：-->
## 第1關：Flutter 環境建置
- [ ] 1. 下載 Flutter
- [ ] 2. 變更環境變數
- [ ] 3. 執行 fultter doctor
- [ ] 4. 下載並安裝 Android Studio
- [ ] 5. Android Studio 安裝 Plugin: Dart, Flutter
- [ ] 6. 建立虛擬機 / 或連接實體機（擇一）
<!--- [ ] 6. VS Code 安裝 Plugin: Flutter-->

## 第2關、建立第一個 Flutter 專案
- [ ] 產生第一個 Flutter 官方範例專案


## 第3關、APP icon 設定
- [ ] 將 APP icon 更換成榮沛智慧的 LOGO
> icon 素材連結
> https://drive.google.com/file/d/1VsmWFlwwt4wpyxwMo2QSWlEZgUA7BY3c/view?usp=sharing


## 第4關、APP 啟動畫面（Splash Screen）
- [ ] 以榮沛智慧的 logo 製作 APP 的啟動畫面

> 啟動畫面素材連結
> https://drive.google.com/file/d/1S8eIONNO_VDU7A1fjBJH_awCKX4O5dUr/view?usp=sharing


## 第5關、Flutter 基本 UI
使用以下 UI 建立一個或多個畫面

- [ ] Appbar：介面上方區域
- [ ] BottomNavigationBar：下方的導航列
- [ ] Drawer：左側隱藏選單
- [ ] SnackBar：下方彈出訊息

**Appbar**

**BottomNavigationBar**

**Drawer**

## 第6關、在 APP 內嵌入 WebView
- [ ] 在 APP 內嵌入榮沛智慧的官方網站
> 榮沛公司官網 https://www.rpwis.com/


## 第7關、使用 http 套件發送 GET 請求
- [ ] 透過 Http Get 取得 API 資料並顯示在頁面上。
- [ ] 設置一輸入框，依輸入值過濾列表顯示資料。

> API 網址 https://jsonplaceholder.typicode.com/users


<!--## 使用 BLoC Pattern-->

## 第8關、Google Map 套件
- [ ] 於 Google Map 上標記榮沛公司位置，並於 windowInfo 上顯示公司名稱及地址。
- [ ] 設置一按鈕，點選按鈕後地圖中心點返回榮沛位置。

> 榮沛公司位址：新北市三重區重新路四段53號10樓


## 第9關、利用 SQLite 資料庫製作一個 CRUD 功能
- [ ] 以手機端資料庫 SQLite 為資料來源，設計一個資料的 CRUD 介面（不需要跟下圖完全一樣），功能需包含資料的顯示、新增、修改、刪除。


## 第10關、使用網路大神的給的版面套版，並發揮創意完成個有趣的 APP 吧

> Best-Flutter-UI-Templates
> https://github.com/mitesh77/Best-Flutter-UI-Templates