本文已参与「新人创作礼」活动，一起开启掘金创作之路
flutter大家应该有啥耳闻 是一个制作多端应用的一个语言 感兴趣的网友自行去查喂
今天我来教大家写一个 女朋友老是问你吃啥 你又不知道要吃啥 突然急切的想要一个帮你自动选择的app
今天我就教你如何实现它 最后一篇有完整源码 如需要我会上传到GitHub给你们
APP完整页面如下
首先 我们先决定要做什么 并一步步去实现它
第一步： 我们应该要有一个填写菜单的输入框吧 不然我们咋记录下你女朋友想吃啥呢
而这个输入框为了不那个突兀的显示在界面上破坏美感 我决定搞一个弹出框
而弹出框我决定用 floatingActionButton 浮动按钮来创建一个AlertDialog 弹出对话框来实现
我们先在主界面添加一个浮动按钮 直接在Scaffold添加这点代码就可以了 代码很简单也没啥难度 就不详细讲了
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
},
label: const Text('添加菜单选项'),
),
有了浮动按钮之后呢 我们再在按钮的点击事件（floatingActionButton的onPressed）里去实现一个弹出框 而弹出框的内容就像我们想的那样 首先要有一个标题 告诉你女朋友或者男朋友填啥吧 然后再要有一个输入框来输入想吃啥吧 最后还要有一个确定框 来对填好的菜名去对程序说明下一步是否要做了
弹出框代码如下：
showDialog<Null>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('菜单选项'),
content:
StatefulBuilder(builder: (context, StateSetter setState) {
return Row(
children: [
Expanded(
child: TextField(
controller: _textEditingController,
autofocus: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
contentPadding: EdgeInsets.symmetric(
horizontal: 15, vertical: 15),
labelText: '菜名',
floatingLabelBehavior: FloatingLabelBehavior.always,
hintText: '腐竹炒肉',
),
),
)
],
);
}),
actions: <Widget>[
new FlatButton(
child: new Text('确定'),
onPressed: () {
Navigator.pop(context);
if (_textEditingController.text.trim() == "") {
ToastHelper.error("吃空气？？？？");
return;
}
},
),
],
);
},
).then((val) {
});
这段代码很简单 但是有几个地方要明白的是
首先有几个属性要注意的 context: context (说明是在当前显示的界面 是一个必须的属性)和 barrierDismissible: true(点击对话框barrier(遮罩)时是否关闭它) 然后就是我们要设置的内容了
首先是标题 title: const Text('菜单选项')这个没问题吧
然后是内容content 在这里我用了一个
StatefulBuilder来显示它 然后用一个row 来装一个文本框 和设置文本框的控制器 和用decoration对输入框做了一个样式设计 和做了一个hintText 文本框空时显示的文字提示信息
然后我们设置一个按钮 和一个按钮点击事件之后对弹出的文本框里的文本做一个判断 让我们用户在点击的时候直接退出弹出框 并对弹出框里的文本框的文本进行一个判断 如果文本为空 那就提示吃啥吗 吃空气吗？
至此 效果图如下 接下来我们就可以去进行下一步的实现了 把菜名添加进菜单里
Flutter之教你制作一个选择吃啥APP（一）juejin.cn/post/708597…
Flutter之教你制作一个选择吃啥APP（二）juejin.cn/post/708597…
Flutter之教你制作一个选择吃啥APP（三）juejin.cn/post/708597…
