flutter Dialog

  1. import 'dart:math';
  2. import 'package:flutter/material.dart';
  3. import 'test.dart';
  4. import 'package:flutter/cupertino.dart';
  5. class HomePage extends StatelessWidget {
  6. var selectedIndex = 0;
  7. @override
  8. Widget build(BuildContext context) {
  9. return Scaffold(
  10. appBar: AppBar(
  11. title: Text('Dialog'),
  12. ),
  13. body: Builder(builder: (BuildContext context) {
  14. return Center(
  15. child: Column(
  16. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  17. children: <Widget>[
  18. RaisedButton(
  19. child: Text('SimpleDialog'),
  20. onPressed: () {
  21. _showSimpleDialog(context);
  22. },
  23. ),
  24. RaisedButton(
  25. child: Text('AlertDialog'),
  26. onPressed: () {
  27. _showAlertDialog(context);
  28. },
  29. ),
  30. RaisedButton(
  31. child: Text('CupertinoAlertDialog'),
  32. onPressed: () {
  33. _showCupertinoAlertDialog(context);
  34. },
  35. ),
  36. RaisedButton(
  37. child: Text('CustomDialog'),
  38. onPressed: () {
  39. _showCustomDialog(context);
  40. },
  41. ),
  42. RaisedButton(
  43. child: Text('bottomSheet'),
  44. onPressed: () {
  45. _showBottomView(context);
  46. },
  47. ),
  48. RaisedButton(
  49. child: Text('bottomSelectSheet'),
  50. onPressed: () {
  51. _showSelectionDialog(context);
  52. },
  53. ),
  54. ],
  55. ),
  56. );
  57. }));
  58. }
  59. void _showBottomView(BuildContext context) {
  60. var datas = List.generate(20, (index) {
  61. return 'datas$index';
  62. });
  63. showModalBottomSheet(
  64. context: context,
  65. isScrollControlled: false,
  66. builder: (ctx) {
  67. return Container(
  68. height: 200,
  69. color: Colors.white,
  70. child: Column(
  71. children: <Widget>[
  72. Row(
  73. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  74. children: <Widget>[
  75. FlatButton(
  76. child: Text('取消'),
  77. onPressed: () {
  78. Navigator.pop(context);
  79. },
  80. ),
  81. FlatButton(
  82. child: Text('确定'),
  83. splashColor: Colors.grey,
  84. highlightColor: Colors.white,
  85. onPressed: () {
  86. Navigator.pop(context);
  87. print('selectedIndex:$selectedIndex' +
  88. 'data:${datas[selectedIndex]}');
  89. },
  90. ),
  91. ],
  92. ),
  93. Expanded(
  94. child: CupertinoPicker(
  95. children: datas.map((item) {
  96. return Text(item);
  97. }).toList(),
  98. onSelectedItemChanged: (index) {
  99. print('$index');
  100. selectedIndex = index;
  101. },
  102. itemExtent: 36,
  103. ),
  104. )
  105. ],
  106. ),
  107. );
  108. },
  109. );
  110. }
  111. void _showSimpleDialog(BuildContext context) {
  112. showDialog(
  113. context: context,
  114. // barrierDismissible: false,
  115. builder: (ctx) {
  116. return SimpleDialog(
  117. // title: Text('SimpleDialog',textAlign: TextAlign.center,),
  118. // titlePadding: EdgeInsets.all(10),
  119. backgroundColor: Colors.amber,
  120. elevation: 5,
  121. shape: RoundedRectangleBorder(
  122. borderRadius: BorderRadius.all(
  123. Radius.circular(6),
  124. ),
  125. ),
  126. contentPadding: EdgeInsets.all(0),
  127. children: <Widget>[
  128. GestureDetector(
  129. child: Image.asset(
  130. 'assets/123.jpg',
  131. fit: BoxFit.cover,
  132. // height: 400,
  133. // width: 400,
  134. ),
  135. onTap: () {
  136. //先关闭弹窗
  137. Navigator.pop(context);
  138. //跳转到下一页
  139. Navigator.push(
  140. context,
  141. MaterialPageRoute(builder: (context) => TestPage()),
  142. );
  143. },
  144. )
  145. // ListTile(
  146. // title: Center(
  147. // child: Text("Item_1"),
  148. // ),
  149. // ),
  150. // ListTile(
  151. // title: Center(
  152. // child: Text("Item_2"),
  153. // ),
  154. // ),
  155. // ListTile(
  156. // title: Center(
  157. // child: Text("Item_3"),
  158. // ),
  159. // ),
  160. // ListTile(
  161. // title: Center(
  162. // child: Text("Close"),
  163. // ),
  164. // onTap: () {
  165. // Navigator.pop(context);
  166. // },
  167. // ),
  168. ],
  169. );
  170. },
  171. );
  172. }
  173. void _showAlertDialog(BuildContext context) {
  174. showDialog(
  175. context: context,
  176. barrierDismissible: true,
  177. builder: (ctx) {
  178. return AlertDialog(
  179. title: Text(
  180. 'data',
  181. textAlign: TextAlign.center,
  182. ),
  183. content: Text(
  184. 'datadatadatadatadatasdadadatadatadatadatadatadatadatadatadatadatadatadata'),
  185. elevation: 5,
  186. actions: <Widget>[
  187. Row(
  188. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  189. children: <Widget>[
  190. FlatButton(
  191. child: Text('确定'),
  192. onPressed: () {},
  193. ),
  194. FlatButton(
  195. child: Text('取消'),
  196. onPressed: () {
  197. Navigator.pop(context);
  198. },
  199. ),
  200. ],
  201. ),
  202. ],
  203. );
  204. },
  205. );
  206. }
  207. void _showCupertinoAlertDialog(BuildContext context) {
  208. showDialog(
  209. context: context,
  210. barrierDismissible: true,
  211. builder: (ctx) {
  212. return CupertinoAlertDialog(
  213. title: Text(
  214. 'data',
  215. textAlign: TextAlign.center,
  216. ),
  217. content: Text(
  218. 'datadatadatadatadatasdadadatadatadatadatadatadatadatadatadatadatadatadata'),
  219. // elevation: 5,
  220. actions: <Widget>[
  221. // Row(
  222. // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  223. // children: <Widget>[
  224. FlatButton(
  225. child: Text('确定'),
  226. onPressed: () {},
  227. ),
  228. FlatButton(
  229. child: Text('取消'),
  230. onPressed: () {
  231. Navigator.pop(context);
  232. },
  233. // ),
  234. // ],
  235. )
  236. ],
  237. );
  238. },
  239. );
  240. }
  241. void _showCustomDialog(BuildContext context) {
  242. showDialog(
  243. context: context,
  244. barrierDismissible: true,
  245. builder: (ctx) {
  246. return CustomDialog();
  247. },
  248. );
  249. }
  250. void _showSelectionDialog(BuildContext context) {
  251. showModalBottomSheet(
  252. context: context,
  253. isScrollControlled: false,
  254. builder: (ctx) {
  255. return Container(
  256. color: Colors.grey,
  257. height: 130,
  258. child: Column(
  259. crossAxisAlignment: CrossAxisAlignment.center,
  260. // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  261. children: <Widget>[
  262. GestureDetector(
  263. child: _itemCreat(context, '相机'),
  264. onTap: (){
  265. print('选中相机');
  266. },
  267. ),
  268. GestureDetector(
  269. child: _itemCreat(context, '相册'),
  270. onTap: (){
  271. print('选中相册');
  272. },
  273. ),
  274. GestureDetector(
  275. child: Padding(
  276. padding: EdgeInsets.only(top: 10),
  277. child: _itemCreat(context, '取消'),
  278. ),
  279. onTap: (){
  280. Navigator.pop(context);
  281. },
  282. )
  283. ],
  284. ),
  285. );
  286. },
  287. );
  288. }
  289. Widget _itemCreat(BuildContext context, String title) {
  290. return Container(
  291. color: Colors.white,
  292. height: 40,
  293. width: MediaQuery.of(context).size.width,
  294. child: Center(
  295. child: Text(
  296. title,
  297. style: TextStyle(fontSize: 16, color: Colors.black),
  298. textAlign: TextAlign.center,
  299. ),
  300. ),
  301. );
  302. }
  303. }
  304. class CustomDialog extends Dialog {
  305. CustomDialog({Key key}) : super(key: key);
  306. @override
  307. Widget build(BuildContext context) {
  308. return Center(
  309. child: Container(
  310. color: Colors.white,
  311. height: 365,
  312. padding: EdgeInsets.all(10),
  313. child: Column(
  314. children: <Widget>[
  315. Image.asset(
  316. 'assets/123.jpg',
  317. fit: BoxFit.cover,
  318. ),
  319. Row(
  320. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  321. children: <Widget>[
  322. FlatButton(
  323. onPressed: () {
  324. Navigator.pop(context);
  325. },
  326. child: Text('确定'),
  327. ),
  328. FlatButton(
  329. onPressed: () {
  330. Navigator.pop(context);
  331. },
  332. child: Text('取消'),
  333. )
  334. ],
  335. )
  336. ],
  337. ),
  338. ),
  339. );
  340. }
  341. }

flutter dialog的更多相关文章

  1. flutter dialog异常Another exception was thrown: No MaterialLocalizations found

    flutter dialog异常Another exception was thrown: No MaterialLocalizations found import 'package:flutter ...

  2. 29 Flutter Dialog AlertDialog 、SimpleDialog、showModalBottomSheet、showToast

    pubspec.yaml fluttertoast: ^ Dialog.dart import 'package:flutter/material.dart'; import 'package:flu ...

  3. flutter dialog异常Another exception was thrown: Navigator operation requested with a context that does not include a Navigator

    我在使用flutter里的对话框控件的时候遇到了一个奇怪的错误 Another exception was thrown: Navigator operation requested with a c ...

  4. 这一次,解决Flutter Dialog的各种痛点!

    前言 Q:你一生中闻过最臭的东西,是什么? A:我那早已腐烂的梦. 兄弟萌!!!我又来了! 这次,我能自信的对大家说:我终于给大家带了一个,能真正帮助大家解决诸多坑比场景的pub包! 将之前的flut ...

  5. flutter Dialog里ListView的问题

    showDialog( context: context, builder: (ctx) { return // Dialog( // child: Container( // padding: Ed ...

  6. 一种更优雅的Flutter Dialog解决方案

    前言 系统自带的Dialog实际上就是Push了一个新页面,这样存在很多好处,但是也存在一些很难解决的问题 必须传BuildContext loading弹窗一般都封装在网络框架中,多传个contex ...

  7. Flutter Dialog 屏蔽返回键

    使用 WillPopScope + Future.value(false); 屏蔽返回键.代码如下: showDialog<Null>( context: context, // Buil ...

  8. Flutter GetX使用---简洁的魅力!

    前言 使用Bloc的时候,有一个让我至今为止十分在意的问题,无法真正的跨页面交互!在反复的查阅官方文档后,使用一个全局Bloc的方式,实现了"伪"跨页面交互,详细可查看:flutt ...

  9. Flutter 改善套娃地狱问题(仿喜马拉雅PC页面举例)

    前言 这篇文章是我一直以来很想写的一篇文章,终于下定决心动笔了. 写Flutter的小伙伴可能都感受到了:掘金的一些热门的Flutter文章下,知乎的一些Flutter的话题下或者一些论坛里面,喷Fl ...

随机推荐

  1. linux上如何安装git

    安装依赖软件 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel asciidoc yum instal ...

  2. vmware虚拟机安装centos7.3

    vmware准备 CentOS准备,这里下载的是CentOS 7.3CentOS-7-x86_64-Everything-1611.iso 创建新的虚拟机 选择自定义安装 硬件兼容性默认最新的,不用动 ...

  3. 小伙伴们来看啊!开源智能机 Librem 5 规格发布。

    下图是 Librem 5 的高配版规格: (看到这配置,忍不住吐槽一句:放到三年前都看不上……) Librem 5 的更详细规格如下: CPU: i.MX8M @ max. 1.5GHz 四核 Cor ...

  4. zabbix-server、proxy、agent的分布式部署步骤

    1.准备工作 关闭防火墙和SELinux防火墙,因为他们会限制一些访问权限,如果服务器不能关闭就需要手动设置规则,这里测试用就直接关闭了 service firewalld stop; setenfo ...

  5. 微信小程序(7)--微信小程序连续旋转动画

    微信小程序连续旋转动画 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html <view animation=&quo ...

  6. dumpe2fs Linux支持的文件系统

    dumpe2fs  (-bh)装置文件名 选项与参数: -b : 列出保留为坏轨的部分 -h : 仅列出superblock的数据,不会列出其他的区段内容 查看Linux支持的文件系统哪些支持: ls ...

  7. mysql备份基础

    1.1 备份的原因 衡量备份恢复有两个重要的指标:恢复点目标(RPO)和恢复时间目标(RTO), 前者重点关注能恢复到什么程度,而后者则重点关注恢复需要多长时间. 1.1.1 备份的目录 做灾难恢复: ...

  8. 绑定与非绑定方法及反射,isinstance和issubclass内置函数

    目录 绑定方法与非绑定方法 1.绑定方法 2.非绑定方法(staticmethod) isinstance和issubclass 内置函数 1.isinstance 2.issubclass 反射(面 ...

  9. Attention机制中权重的计算

    Attention mechanism中,给输入序列中对应的每一个Ht分配权重(打分)究竟是如何打分? 输入序列打分,a(s, h) 其中s是输出序列的t-1时刻的隐藏层状态,h是输入的多个状态,

  10. mybatis 中 if-test 判断大坑

    [<if test="takeWay == '0'">]mybatis的if判断 单个的字符要写到双引号里面才行,改为<if test='takeWay == & ...