嗨,我正在使用Flutter创建登录屏幕,当我在TextField小部件上点击时,Render Flex溢出了。
我添加了SingleChildScrollView小部件,但仍显示相同的警告。我也在使用screen_util插件来标准化任何设备的大小
这是我的auth_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../widgets/ui_elements/color_contants.dart';
import '../widgets/main_widget_elements/login_card.dart';
class NewAuthScreen extends StatefulWidget {
@override
_NewAuthScreenState createState() => _NewAuthScreenState();
}
class _NewAuthScreenState extends State<NewAuthScreen> {
bool _isSelected = false;
void _radio() {
setState(() {
_isSelected = !_isSelected;
});
}
Widget radioButton(bool isSelected) => Container(
width: 16.0,
height: 16.0,
padding: EdgeInsets.all(2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(width: 2.0, color: Colors.black),
),
child: isSelected
? Container(
width: double.infinity,
height: double.infinity,
decoration:
BoxDecoration(shape: BoxShape.circle, color: Colors.black),
)
: Container(),
);
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
ScreenUtil.instance =
ScreenUtil(width: 780, height: 1200, allowFontScaling: true);
return Scaffold(
backgroundColor: Color.fromRGBO(255, 250, 250, 2.0),
resizeToAvoidBottomPadding: true,
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10.0),
child: Image.asset("assets/image_01.png"),
),
Expanded(
child: Container(),
),
Image.asset("assets/image_02.png")
],
),
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: EdgeInsets.only(left: 28.0, right: 28.0, top: 50.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
// Image.asset(
// 'assets/logo.png',
// width: ScreenUtil.getInstance().setWidth(110),
// height: ScreenUtil.getInstance().setHeight(110),
// ),
Text(
'PINKBOOK',
style: TextStyle(
fontFamily: 'PoppinsBold',
fontSize: ScreenUtil.getInstance().setSp(46),
letterSpacing: .6,
fontWeight: FontWeight.bold),
)
],
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(190),
),
FormCard(),
SizedBox(
height: ScreenUtil.getInstance().setHeight(20),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
SizedBox(
width: 12.0,
),
GestureDetector(
onTap: _radio,
child: radioButton(_isSelected),
),
SizedBox(
width: 8.0,
),
Text(
'Remember Me',
style: TextStyle(
fontSize: 12, fontFamily: 'PoppinsMedium'),
)
],
),
InkWell(
child: Container(
width: ScreenUtil.getInstance().setWidth(330),
height: ScreenUtil.getInstance().setHeight(100),
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Color(0xFF17ead9),
Color(0xFF6078ea)
]),
borderRadius: BorderRadius.circular(6.0),
boxShadow: [
BoxShadow(
color: Color(0xFF6078ea).withOpacity(0.3),
offset: Offset(0.0, 8.0),
blurRadius: 8.0)
]),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Center(
child: Text(
'Sign-In',
style: TextStyle(
color: Colors.white,
fontFamily: 'PoppinsBold',
fontSize: 18,
letterSpacing: 1.0),
),
),
),
),
),
)
],
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(30),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'New User?',
style: TextStyle(
fontFamily: 'PoppinsMedium'
),
),
InkWell(
onTap: () {},
child: Text(
'Signup',
style: TextStyle(color: Color(0xFF5d74e3),
fontFamily: 'PoppinsBold'),
),
)
],
)
],
),
),
)
],
),
);
}
}
这是我的login_card.dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class FormCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: ScreenUtil.getInstance().setHeight(490),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, -1.0),
blurRadius: 10.0)
]),
child: Padding(
padding: EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Login',
style: TextStyle(
fontSize: 24.0,
fontFamily: 'PoppinsBold',
letterSpacing: .6),
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(20),
),
Text(
'Username',
style: TextStyle(
fontFamily: 'PoppinsMedium',
fontSize: 15.0),
),
TextField(
decoration: InputDecoration(
hintText: 'username',
hintStyle: TextStyle(fontSize: 12.0, color: Colors.grey)),
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(20),
),
Text(
'Password',
style: TextStyle(
fontFamily: 'PoppinsMedium',
fontSize: ScreenUtil.getInstance().setSp(26)),
),
TextField(
obscureText: true,
decoration: InputDecoration(
hintText: 'password',
hintStyle: TextStyle(fontSize: 12.0, color: Colors.grey)),
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(35),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
'Forgot Password?',
style: TextStyle(
color: Colors.blue,
fontFamily: 'PoppinsMedium',
fontSize: ScreenUtil.getInstance().setSp(28),
),
)
],
)
],
),
),
);
}
}