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

相关组件

CupertinoAlertDialog

AlertDialog基本使用

【title】 : 顶部组件 【Widget】
【content】 : 内容组件 【Widget】
【titleTextStyle】 : 顶部文字样式 【TextStyle】
【contentTextStyle】 : 内容文字样式 【TextStyle】
【titlePadding】 : 顶部内边距 【EdgeInsetsGeometry】
【contentPadding】 : 内容内边距 【EdgeInsetsGeometry】
【actions】 : 右下角组件列表 【List
【backgroundColor】 : 右下角组件列表 【背景色】
【elevation】 : 右下角组件列表 【背景色】
【shape】 : 影深 【double】
46.gif

  1. import 'package:flutter/material.dart';
  2. class CustomAlertDialog extends StatelessWidget {
  3. @override
  4. Widget build(BuildContext context) {
  5. return Column(
  6. children: <Widget>[
  7. _buildRaisedButton(context),
  8. _buildAlertDialog(),
  9. ],
  10. );
  11. }
  12. Widget _buildRaisedButton(BuildContext context) => RaisedButton(
  13. shape: RoundedRectangleBorder(
  14. borderRadius: BorderRadius.all(Radius.circular(10))),
  15. color: Colors.blue,
  16. onPressed: () {
  17. showDialog(context: context, builder: (ctx) => _buildAlertDialog());
  18. },
  19. child: Text(
  20. 'Just Show It !',
  21. style: TextStyle(color: Colors.white),
  22. ),
  23. );
  24. Widget _buildAlertDialog() {
  25. return AlertDialog(
  26. title: _buildTitle(),
  27. titleTextStyle: TextStyle(fontSize: 20, color: Colors.black),
  28. titlePadding: EdgeInsets.only(
  29. top: 5,
  30. left: 20,
  31. ),
  32. contentPadding: EdgeInsets.symmetric(horizontal: 5),
  33. backgroundColor: Colors.white,
  34. content: _buildContent(),
  35. actions: <Widget>[
  36. Icon(Icons.android, color: Colors.blue,),
  37. Icon(Icons.add, color: Colors.blue,),
  38. Icon(Icons.g_translate, color: Colors.blue,),
  39. Icon(Icons.games, color: Colors.blue,),
  40. ],
  41. elevation: 4,
  42. shape: RoundedRectangleBorder(
  43. borderRadius: BorderRadius.all(Radius.circular(10))),
  44. );
  45. }
  46. Widget _buildTitle() {
  47. return Row(
  48. //标题
  49. children: <Widget>[
  50. Image.asset(
  51. "assets/images/icon_head.png",
  52. width: 30,
  53. height: 30,
  54. ),
  55. SizedBox(width: 10,),
  56. Expanded(
  57. child: Text(
  58. "关于",
  59. style: TextStyle(fontSize: 18),
  60. )),
  61. CloseButton()
  62. ],
  63. );
  64. }
  65. Widget _buildContent() {
  66. return Column(
  67. mainAxisSize: MainAxisSize.min,
  68. children: <Widget>[
  69. Padding(
  70. padding: const EdgeInsets.all(10.0),
  71. child: Text(
  72. ' FlutterUnit是【张风捷特烈】的开源项目,'
  73. '收录Flutter的200+组件,并附加详细介绍以及操作交互,'
  74. '希望帮助广大编程爱好者入门Flutter。'
  75. '更多知识可以关注掘金账号、公众号【编程之王】。',
  76. style: TextStyle(color: Color(0xff999999), fontSize: 16),
  77. textAlign: TextAlign.justify,
  78. ),
  79. ),
  80. ],
  81. );
  82. }
  83. }