1.自定义提示框
image.png
void _purchase(context, status) {
showDialog(
// 传入 context
context: context,
// 构建 Dialog 的视图
builder: (_) => Container(
padding: EdgeInsets.symmetric(
horizontal: 40, vertical: ScreenUtil.screenHeight / 3),
child: Stack(
children: <Widget>[
Positioned(
child: Container(
height: 167,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5))),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Text(
'${status == '1' ? '取消发布' : '是否重新发布'}',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Color(0XFF333333),
decoration: TextDecoration.none),
),
SizedBox(
height: 20,
),
status == '1'
? Container(
padding: EdgeInsets.symmetric(horizontal: 21),
child: Text(
'取消发布后，您的求购信息将不可见，您可以在取消后重新发布。 ',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0XFF333333),
decoration: TextDecoration.none),
),
)
: Container(),
SizedBox(
height: 20,
),
MdGaps.line,
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 21),
child: Text(
'关闭 ',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Color(0XFF333333),
decoration: TextDecoration.none),
),
),
),
Container(
color: Color(0XFFEEEEEE),
width: 2,
height: 36,
),
Expanded(
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 21),
child: Text(
'${status == '1' ? '取消发布' : '重新发布'}',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Color(0XFFF36926),
decoration: TextDecoration.none),
),
))
],
),
],
),
),
)
],
)));
}
2.版本更新框,替换图片
showDialog(
// 传入 context
context: context,
// 构建 Dialog 的视图
builder: (_) => Stack(
children: <Widget>[
Positioned(
left: ScreenUtil.screenWidth / 10,
top: ScreenUtil.screenWidth / 10 * 3,
child: Image.asset(
'assets/images/updatereminder_icon_bg@3x.png',
width: ScreenUtil.screenWidth / 10 * 8,
),
),
Positioned(
left: ScreenUtil.screenWidth / 10,
top: ScreenUtil.screenWidth / 10 * 3,
child: Container(
padding: EdgeInsets.only(top: 30, left: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'${'发现新版本'}',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
decoration: TextDecoration.none),
),
Container(
padding: EdgeInsets.only(left: 3),
child: Text(
'v${data['data']['appVersion']}',
style: TextStyle(
fontSize: 14,
color: Colors.white,
decoration: TextDecoration.none),
),
),
],
),
),
),
Positioned(
left: ScreenUtil.screenWidth / 10 + 20,
top: ScreenUtil.screenWidth / 10 * 3 + 180,
child: Container(
child: Text(
'${data['data']['updateContent']}',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Color(0XFF333333),
decoration: TextDecoration.none),
),
)),
Positioned(
child: GestureDetector(
child: Image.asset('assets/images/updatereminder_icon_close@3x.png',width: 25,),
onTap: (){
Navigator.pop(_);
},
),
left: (ScreenUtil.screenWidth-25)/2,
top: ScreenUtil.screenWidth*1.4,),
],
)
);
3.弹出输入框
image.png
1)新建组建，取名 provide_widget.dart
import 'package:flutter/material.dart';
import 'package:midou_ee/resoures/md_styles.dart';
import 'package:midou_ee/utils/screen_util.dart';
class ProvideWidget extends StatefulWidget {
ProvideWidget({
Key key,
}) : super(key: key);
@override
_ProvideWidgetState createState() => _ProvideWidgetState();
}
class _ProvideWidgetState extends State<ProvideWidget> {
TextEditingController _decController = TextEditingController();
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: Scaffold(
backgroundColor: Colors.transparent,
body: Container(
padding: EdgeInsets.symmetric(
horizontal: 40, vertical: ScreenUtil.screenHeight / 3),
child: Stack(
children: <Widget>[
Positioned(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5))),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: <Widget>[
Text(
'报价：',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Color(0XFF333333),
decoration: TextDecoration.none),
),
Expanded(
child: Container(
height: 30.0,
width: 150.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(5)), //边角为5
),
child: TextField(
controller: _decController,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14.0,
),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
/*边角*/
borderRadius: BorderRadius.all(
Radius.circular(5), //边角为5
),
borderSide: BorderSide(
color: Color(0XFFEEEEEE), //边线颜色为白色
width: 1, //边线宽度为2
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0XFFEEEEEE), //边框颜色为白色
width: 1, //宽度为5
),
borderRadius: BorderRadius.all(
Radius.circular(5), //边角为30
),
),
contentPadding: const EdgeInsets.all(0),
hintStyle: TextStyle(fontSize: 12.0),
),
),
),
),
Text(
'万元',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Color(0XFF333333),
decoration: TextDecoration.none),
),
Container(
padding: EdgeInsets.symmetric(
horizontal: 26, vertical: 3),
decoration: BoxDecoration(
border: Border.all(
width: 1, color: Color(0XFFEEEEEE)),
borderRadius:
BorderRadius.all(Radius.circular(5))),
child: Text(
'面议',
style: TextStyle(
fontSize: 14,
color: Color(0XFF333333),
decoration: TextDecoration.none),
),
),
],
),
),
SizedBox(height: 23),
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Text(
'车辆信息描述',
style: TextStyle(
fontSize: 14,
color: Color(0XFF333333),
fontWeight: FontWeight.bold,
decoration: TextDecoration.none),
),
),
SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFEEEEEE), width: 0.5),
borderRadius:
BorderRadius.all(Radius.circular(4.0))),
child: TextField(
maxLines: 4,
maxLength: 100,
textInputAction: TextInputAction.done,
controller: _decController,
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10),
hintText: '请填写您对车辆的要求',
border: OutlineInputBorder(
borderSide: BorderSide.none),
hintStyle: MdStyles.textGray12)),
),
),
Container(
padding: EdgeInsets.all(20),
child: GestureDetector(
onTap: () {
// _submit();
Navigator.pop(context);
},
child: Container(
width: double.infinity,
height: 30.0,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color(0XFF2B95E9),
borderRadius:
BorderRadius.all(Radius.circular(4.0)),
// gradient: LinearGradient(colors: [
// Color(0xFFFF7F16),
// Color(0xFFEF3500)
// ])
),
child: Text(
'提交',
style: TextStyle(
color: Colors.white, fontSize: 14.0),
),
),
),
),
],
),
),
)
],
)),
),
);
}
}
2）引用(交互就不细说了，想了解的可以加群问)
Navigator.push(context, PopRoute(child: ProvideWidget()));
网友评论