Flutter : RenderBox was not laid out: RenderRepaintBoundary#58c65 relayoutBoundary=up1 NEEDS-PAINT

Goku picture Goku · Dec 20, 2019 · Viewed 32.3k times · Source

I'm using SingleChildScrollView to make my screen scrollbale but when i add SingleChildScrollView i'm getting below error

RenderBox was not laid out: RenderRepaintBoundary#58c65 relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize

My Code

   class _RegisterPage extends State<RegisterApp> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme:
          ThemeData(primarySwatch: Colors.blue, brightness: Brightness.light),
      darkTheme: ThemeData(brightness: Brightness.dark),
      home: SafeArea(
          child: Scaffold(
        backgroundColor: Colors.white,
        body: SingleChildScrollView(
          child: Stack(
            fit: StackFit.expand,
            children: <Widget>[
              Column(
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Form(
                        key: _formKey,
                        child: new Theme(
                            data: ThemeData(
                                accentColor: Colors.purple,
                                primaryColor: Colors.blue,
                                inputDecorationTheme: new InputDecorationTheme(
                                    labelStyle: new TextStyle(
                                  color: Colors.lightBlue,
                                  fontSize: 20.0,
                                ))),
                            child: Padding(
                              padding: const EdgeInsets.all(20.0),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    "Register",
                                    style: TextStyle(
                                        fontSize: 30.0,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 20.0),
                                    child: Text(
                                      "Full Name",
                                      style: TextStyle(
                                        fontSize: 20.0,
                                      ),
                                    ),
                                  ),
                                  TextFormField(
                                    style: TextStyle(color: Colors.grey),
                                    decoration: new InputDecoration(
                                        labelStyle: TextStyle(
                                          color: Colors.grey,
                                        ),
                                        enabledBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.grey),
                                        ),
                                        focusedBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.blue),
                                        ),
                                        border: UnderlineInputBorder()),
                                    keyboardType: TextInputType.emailAddress,
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 20.0),
                                    child: Text(
                                      "Address",
                                      style: TextStyle(
                                        fontSize: 20.0,
                                      ),
                                    ),
                                  ),
                                  TextFormField(
                                    style: TextStyle(color: Colors.grey),
                                    decoration: new InputDecoration(
                                        labelStyle: TextStyle(
                                          color: Colors.grey,
                                        ),
                                        enabledBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.grey),
                                        ),
                                        focusedBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.blue),
                                        ),
                                        border: UnderlineInputBorder()),
                                    keyboardType: TextInputType.emailAddress,
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 20.0),
                                    child: Text(
                                      "Phone Number",
                                      style: TextStyle(
                                        fontSize: 20.0,
                                      ),
                                    ),
                                  ),
                                  TextFormField(
                                    style: TextStyle(color: Colors.grey),
                                    decoration: new InputDecoration(
                                        labelStyle: TextStyle(
                                          color: Colors.grey,
                                        ),
                                        enabledBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.grey),
                                        ),
                                        focusedBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.blue),
                                        ),
                                        border: UnderlineInputBorder()),
                                    keyboardType: TextInputType.emailAddress,
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 20.0),
                                    child: Text(
                                      "Company Name",
                                      style: TextStyle(
                                        fontSize: 20.0,
                                      ),
                                    ),
                                  ),
                                  TextFormField(
                                    style: TextStyle(color: Colors.grey),
                                    decoration: new InputDecoration(
                                        labelStyle: TextStyle(
                                          color: Colors.grey,
                                        ),
                                        enabledBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.grey),
                                        ),
                                        focusedBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.blue),
                                        ),
                                        border: UnderlineInputBorder()),
                                    keyboardType: TextInputType.emailAddress,
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 20.0),
                                    child: Text(
                                      "Email Address",
                                      style: TextStyle(
                                        fontSize: 20.0,
                                      ),
                                    ),
                                  ),
                                  TextFormField(
                                    style: TextStyle(color: Colors.grey),
                                    decoration: new InputDecoration(
                                        labelStyle: TextStyle(
                                          color: Colors.grey,
                                        ),
                                        enabledBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.grey),
                                        ),
                                        focusedBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.blue),
                                        ),
                                        border: UnderlineInputBorder()),
                                    keyboardType: TextInputType.emailAddress,
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(top: 20.0),
                                    child: Text(
                                      "Password",
                                      style: TextStyle(
                                        fontSize: 20.0,
                                      ),
                                    ),
                                  ),
                                  TextFormField(
                                    style: TextStyle(color: Colors.grey),
                                    decoration: new InputDecoration(
                                        labelStyle: TextStyle(
                                          color: Colors.grey,
                                        ),
                                        enabledBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.grey),
                                        ),
                                        focusedBorder: UnderlineInputBorder(
                                          borderSide:
                                              BorderSide(color: Colors.blue),
                                        ),
                                        border: UnderlineInputBorder()),
                                    keyboardType: TextInputType.emailAddress,
                                  ),
                                  Align(
                                    alignment: Alignment.center,
                                    child: Container(
                                      margin: const EdgeInsets.only(top: 40.0),
                                      child: new MaterialButton(
                                        textColor: Colors.white,
                                        minWidth: 250.0,
                                        padding: const EdgeInsets.all(15.0),
                                        color: Colors.blue[400],
                                        child: new Text(
                                          "Register",
                                          style: TextStyle(
                                              color: Colors.white,
//                                    fontWeight: FontWeight.bold,
                                              fontSize: 20.0),
                                        ),
                                        shape: RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(50.0)),
                                        onPressed: () {
                                          if (_formKey.currentState
                                              .validate()) {}
                                        },
                                        splashColor: Colors.redAccent[100],
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            )),
                      )
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      )),
    );
  }
}

if i remove SingleChildScrollView from layout then I'm getting below output when opening keyboard

enter image description here

I need to make my screen scroll-able

I have already checked below Stack-overflow links

If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

Whole Exception log

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.

These invalid constraints were provided to RenderFlex's layout() function by the following function, which probably computed the invalid constraints in question:
  RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
The offending constraints were: BoxConstraints(w=392.7, h=Infinity)
User-created ancestor of the error-causing widget was: 
  SingleChildScrollView file:///home/ctpl119/Documents/NEW_PROJECT/oricon/oricon/lib/register.dart:23:15
When the exception was thrown, this was the stack: 
#0      BoxConstraints.debugAssertIsValid.<anonymous closure>.throwError (package:flutter/src/rendering/box.dart:501:9)
#1      BoxConstraints.debugAssertIsValid.<anonymous closure> (package:flutter/src/rendering/box.dart:548:21)
#2      BoxConstraints.debugAssertIsValid (package:flutter/src/rendering/box.dart:552:6)
#3      RenderObject.layout (package:flutter/src/rendering/object.dart:1618:24)
#4      RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)

Answer

Ashwin Balani picture Ashwin Balani · Apr 21, 2020

I was facing a similar issue

Found out that the Spacer() widget was creating the UI render issue

This is not a solution to this question, but it might help someone

Thank you!