1

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");
    }
  }
}

非常感谢您提前提供的帮助。

4

2 回答 2

-1

SingleChildScrollView很好,但是您的小Column部件溢出了容器height,请尝试删除Container上面Column的内容或更改它height

于 2021-06-22T14:14:19.493 回答
-1

SingleChildScrollView我认为解决方案是用具有首选尺寸的包装Container,例如:

Container(width: 400, height: 400, child: SingleChildScrollView(//your code))
于 2021-06-22T11:49:11.873 回答