Flutter学习Day3 Widget 观念 StatelessWidget (下)

大家安安，小弟弟要来接续上一篇的结尾
上一篇的进度是列出了宠物的清单

而现在我们想实现在点击清单的时候
可以跳出视窗显示宠物的图片及内容的功能

因为我们需要onTap的事件去触发开启弹出视窗
所以就改写成GestureDetector(第39行)

一样在builder的地方(第42行)返回一个SimpleDiaglog 的 Widget
在里面塞一个高120宽80的container

hot restart一下

成功的显示出Dialog视窗

下一步呢
就是将我们宠物的资讯塞进去视窗里

第30行 将视窗的padding设为零

contentPadding: EdgeInsets.zero

第32行 放入图片

 Image.network(pet.imageUrl, fit: BoxFit.fill)

第33行 将图片与宠物资讯 以 padding 16 区隔开来

        Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [...省略内容],
          ),
        )

并在padding 的widget里 四段文字内容
分别是 宠物名称、性别、毛色及描述

hot restart一下

实际呈现画面效果

随着想实现的功能越来越多
main.dart的程序码内容也越来越肿胀
比新开幕的台中总站夜市人潮还肿胀

哭阿 (本来想开幕隔一天的时候去的，被人潮打退了)

所以我们第一个把动物类别抽出来
第二个把dialog Widget抽出来
这样子比较好看

main

dialog

model

这样切割下来
一个档案都不超过一百行
我觉得舒服多了

一样程序码放在我的个人GitHub上
有兴趣的可以点进去看看
GitHub
好啦 又到了小弟弟说再见的环节
下一篇就会开讲StatefulWidget
大家明天见
ㄅㄅ

参考

Google Developers YT