15

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)
Goku
  • 9,102
  • 8
  • 50
  • 81
  • post some other stack frames (not only the top one): for example 5-8 top stack frames of your exception – pskink Dec 20 '19 at 05:29
  • @pskink please check updated question – Goku Dec 20 '19 at 05:32
  • you have a `Stack` with only one child: `Column` - this column has also one child: another `Column` - so my question is what do you need that `Stack` and first `Column` for? – pskink Dec 20 '19 at 05:36
  • @pskink i want add one image as background instead of white color that's why i have used stack – Goku Dec 20 '19 at 05:41
  • use `Container` with `decoration: BoxDecoration(...)` then (and remove the first `Column` too) – pskink Dec 20 '19 at 05:42
  • @pskink thank you so much for the help it working fine now for me, you post an answer i will accept it – Goku Dec 20 '19 at 06:00
  • Expanded and spacer Widget is causing this error. Consider removing Expanded widget ant then try. I hope it helped. – Rishi Malgwa Aug 06 '20 at 16:14

6 Answers6

4

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!

Ashwin Balani
  • 745
  • 7
  • 19
2

You can use ListView instead of SingleChildScrollView so no need for the column at first of the code.

@override
Widget build(BuildContext context) {

return Scaffold(
  body: SafeArea(
    child:  ListView(
            shrinkWrap: true,
            children: <Widget>[
              Form(...),
              ],
              ),),
              );
Omar Fayad
  • 1,733
  • 3
  • 11
  • 27
2

add shrinkWrap: true in your listview or gridview

Dada
  • 6,313
  • 7
  • 24
  • 43
Nikhil Kadam
  • 109
  • 4
1

Screenshot Screenshot

I don't understand why you use stack .Without stack it works fine.

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      body: SafeArea(
        child:  SingleChildScrollView(

          child: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],
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            )),
                      )
                ],
              ) ,
        ),
      )
    );
  }
Poran
  • 532
  • 4
  • 9
0

It's very easy, you just have to remove SingleChildScrollView. After That add one property to the Scaffold, that is

resizeToAvoidBottomInset: true

It might be working for you.

Example:

return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SafeArea(child: Container())
    );
kunj kanani
  • 324
  • 4
  • 5
0

One important point. Performing hot reload - r won't show it correctly if your changes solved the issue or not. It always happens with this render box not laid situation. In order to see if your changes solved the issue you should Perform hot restart - R.

Elmar
  • 2,235
  • 24
  • 22