iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
自我挑戰組

Flutter系列 第 23

Flutter基礎介紹與實作-Day23 旅遊筆記的實作(4)

  • 分享至 

  • xImage
  •  

今天就接續來講中部地區的製作吧!
資料夾建立
lib/scareens/food_Middle/food_Middle_screen.dart
lib/scareens/food_Middle/components/food_Middle_body.dart
一樣要在assets資料夾下的Food資料夾裡建一個中部的資料夾,然後把你自己找的照片放到裡面去
https://ithelp.ithome.com.tw/upload/images/20211007/20141032IewFPzm5gz.jpg

再來一樣要修改pubspec.yaml裡面的程式碼,要記得點選Pub get讓資料更新喔!
https://ithelp.ithome.com.tw/upload/images/20211007/201410321ECt1yLf6C.jpg

完成之後就可以來改我們主要的程式碼了
food_Middle_screen.dart
https://ithelp.ithome.com.tw/upload/images/20211007/20141032feG64OmxL3.jpg

這個頁面的變化有限,這邊就不多講了
food_Middle_body.dart
https://ithelp.ithome.com.tw/upload/images/20211007/201410325sXsWuj0a2.jpg

這邊的卡片樣式可以做很多的變,像是可以做得像FB或是ig那樣有頭像,或是不要有邊框之類的,這邊為了整個排版的完整性,我有統一規格啦!
一樣在把連結串上,這個地區就完成了喔!如果有不會串的可以看前面幾天的複習,或是看看哪天有小驚喜我會把程式碼貼上去
成果如下
https://ithelp.ithome.com.tw/upload/images/20211007/20141032192uuKuEDR.jpg

完整程式碼


今日總結
內容是不是都非常的相似啊!大家都可以自己試試看喔!


上一篇
Flutter基礎介紹與實作-Day22 旅遊筆記的實作(3)
下一篇
Flutter基礎介紹與實作-Day24 旅遊筆記的實作(5)
系列文
Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言