flutter - 如何在颤动的弹出菜单中实现下拉菜单
问题描述
我需要一个弹出菜单或任何其他方式来实现这样的布局。我试图在弹出视图中实现它,但我没有成功。请帮我解决这个问题。
这是我尝试过的代码,使用任何其他方法也可以。此代码给出错误no material widget found,如果可以修复它也会对我有所帮助。
void showFilter() {
showGeneralDialog(
barrierLabel: "Barrier",
barrierDismissible: true,
barrierColor: Colors.black.withOpacity(0.5),
transitionDuration: Duration(milliseconds: 700),
context: context,
pageBuilder: (_, __, ___) {
return Align(
alignment: Alignment.center,
child: Container(
height: 300,
child: SizedBox.expand(
child:Column(
children: <Widget>[
Container(
padding: EdgeInsets.only( top: SizeConfig.blockSizeHorizontal*2, left: SizeConfig.blockSizeHorizontal*6),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text("Monthly Summary", style: TextStyle(fontSize: SizeConfig.blockSizeHorizontal*6, color: Colors.black87,decoration: TextDecoration.none,),),
],
)
),
Container(
padding: EdgeInsets.only(top:SizeConfig.blockSizeHorizontal*2, left: SizeConfig.blockSizeHorizontal*3, right: SizeConfig.blockSizeHorizontal*3),
child: Divider(
color: Colors.black87,thickness: 2.0,
),
),
Container(
padding: EdgeInsets.only(left: SizeConfig.blockSizeHorizontal*6, top: SizeConfig.blockSizeHorizontal*4),
child: Row(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Text("Year - ", style: TextStyle(fontSize: SizeConfig.blockSizeHorizontal*4.5, color: Colors.black87,decoration: TextDecoration.none,),)
],
),
),
Container(
child: Row(
children: <Widget>[
Container(
child: DropdownButton(
value: _dpdValue,
underline: Container(),
isExpanded: true,
iconSize: 30.0,
items: _dropdownValues.map((val) {
return new DropdownMenuItem<String>(
value: val,
child: new Text(val),
);
}).toList(),
onChanged: (val) {
if (!mounted) return;
setState(
() {
_dpdValue = val;
},
);
},
),
)
],
),
)
],
)
)
],
)
),
margin: EdgeInsets.only(top: SizeConfig.blockSizeHorizontal*15, left: SizeConfig.blockSizeHorizontal*3, right: SizeConfig.blockSizeHorizontal*3),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(SizeConfig.blockSizeHorizontal*6),
),
),
);
},
transitionBuilder: (_, anim, __, child) {
return SlideTransition(
position: Tween(begin: Offset(0, 1), end: Offset(0, 0)).animate(anim),
child: child,
);
},
);
}
解决方案
我为此使用了 Alertdialog,希望它能为解决您的问题提供见解,
int year = 1990;
List<String> months = ['January', 'February', 'March'];
List<String> years = [];
String option, month;
@override
void initState() {
super.initState();
for (int i = year; i < 2020; i++) {
years.add(i.toString());
}
}
Future<bool> errorDialog(context) async {
Size size = MediaQuery.of(context).size;
return showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, setState) {
return AlertDialog(
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
content: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Monthly Summary"),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Year-'),
Container(
width: size.width * 0.5,
decoration: BoxDecoration(
border: Border.all(
color:Colors.amber),
borderRadius:
BorderRadius.all(Radius.circular(5))),
child: DropdownButtonFormField<String>(
decoration: InputDecoration(
contentPadding:
EdgeInsets.fromLTRB(10, 0, 10, 0),
filled: true,
fillColor: Colors.white,
hintText: 'Select Year',
hintStyle:
TextStyle(fontWeight: FontWeight.normal)),
value: option,
icon: Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.black),
onChanged: (String newValue) {
setState(() {
option = newValue;
});
},
validator: (value) {
if (value == null) {
return "Select Year";
}
return null;
},
items: years
.map<DropdownMenuItem<String>>((String option) {
return DropdownMenuItem<String>(
value: option,
child: Text(option),
);
}).toList(),
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Month-'),
Container(
decoration: BoxDecoration(
border: Border.all(
color:Colors.amber),
borderRadius:
BorderRadius.all(Radius.circular(5))),
width: size.width * 0.5,
child: DropdownButtonFormField<String>(
decoration: InputDecoration(
contentPadding:
EdgeInsets.fromLTRB(10, 0, 10, 0),
filled: true,
fillColor: Colors.white,
hintText: 'Select Month',
hintStyle:
TextStyle(fontWeight: FontWeight.normal)),
value: month,
icon: Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.black),
onChanged: (String newValue) {
setState(() {
month = newValue;
});
},
validator: (value) {
if (value == null) {
return "Select Month";
}
return null;
},
items: months
.map<DropdownMenuItem<String>>((String option) {
return DropdownMenuItem<String>(
value: option,
child: Text(option),
);
}).toList(),
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
color: Colors.amber,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(2.0))),
child: Text(
"CANCEL",
style: TextStyle(color: Colors.black),
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
color: Colors.amber,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(2.0))),
child: Text(
"SEARCH",
style: TextStyle(color: Colors.black),
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
],
),
),
],
),
),
);
});
});
}
推荐阅读
- python-3.x - 如何使用 Nginx 和 uWSGI 或 Gunicorn 在 Windows Server 上部署 Python Flask 应用程序?
- python - 如何使用 Python 绘制积分方程?
- java - 我可以在 JAVA 中使用“默认”变量吗?
- objective-c - 无法在 Objective-C Cocoa Xcode 中加载 Dylib
- amazon-web-services - kubernetes 没有为 ingress-nginx 控制器创建 ELB
- scala - org.apache.spark#spark-streaming_2.11_2.10;2.3.1:未找到
- database - 违反完整性约束:1048 列 'lawyer_id' 不能为空
- javascript - Reactjs:未捕获的 TypeError:无法将属性“innerHTML”设置为 null
- python - 如何使用 Fernet 加密对字符串变量进行加密
- ios - 通过添加/减去本地偏移量来计算日期时间 [将任何日期时间转换为 UTC 时间格式]