Day28 [Flutter] SQLite( 3 ) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 28

0

Mobile Development

用30天學習做出我的第一個Flutter App系列第 28 篇

Day28 [Flutter] SQLite( 3 )

15th鐵人賽

2023-10-13 23:45:18

234 瀏覽

分享至

今天要接著完成畫面，在昨天的程式碼後面繼續加入：

先連接資料庫
然後開始建立畫面，這裡我是簡單建立一個列表，每一列都包含一個ID、Name、Age、編輯和刪除的按鈕，以及右下角有一個新增按鈕。
- AppBar
- Listview
  - title
    - 將listArr的資料透過for迴圈印出，並且年齡小於20的資料會變成灰色字體
  - trailing
    - 放入刪除及編輯的按鈕，用SizeBox()調整寬度避免超出畫面
    - 點擊刪除按鈕會刪除該列資料
    - 點擊編輯按鈕，會將原本的資料更新為傳入的參數
- floatingActionButton
  - 放置新增按鈕，點擊之後會執行addTest()方法，並新增一筆資料
實作畫面：
- 初始畫面
- 新增一筆id=2的資料
- 刪除id=3的資料
- 將id=1的age改為15
  - 修改資料
  - 更新畫面

參考資料：
https://medium.com/%E5%86%8D%E4%B8%8D%E5%AF%AB%E5%B0%B1%E8%A6%81%E5%BF%98%E4%BA%86/flutter-%E4%BD%BF%E7%94%A8-sqlite-%E6%9C%AC%E5%9C%B0%E8%B3%87%E6%96%99%E5%BA%AB-b6c8a2f1f3e8

Day27 [Flutter] SQLite( 2 )

Day29 食譜APP

系列文

用30天學習做出我的第一個Flutter App 共 30 篇

目錄

RSS系列文訂閱系列文

5 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1123 組

團體組數

52 組

累計文章數

23068 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙