1、文本
Text(
'社区周边',
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(22),
decoration: TextDecoration.none),
),
2、图片
Image.asset(
'images/sq_huodon_icon.png',
width: ScreenUtil().setWidth(44),
height: ScreenUtil().setWidth(44),
),
3.圆角背景
Container(
width: ScreenUtil().setWidth(622),
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(32),
right: ScreenUtil().setWidth(32),
top: ScreenUtil().setWidth(32)),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(12.0)),
),
),
4.、自定义弹窗
showDialog<Null>(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return SimpleDialog(
// 手势处理事件
backgroundColor: Colors.transparent,
children: <Widget>[
Material(
type: MaterialType.transparency,
child: Center(
child: Container(
width: ScreenUtil().setWidth(622),
margin: EdgeInsets.only(
left: ScreenUtil().setWidth(32),
right: ScreenUtil().setWidth(32),
top: ScreenUtil().setWidth(32)),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(12.0)),
),
),
),
),
],
);
},
);
5、有颜色背景圆角文字
Container(
margin: EdgeInsets.only(left: 7),
padding: EdgeInsets.only(
left: ScreenUtil().setHeight(5),
right: ScreenUtil().setHeight(5),
bottom: ScreenUtil().setHeight(1)),
height: ScreenUtil().setHeight(26),
decoration: BoxDecoration(
border:
new Border.all(width: 1, color: Color(0xFF0091FF)),
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(3.0)),
),
child: Center(
child: Text(
'社区',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color.fromRGBO(5, 169, 245, 1.0),
fontSize: ScreenUtil().setSp(18),
),
textAlign: TextAlign.center,
),
),
),
6、圆滑按钮控件
RaisedButton(
child: new Text(
"卡"),
color: Colors.white,
textColor: Color.fromRGBO(29, 168, 239, 1.0),
onPressed: () {
Navigator.of(context).pop(); //退出弹出框
getGsiX(usersList.data.id,
usersList.data.typeSignCount[0].typeId);
},
disabledColor: Colors.grey,
disabledTextColor: Colors.white,
disabledElevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(
color: Color.fromRGBO(
196, 236, 255, 1.0))), //圆角大小
)
6、渐变背景
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFFfbab66), Color(0xFFf7418c)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
)),
);
7.毛玻璃背景弹窗
import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:flutter_screenutil/screenutil.dart'; showBuyModalBottomSheet({@required BuildContext context}) { showModalBottomSheet( barrierColor: Colors.white.withOpacity(0.1), backgroundColor: Colors.transparent, context: context, builder: (BuildContext context) { return Container( color: Colors.transparent, child: GestureDetector( child: BottomModal( //弹窗样式 onCancel: () { //取消回调 Navigator.of(context).pop(); //隐藏弹出框 }, onSure: () async { //确认回调 }, ), ), ); }); } class BottomModal extends StatefulWidget { final Function onSure; final Function onCancel; const BottomModal({Key key, this.onSure, this.onCancel}) : super(key: key); @override State createState() { return _BottomModalState(onSure: this.onSure, onCancel: this.onCancel); } } class _BottomModalState extends State { final Function onSure; final Function onCancel; _BottomModalState({this.onSure, this.onCancel}); @override Widget build(BuildContext context) { return Container( child: Stack( children: <Widget>[ BackdropFilter( filter: ImageFilter.blur(sigmaX: 18, sigmaY: 18), child: Container( color: Colors.transparent, height: double.infinity, child: Text( '我的申请', style: TextStyle( color: Colors.white, fontSize: ScreenUtil().setSp(28), ), textAlign: TextAlign.center, ), ), ), ] ), ); } }