Flutter & AlertDialog:如何将它对齐到底部?我如何制作 2 个像这样的图片的警报对话框?
Flutter & AlertDialog : How do I align it to bottom? How I make 2 Alert Dialogs like this pictures?
Flutter 和 AlertDialog:如何将它对齐到底部?怎么制作2个这样的Alert Dialogs?这张图请多多指教
showDialog(
context: context,
builder: (BuildContext context) {
double width =
MediaQuery.of(context).size.width;
double height =
MediaQuery.of(context).size.height;
return AlertDialog(
backgroundColor: Colors.transparent,
contentPadding: EdgeInsets.zero,
title: Center(
child: Text("Evaluation our APP")),
content: Container(
// What Should I write here?
)
},
);
这是解决方案之一:
showDialog(
context: context,
builder: (BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return AlertDialog(
backgroundColor: Colors.transparent,
contentPadding: EdgeInsets.zero,
elevation: 0.0,
// title: Center(child: Text("Evaluation our APP")),
content: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(Radius.circular(10.0))),
child: Column(
children: [
Text("a"),
Divider(),
Text("b"),
Divider(),
Text("c"),
],
),
),
SizedBox(
height: 10,
),
Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(Radius.circular(10.0))),
child: Center(child: Text("d")),
)
],
));
},
);
这是我的答案,没有创建 AlertDialog 的纯小部件:
final content = Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextButton(onPressed: () {}, child: Text("a"),),
Divider(height: 1,),
TextButton(onPressed: () {}, child: Text("b"),),
Divider(height: 1,),
TextButton(onPressed: () {}, child: Text("c"),),
],
),
),
SizedBox(
height: 10,
),
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(Radius.circular(10.0)),
),
child: TextButton(onPressed: () {}, child: Text("d"),),
),
SizedBox(
height: 40,
),
],
);
showDialog(
context: context,
builder: (ctx) {
return FractionallySizedBox(
widthFactor: 0.9,
child: Material(
type: MaterialType.transparency,
child: content,
),
);
}
);
由于文字绘制错误,必须添加Material
。
Flutter 和 AlertDialog:如何将它对齐到底部?怎么制作2个这样的Alert Dialogs?这张图请多多指教
showDialog(
context: context,
builder: (BuildContext context) {
double width =
MediaQuery.of(context).size.width;
double height =
MediaQuery.of(context).size.height;
return AlertDialog(
backgroundColor: Colors.transparent,
contentPadding: EdgeInsets.zero,
title: Center(
child: Text("Evaluation our APP")),
content: Container(
// What Should I write here?
)
},
);
这是解决方案之一:
showDialog(
context: context,
builder: (BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return AlertDialog(
backgroundColor: Colors.transparent,
contentPadding: EdgeInsets.zero,
elevation: 0.0,
// title: Center(child: Text("Evaluation our APP")),
content: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(Radius.circular(10.0))),
child: Column(
children: [
Text("a"),
Divider(),
Text("b"),
Divider(),
Text("c"),
],
),
),
SizedBox(
height: 10,
),
Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(Radius.circular(10.0))),
child: Center(child: Text("d")),
)
],
));
},
);
这是我的答案,没有创建 AlertDialog 的纯小部件:
final content = Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextButton(onPressed: () {}, child: Text("a"),),
Divider(height: 1,),
TextButton(onPressed: () {}, child: Text("b"),),
Divider(height: 1,),
TextButton(onPressed: () {}, child: Text("c"),),
],
),
),
SizedBox(
height: 10,
),
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(Radius.circular(10.0)),
),
child: TextButton(onPressed: () {}, child: Text("d"),),
),
SizedBox(
height: 40,
),
],
);
showDialog(
context: context,
builder: (ctx) {
return FractionallySizedBox(
widthFactor: 0.9,
child: Material(
type: MaterialType.transparency,
child: content,
),
);
}
);
由于文字绘制错误,必须添加Material
。