iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Mobile Development

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

希望透過這30天的自學,學習Flutter是如何開發跨平台的應用程式,包括Flutter的基本概念、Dart語言的基礎練習、Flutter的各種元件及使用方法⋯⋯等,並實作出自己的第一支Flutter App!

鐵人鍊成 | 共 30 篇文章 | 6 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11 [Flutter通訊錄實作]-製作主頁

首先先把要新增的資料夾及檔案建好! 在根目錄新增assets/images資料夾來放置圖片 在lib新增helpers/constants.dart資料...

2023-09-26 ‧ 由 zhiyun 分享
DAY 12

Day12 [Flutter通訊錄實作]-登入頁面

接著要來製作登入頁面, 會有一個圖片logo、一個密碼輸入框、一個登入按鈕,可以用鍵盤輸入四位密碼 先放上做好的成果! 那就開始來寫LoginPage....

2023-09-27 ‧ 由 zhiyun 分享
DAY 13

Day13 [Flutter通訊錄實作]-聯絡人列表頁面(1)

接著要來做聯絡人列表的頁面,這裡文章提到要做的是以下四件事:1.允許從 LoginPage 導航到 HomePage2.填入 JSON 資料及映射 (Map)...

2023-09-28 ‧ 由 zhiyun 分享
DAY 14

Day14 [Flutter通訊錄實作]-聯絡人列表頁面(2)

填入JSON資料及映射到ListView 放置json檔 在assets下建立data資料夾,然後把文章裡提供的records.json檔案放進資料夾裡...

2023-09-29 ‧ 由 zhiyun 分享
DAY 15

Day15 [Flutter通訊錄實作]-聯絡人列表頁面(3)

4.實作HomePage 先import上次三個檔案 宣告變數 添加設定,使狀態初始化時可以加載紀錄 這裡先清空資料記錄,再從JSON檔案取得新的資料...

2023-09-30 ‧ 由 zhiyun 分享
DAY 16

Day16 [Flutter通訊錄實作]-聯絡人列表頁面(4)

4.實作HomePage 更改AppBar因為原本寫的_buildBar方法有問題,所以就把AppBar改寫在build方法裡面了! 實作_buildLis...

2023-10-01 ‧ 由 zhiyun 分享
DAY 17

Day17 [Flutter通訊錄實作]-聯絡人列表頁面(5)

5.加入搜尋功能在HomePage.dart繼續添加下面的程式碼來完成搜尋功能 啟用文字編輯器的監聽器 這裡新增一個監聽器來控制搜尋欄產生變化時,程式碼會根...

2023-10-02 ‧ 由 zhiyun 分享
DAY 18

Day18 [Flutter通訊錄實作]-聯絡人資料頁面(上)

接著要來建最後的聯絡人資料頁面了!!1.在lib下建立DetailsPage.dart 還是一樣先import,然後建立DetailPage繼承的是State...

2023-10-03 ‧ 由 zhiyun 分享
DAY 19

Day19 [Flutter通訊錄實作]-聯絡人資料頁面(下)

昨天我們做DetailPage的時候有寫到這段程式碼,也認識了新的元件GestureDetector,但是現在點擊畫面還不能打開指定的網頁,因為裡面的URLLa...

2023-10-04 ‧ 由 zhiyun 分享
DAY 20

Day20 [Flutter] Widget( 1 )

前言 接下來這幾天我會把在通訊錄的實作中有用到的Widget和一些功能再整理、學習一下,也會對通訊錄進行一些改造!今天先來看一下一直有用到的Scaffold類別...

2023-10-05 ‧ 由 zhiyun 分享