iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
自我挑戰組

Flutter系列 第 27

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

  • 分享至 

  • xImage
  •  

今天要做的是區域的部分,重點的話之前就說過了就不再重複了,今天做兩個區域北部和中部,那就趕快開始吧!


先在assets資料夾下建立一個View的資料夾,然後裡面分別在建立北部和中部資料夾作區隔,建立完成後就可以把照片丟進去了
https://ithelp.ithome.com.tw/upload/images/20211011/20141032KPYq58iQVC.jpg

一樣要到pubspec.yaml去做更改喔!不要忘記改完要按Pub get做更新喔!
https://ithelp.ithome.com.tw/upload/images/20211011/20141032IfuLX7rErb.jpg

建立資料夾
北部:
lib/scareens/View_Nourth/view_Nourth_screen.dart
lib/scareens/View_Nourth/components/view_Nourth_body.dart
中部:
lib/scareens/View_Middle/view_ Middle screen.dart
lib/scareens/View
Middle /components/view_ Middle_body.dart
好了就可以來看程式碼了
view_Nourth_screen.dart
https://ithelp.ithome.com.tw/upload/images/20211011/20141032jyafnRwzbP.jpg

view_Nourth_body.dart
https://ithelp.ithome.com.tw/upload/images/20211011/20141032eUG2a8P66n.jpg

view_ Middle _screen.dart
https://ithelp.ithome.com.tw/upload/images/20211011/201410323gAdQuJW6q.jpg

view_ Middle_body.dart
https://ithelp.ithome.com.tw/upload/images/20211011/20141032nAShuVjH7V.jpg

成果如下
北部
https://ithelp.ithome.com.tw/upload/images/20211011/20141032300pAwzvGS.jpg
中部
https://ithelp.ithome.com.tw/upload/images/20211011/201410324JBAGRR9Ss.jpg

完整程式碼


今日總結
快結束了,明天作完東部和南部就剩一點點了,我們明天見


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

尚未有邦友留言

立即登入留言