一个简单的对话框结构,可指定头、中处的组件。拥有拥有标题、内容的文字样式和边距,影深、形状等属性。常与SimpleDialogOption联用。

相关组件

SimpleDialogOption

SimpleDialog基本使用

【title】:底部组件【widget】
【children】:子组件列表【List
【titlePadding】:顶部内边距【EdgeInsetsGeometry】
【contentPadding】:内容内边距【EdgeInsetsGeometry】
【backgroundColor】:右下角组件列表【背景色】
【elevation】:右下角组件列表【背景色】
【shape】:影深【double】

47.gif

  1. import 'dart:math';
  2. import 'package:flutter/cupertino.dart';
  3. import 'package:flutter/material.dart';
  4. class CustomSimpleDialog extends StatelessWidget {
  5. final info = [
  6. '性别: 男 未婚',
  7. '微信: zdl1994328',
  8. "掘金: 张风捷特烈",
  9. "github: toly1994328",
  10. "邮箱: 1981462008@qq.com",
  11. ];
  12. @override
  13. Widget build(BuildContext context) {
  14. return Stack(
  15. children: <Widget>[
  16. _buildSimpleDialog(context),
  17. Positioned(
  18. top: 70,
  19. right: 30,
  20. child: _buildRaisedButton(context)),
  21. ],
  22. );
  23. }
  24. Widget _buildRaisedButton(BuildContext context) => RaisedButton(
  25. shape: RoundedRectangleBorder(
  26. borderRadius: BorderRadius.all(Radius.circular(10))),
  27. color: Colors.blue,
  28. onPressed: () {
  29. showDialog(context: context, builder: (ctx) => _buildSimpleDialog(ctx));
  30. },
  31. child: Text(
  32. 'Just Show It',
  33. style: TextStyle(color: Colors.white),
  34. ),
  35. );
  36. SimpleDialog _buildSimpleDialog(BuildContext context) {
  37. return SimpleDialog(
  38. title: _buildTitle(),
  39. titlePadding: EdgeInsets.only(
  40. top: 5,
  41. left: 20,
  42. ),
  43. contentPadding: EdgeInsets.symmetric(horizontal: 5),
  44. children: _buildChild(context),
  45. backgroundColor: Colors.white,
  46. elevation: 4,
  47. shape: RoundedRectangleBorder(
  48. borderRadius: BorderRadius.all(Radius.circular(10))),
  49. );
  50. }
  51. List<Column> _buildChild(BuildContext context) {
  52. return info
  53. .map((str) => Column(
  54. crossAxisAlignment: CrossAxisAlignment.start,
  55. children: <Widget>[
  56. SimpleDialogOption(
  57. onPressed: () => print(str),
  58. child: Container(
  59. width: double.infinity,
  60. child: Text(
  61. str,
  62. style: TextStyle(color: Color(0xff999999), fontSize: 16),
  63. ),
  64. ),
  65. ),
  66. Divider(
  67. indent: 20,
  68. height: 12,
  69. color: info.indexOf(str) == info.length - 1
  70. ? Colors.transparent
  71. : Theme.of(context).dividerColor,
  72. )
  73. ],
  74. ))
  75. .toList();
  76. }
  77. Widget _buildTitle() {
  78. return Row(
  79. //标题
  80. children: <Widget>[
  81. Image.asset(
  82. "assets/images/icon_head.png",
  83. width: 30,
  84. height: 30,
  85. ),
  86. SizedBox(
  87. width: 10,
  88. ),
  89. Expanded(
  90. child: Text(
  91. "张风捷特烈",
  92. style: TextStyle(fontSize: 18),
  93. )),
  94. CloseButton()
  95. ],
  96. );
  97. }
  98. }