Flutter基础介绍与实作-Day13 Onboarding、Login、Sign Up范例实作(1)

今天我们就利用我们之前所学的来做一个和旅游相关的Onboarding介面，事不宜迟赶快开始吧！
我想要做一个有三个分页并且可以滑动的App，所以要先去下载3张图片，然後按照之前的方法放入Flutter，我分别把他们命名为T1、T2、T3，要记得去pubspec.yaml作设定喔！

我们先来规划Onboarding的画面，首先现在lib资料夹下建立一个名为screens的资料夹，用来存放做好的页面，再在screens资料夹底下再建一个splash的资料夹，用来放Onboarding画面的地方，然後建立一个splash_screen.dart来设计我们Onboarding画面的地方，再在splash资料夹下建立一个components的资料夹，用来放置画面里会出现的元件，建立一个body.dart来处理画面的body，最後再创一个splash_content.dart来处理PageView.builder每一页要显示的widget，这样一来我们Onboarding的页面就建立完了喔！！

接下来呢我们来建立一些共用的资料夹，共用的东西像是App的颜色，尺寸大笑等等，首先先在lib资料夹底下建一个componrnts的资料夹，用来放共用元件的widget，然後建一个default_button.dart来设计共用的按钮，之後在回到lib资料夹下，建一个constants.dart来存放共用的属性，像是app的颜色或是文字颜色等等，再建一个routes.dart来放之後所有的页面，最後再建一个size_config.dart来处理尺寸的问题就大功告成了
大家有没有被搞混看不懂啊？看不懂文字没关系只要跟下图一样就是对的了

都完成上面的设置那我们就准备开始了喔！
先从App的外观开始
constants.dart

size_config.dart

Default_button.dart

Splash_content.dart

body.dart

splash_screen.dart

routes.dart

main.dart

成果如下

完整程序码

今日总结
刚开始制作的时候有没有觉得很困难啊！不过没关系慢慢来多多练习就好，明天我们会接着作登入的页面，那我们明天见喔！