【发布时间】：2021-09-05 23:06:34
【问题描述】：
我的小部件树中有SingleChildScrollView，但我仍然收到BOTTOM OVERFLOW BY 49 PIXELS 错误。我不确定我到底错过了什么。
添加我得到的确切错误消息：它指向包裹在 AutofillGroup 小部件中的列。
======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 49 pixels on the bottom.
The relevant error-causing widget was:
Column file:///Users/sas/Projects/Development/App/Flutter/gesapp/lib/screens/sign_up.dart:105:28
: To inspect this widget in Flutter DevTools, visit: http://127.0.0.1:9100/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A64471%2FcGfO70O7M18%3D%2F&inspectorRef=inspector-31
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.
The specific RenderFlex in question is: RenderFlex#a387c relayoutBoundary=up13 OVERFLOWING
... needs compositing
... parentData: offset=Offset(0.0, 0.0) (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=679.3)
... size: Size(392.7, 679.3)
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
====================================================================================================
下面列出的是导致错误的代码。
class SignUp extends StatefulWidget {
static const routeName = '/sign-up';
@override
_SignUpState createState() => _SignUpState();
}
class _SignUpState extends State<SignUp> {
final formKey = GlobalKey<FormState>();
final TextEditingController nameController = TextEditingController();
final TextEditingController emailController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
final nameNode = FocusNode();
final emailNode = FocusNode();
final passwordNode = FocusNode();
bool isLoading = false;
@override
void dispose() {
nameController.dispose();
emailController.dispose();
passwordController.dispose();
nameNode.dispose();
emailNode.dispose();
passwordNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final appBar = AppBar(
iconTheme: Theme.of(context).iconTheme,
backgroundColor: Colors.transparent,
leading: CustomBackButton(
onPressed: () => print('Back Button Tapped'),
),
);
// ***** Start of checking for current Theme Mode *****
var brightness = Theme.of(context).brightness;
bool darkModeOn;
if (brightness == Brightness.dark) {
darkModeOn = true;
} else {
darkModeOn = false;
}
// ***** End of checking for current Theme Mode *****
return KeyboardDismisser(
gestures: [
GestureType.onTap,
GestureType.onVerticalDragDown,
],
child: Scaffold(
resizeToAvoidBottomInset: false,
appBar: isLoading ? null : appBar,
body: isLoading
? Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SpinKitDoubleBounce(
color: kBrandColor,
size: Device.width! * 0.15,
),
SizedBox(height: Device.height! * 0.025),
Text(
'Loading...',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
],
),
),
)
: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Form(
key: formKey,
child: Container(
alignment: Alignment.center,
height: Device.height,
child: AutofillGroup(
child: Column(
children: [
Spacer(),
Container(
width: Device.width! * 0.9,
child: Text(
"Create Account",
style: GoogleFonts.roboto(
textStyle: Theme.of(context).textTheme.headline4,
fontSize: 28,
fontWeight: FontWeight.w500,
),
),
),
SizedBox(height: Device.height! * 0.05),
TextInputField(
width: Device.width! * 0.90,
controller: nameController,
title: "Name",
icon: Icons.person_outline,
currentNodeName: nameNode,
nextNodeName: emailNode,
),
SizedBox(height: Device.height! * 0.03),
EmailInputField(
controller: emailController,
currentNodeName: emailNode,
nextNodeName: passwordNode,
width: Device.width! * 0.9,
),
SizedBox(height: Device.height! * 0.03),
Container(
width: Device.width! * 0.9,
child: PasswordInputField(
controller: passwordController,
inputAction: TextInputAction.done,
currentNodeName: passwordNode,
width: Device.width! * 0.9,
),
),
SizedBox(height: Device.height! * 0.03),
CustomIconButton(
title: 'Sign up with Email',
buttonHeight: Device.height! * 0.07,
buttonWidth: Device.width! * 0.9,
buttonBackgroundColor: kBrandColor,
iconName: Icons.mail_outline,
iconColor: Colors.black,
textColor: kDarkThemePrimaryColor,
onPressed: signUp,
),
SizedBox(height: Device.height! * 0.025),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Already have an account? ",
style: TextStyle(
color: Theme.of(context).textTheme.bodyText1?.color?.withOpacity(0.75),
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
GestureDetector(
onTap: () {
print("Sign In Button Tapped");
Navigator.of(context).pushReplacement(FadeAnimationPageRoute(SignIn()));
},
child: Text(
"Sign In",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
],
),
SizedBox(height: Device.height! * 0.05),
Padding(
padding: EdgeInsets.symmetric(horizontal: Device.width! * 0.06),
child: Row(
children: <Widget>[
Expanded(
child: Consumer<ThemeProvider>(
builder: (context, currentTheme, child) => Container(
child: Divider(
height: 0.0,
thickness: 1.0,
color: currentTheme.isDarkMode ? Colors.white : Colors.black,
),
),
),
),
SizedBox(width: Device.width! * 0.05),
Text(
'OR',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w500,
),
),
SizedBox(width: Device.width! * 0.05),
Expanded(
child: Container(
child: Divider(
height: 0.0,
thickness: 1.0,
color: darkModeOn ? Colors.white : Colors.black,
),
),
),
],
),
),
SizedBox(height: Device.height! * 0.05),
darkModeOn
? CustomImageButton(
title: "Sign up with Google",
buttonHeight: Device.height! * 0.07,
buttonWidth: Device.width! * 0.9,
buttonBackgroundColor: Color(0xFF4285F4),
imageName: 'assets/images/google_logo.png',
imageBackgroundColor: Color(0xFFFFFFFF),
textColor: Color(0xFFFFFFFF),
onPressed: () => print("Google Sign Up Dark Mode Button Pressed"),
)
: CustomImageButton(
title: "Sign up with Google",
buttonHeight: Device.height! * 0.07,
buttonWidth: Device.width! * 0.9,
buttonBackgroundColor: Colors.white,
imageName: 'assets/images/google_logo.png',
imageBackgroundColor: Colors.transparent,
textColor: Color(0xFF000000),
onPressed: () => print("Google Sign Up Light Mode Button Pressed"),
),
SizedBox(height: Device.height! * 0.03),
darkModeOn
? CustomImageButton(
title: "Sign up with Apple",
buttonHeight: Device.height! * 0.07,
buttonWidth: Device.width! * 0.9,
buttonBackgroundColor: Colors.white,
imageName: 'assets/images/apple_logo_black.png',
imageBackgroundColor: Colors.transparent,
textColor: Colors.black,
onPressed: () => print("Apple Sign Up Dark Mode Button Pressed"),
)
: CustomImageButton(
title: "Sign up with Apple",
buttonHeight: Device.height! * 0.07,
buttonWidth: Device.width! * 0.9,
buttonBackgroundColor: Colors.black,
imageName: 'assets/images/apple_logo_white.png',
imageBackgroundColor: Colors.transparent,
textColor: Colors.white,
onPressed: () => print("Apple Sign Up Light Mode Button Pressed"),
),
SizedBox(height: Device.height! * 0.02),
Spacer(),
Container(
padding: EdgeInsets.only(bottom: Device.height! * 0.03),
width: Device.width! * 0.9,
child: Column(
children: [
Text(
'By using our app you agree to it\'s',
textAlign: TextAlign.center,
style: TextStyle(
color: Theme.of(context).textTheme.bodyText1?.color?.withOpacity(0.75),
fontSize: 14,
fontWeight: FontWeight.w400,
),
),
SizedBox(height: Device.height! * 0.0075),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
print("Terms of Use Button Tapped");
Navigator.of(context).push(FadeAnimationPageRoute(
UserPreferences(),
animationDuration: 1000,
animationCurve: Curves.fastOutSlowIn,
));
},
child: Text(
'Terms of Use',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
),
SizedBox(width: Device.width! * 0.01),
Text(
'and',
textAlign: TextAlign.center,
style: TextStyle(
color: Theme.of(context).textTheme.bodyText1?.color?.withOpacity(0.75),
fontSize: 14,
fontWeight: FontWeight.w400,
),
),
SizedBox(width: Device.width! * 0.01),
GestureDetector(
onTap: () {
print("Privacy Policy Button Tapped");
},
child: Text(
'Privacy Policy',
textAlign: TextAlign.center,
style: TextStyle(
// color: Colors.black54,
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
),
],
),
],
),
),
],
),
),
),
),
),
),
);
}
void signUp() {
final form = formKey.currentState!;
if (form.validate()) {
TextInput.finishAutofillContext();
final name = nameController.text.trim();
final email = emailController.text.trim();
final password = passwordController.text.trim();
print("Name: $name");
print("Email Address: $email");
print("Password: $password");
}
}
}
非常感谢您提前提供的帮助。
【问题讨论】：
标签： flutter dart flutter-layout flutter-web