参考
Container也可以用这种类似的方法
TextButton(
onPressed: () {
setState(() {
pressed = !pressed;
});
},
child: Container(
margin: const EdgeInsets.all(8),
height: 60,
width: 340,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
alignment: Alignment.center,
child: Text(
'Suivant',
style: pressed
? TextStyle(color: Colors.grey)
: TextStyle(color: Colors.red),
),
),
),
我自己的代码
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: [
Stack(
alignment: Alignment.centerLeft,
children: [
GestureDetector(
onTap: () {
// Navigator.pop(context, "台北市");
setState(() {
pressed = !pressed;
});
},
child: Container(
padding: EdgeInsets.only(
top: 11, bottom: 11, left: 27, right: 27),
decoration: pressed
? BoxDecoration(
color: Color(0xFF444444),
borderRadius: BorderRadius.all(
Radius.circular(50),
))
: BoxDecoration(),
child: Text(
"台北市",
style: pressed
? TextStyle(
color: Color(0xFFE6CFA1), fontSize: 14)
: TextStyle(
color: Color(0xFFDDDDDD), fontSize: 14),
),
),
),
Container(
height: 20,
width: 14,
margin: EdgeInsets.only(left: 6),
decoration: pressed
? BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/base_widgets/icon_personal_file_coordinate.png"),
fit: BoxFit.fitWidth,
),
)
: BoxDecoration(),
),
],
),
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),
),
),
),
],
),
],
),
),
),
);
}
}