参考文章
主要是用StatefulBuilder
class _MyHomePageState extends State<MyHomePage> {
bool isChecked = false;
showTestDialog() {
showDialog(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder:
(BuildContext context, void Function(void Function()) setState) {
return SimpleDialog(title: Text("测试对话框标题"), children: <Widget>[
Row(children: <Widget>[
Checkbox(
value: this.isChecked,
onChanged: (bool val) {
setState(() {
this.isChecked = !this.isChecked;
});
debugPrint(this.isChecked.toString());
}),
Text("测试复选框")
])
]);
},
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: RaisedButton(
child: Text("点击出现弹窗"),
onPressed: () {
showTestDialog();
},
)),
);
}
}
我自己的代码
import 'dart:ui';
import 'package:flutter/material.dart';
//地区选择弹窗
class PersonalAreaSelectDialog extends Dialog {
PersonalAreaSelectDialog(this.canceledOnTouchOutside) : super();
//取屏幕最大宽度和高度
final width = window.physicalSize.width;
final height = window.physicalSize.height;
//点击背景是否能够退出
final bool canceledOnTouchOutside;
bool pressed = false;
//弹窗也是一个Widget,弹框就是打开一个新的路由,且颜色变成透明色
@override
Widget build(BuildContext context) {
return StatefulBuilder(
builder:
(BuildContext context, void Function(void Function()) setState) {
return Center(
child: Material(
//背景透明
color: Colors.transparent,
//保证控件居中效果
child: Stack(
children: <Widget>[
GestureDetector(
//点击事件
onTap: () {
if (canceledOnTouchOutside) {
Navigator.pop(context);
}
},
),
_dialog(context,setState)
],
)),
);},);
}
Widget _dialog(context,setState) {
return Center(
///弹框大小
child: Container(
width: width,
height: height,
margin: EdgeInsets.only(top: 200),
child: Container(
///弹框背景和圆角
decoration: const ShapeDecoration(
color: Color(0xFF333333),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
),
child: ListView(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
children: [
Expanded(
child: Container(
margin: EdgeInsets.only(left: 15, bottom: 21),
child: Text(
"台灣",
style: TextStyle(color: Color(0xFFDDDDDD), fontSize: 19),
),
)),
Container(
margin: EdgeInsets.only(right: 15, bottom: 21),
child: Text(
"確定",
style: TextStyle(color: Color(0xFFDDDDDD), fontSize: 19),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
// Navigator.pop(context, "台北市");
setState(() {
pressed = !pressed;
});
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 27, right: 27),
child: Text(
"台北市",
style: pressed
? TextStyle(color: Color(0xFFE6CFA1), fontSize: 14)
: TextStyle(color: Color(0xFFDDDDDD), fontSize: 14),
),
),
),
GestureDetector(
onTap: () {
Navigator.pop(context, "新北市");
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 27, right: 27),
child: Text(
"新北市",
style:
TextStyle(color: Color(0xFFDDDDDD), fontSize: 14),
),
),
),
GestureDetector(
onTap: () {
Navigator.pop(context, "基隆市");
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 27, right: 27),
child: Text(
"基隆市",
style:
TextStyle(color: Color(0xFFDDDDDD), fontSize: 14),
),
),
),
GestureDetector(
onTap: () {
Navigator.pop(context, "依蘭縣");
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 27, right: 27),
child: Text(
"依蘭縣",
style:
TextStyle(color: Color(0xFFDDDDDD), fontSize: 14),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
Navigator.pop(context, "中國大陸");
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 15, right: 15),
decoration: BoxDecoration(
color: Color(0xFFFFF9E9),
borderRadius: BorderRadius.all(
Radius.circular(50),
)),
child: Text(
"中國大陸",
style:
TextStyle(color: Color(0xFFA7976B), fontSize: 14),
),
),
),
GestureDetector(
onTap: () {
Navigator.pop(context, "新加坡");
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 17, right: 17),
decoration: BoxDecoration(
color: Color(0xFFFFF9E9),
borderRadius: BorderRadius.all(
Radius.circular(50),
)),
child: Text(
"新加坡",
style:
TextStyle(color: Color(0xFFA7976B), fontSize: 14),
),
),
),
GestureDetector(
onTap: () {
Navigator.pop(context, "馬來西亞");
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 15, right: 15),
decoration: BoxDecoration(
color: Color(0xFFFFF9E9),
borderRadius: BorderRadius.all(
Radius.circular(50),
)),
child: Text(
"馬來西亞",
style:
TextStyle(color: Color(0xFFA7976B), fontSize: 14),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
Navigator.pop(context, "日本");
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 27, right: 27),
decoration: BoxDecoration(
color: Color(0xFFFFF9E9),
borderRadius: BorderRadius.all(
Radius.circular(50),
)),
child: Text(
"日本",
style:
TextStyle(color: Color(0xFFA7976B), fontSize: 14),
),
),
),
GestureDetector(
onTap: () {
Navigator.pop(context, "韓國");
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 27, right: 27),
decoration: BoxDecoration(
color: Color(0xFFFFF9E9),
borderRadius: BorderRadius.all(
Radius.circular(50),
)),
child: Text(
"韓國",
style:
TextStyle(color: Color(0xFFA7976B), fontSize: 14),
),
),
),
GestureDetector(
onTap: () {
Navigator.pop(context, "菲律賓");
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 20, right: 20),
decoration: BoxDecoration(
color: Color(0xFFFFF9E9),
borderRadius: BorderRadius.all(
Radius.circular(50),
)),
child: Text(
"菲律賓",
style:
TextStyle(color: Color(0xFFA7976B), fontSize: 14),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
Navigator.pop(context, "泰國");
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 27, right: 27),
decoration: BoxDecoration(
color: Color(0xFFFFF9E9),
borderRadius: BorderRadius.all(
Radius.circular(50),
)),
child: Text(
"泰國",
style:
TextStyle(color: Color(0xFFA7976B), fontSize: 14),
),
),
),
GestureDetector(
onTap: () {
Navigator.pop(context, "柬埔寨");
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 20, right: 20),
decoration: BoxDecoration(
color: Color(0xFFFFF9E9),
borderRadius: BorderRadius.all(
Radius.circular(50),
)),
child: Text(
"柬埔寨",
style:
TextStyle(color: Color(0xFFA7976B), fontSize: 14),
),
),
),
GestureDetector(
onTap: () {
// Navigator.pop(context,"其他");
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 27, right: 27),
decoration: BoxDecoration(
color: Color(0xFFFFF9E9),
borderRadius: BorderRadius.all(
Radius.circular(50),
)),
child: Text(
"其他",
style:
TextStyle(color: Color(0xFFA7976B), fontSize: 14),
),
),
),
],
),
],
),
),
),
);
}
}