Error:RenderBox was not laid out: NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Viewed 24617

i am having problem using SingleChildScrollView in this way, i dont no what is wrong, i keep getting this error.

If add the SingleChildScrollView the page will be blank(will not show all the widget)but if i remove the SingleChildScrollView, the page will show.

RenderBox was not laid out: RenderPadding#583c0 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1929 pos 12: 'hasSize

The relevant error-causing widget was Scaffold Scaffold:file:///Users/mac/Documents/Uneleap-Platform-master/lib/screens/Pages/forum/forum.dart:25:12

here is the code

SafeArea(
                minimum: EdgeInsets.only(left: 25.0, right: 20.0, top: 10.0),
                child: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      WidgetForum(
                        details: 'The Get Is Not Geting together ?',
                        name: 'Nina Simon',
                        url: 'assets/dashboard_pic.png',
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      WidgetForum(
                        details:
                            '''Notes is designed for whatever’s on your mind.\nJot down your thoughts. Download Notes.\nThere is something wonderful in writing. \nThe Get Is Not Getting Together?''',
                        name: 'James Nugar',
                        url: 'assets/dashboard_pic.png',
                      ),
                      Text(
                        'Topics',
                        style: TextStyle(
                          fontSize: 35,
                        ),
                      ),
                      Expanded(
                        child: ListView.separated(
                            scrollDirection: Axis.horizontal,
                            separatorBuilder: (_, inedex) => SizedBox(
                                  width: 20,
                                ),
                            itemCount: topics.length,
                            itemBuilder: (context, index) {
                              return Container(
                                height: 50,
                                width: 100,
                                decoration: BoxDecoration(
                                  color: Colors.red,
                                  borderRadius: BorderRadius.circular(15),
                                  image: DecorationImage(
                                    image: AssetImage('assets/saved_2.png'),
                                    fit: BoxFit.fill,
                                  ),
                                ),
                                child: Column(
                                  children: [
                                    Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: Align(
                                        alignment: Alignment.bottomLeft,
                                        child: Text(
                                          topics[index].schoolNmae!,
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontWeight: FontWeight.bold),
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              );
                            }),
                      ),
                      WidgetForum(
                        details:
                            '''Notes is designed for whatever’s on your mind.\nJot down your thoughts. Download Notes.\nThere is something wonderful in writing. \nThe Get Is Not Getting Together?''',
                        name: 'Sam Ajayi',
                        url: 'assets/dashboard_pic.png',
                      ),
                    ],
                  ),
                ),
              ),
              // bottomSheet:
              floatingActionButton: FloatingActionButton(
                onPressed: () {
                  Scaffold.of(context).showBottomSheet<void>((BuildContext context) {
                    return Container(
                      height: 250,
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10),
                        ),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                          vertical: 50,
                          horizontal: 15.0,
                        ),
                        child: Column(
                          children: [
                            Row(
                              children: [
                                Icon(
                                  CustomIcons.answers_forum,
                                  color: Colors.grey,
                                ),
                                SizedBox(
                                  width: 10,
                                ),
                                Text(
                                  'Post',
                                  style: TextStyle(
                                    fontSize: 25,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white,
                                  ),
                                )
                              ],
                            ),
                            Padding(
                              padding: const EdgeInsets.only(right: 120.0),
                              child: Divider(
                                thickness: 2,
                                color: Colors.white,
                              ),
                            ),
                            Row(
                              children: [
                                Icon(
                                  CustomIcons.create_forum,
                                  color: Colors.grey,
                                ),
                                SizedBox(
                                  width: 10,
                                ),
                                Text(
                                  'Create Forum',
                                  style: TextStyle(
                                    fontSize: 25,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white,
                                  ),
                                )
                              ],
                            ),
                            Align(
                              alignment: Alignment.bottomRight,
                              child: GestureDetector(
                                onTap: () {
                                  Navigator.pop(context);
                                },
                                child: Container(
                                  height: 70,
                                  width: 70,
                                  decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: Colors.white,
                                  ),
                                  child: Center(
                                    child: Icon(Icons.add),
                                  ),
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    );
                  });
                },
                child: Icon(Icons.add),
              ),
            );
          }
        }
        
        class WidgetForum extends StatefulWidget {
          final String? name;
          final String? details;
          final String? url;
        
          WidgetForum(
              {Key? key, required this.name, required this.details, required this.url})
              : super(key: key);
        
          @override
          _WidgetForumState createState() => _WidgetForumState();
        }
        
        class _WidgetForumState extends State<WidgetForum> {
          @override
          Widget build(BuildContext context) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Container(
                          height: 50,
                          width: 50,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: AssetImage(widget.url!),
                              fit: BoxFit.fill,
                            ),
                          ),
                        ),
                        SizedBox(
                          width: 5,
                        ),
                        Text(
                          widget.name!,
                          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
                        )
                      ],
                    ),
                    PopupMenuButton(
                      color: Colors.black,
                      offset: Offset(0, 40),
                      itemBuilder: (_) => <PopupMenuItem<String>>[
                        new PopupMenuItem<String>(
                          child: Center(
                            child: Text(
                              'Fellow',
                              style: TextStyle(
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                        new PopupMenuItem<String>(
                          child: Center(
                            child: Text(
                              'Block',
                              style: TextStyle(
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                        new PopupMenuItem<String>(
                          child: Center(
                            child: Text(
                              'Report',
                              style: TextStyle(
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ],
                      child: Container(
                        height: 20,
                        width: 20,
                        child: SvgPicture.asset('assets/library_pre.svg'),
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 18),
                Text(
                  widget.details!,
                  style: TextStyle(fontSize: 15),
                ),
                SizedBox(height: 18),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Icon(
                          CustomIcons.icons8_up_2_11,
                          color: Colors.red,
                        ),
                        Text('36'),
                        Icon(
                          CustomIcons.icons8_down,
                          color: Colors.grey,
                        ),
                        Icon(
                          CustomIcons.answers_forum,
                          color: Colors.grey,
                        ),
                        Text('3')
                      ],
                    ),
                    Text('Sep 2, 2020')
                  ],
                ),
                Divider(
                  thickness: 1,
                )
              ],
            );
          }
        }
3 Answers

You cannot use Expanded in Column if it has a parent SingleChildScrollView because When you use column it tries to be in screen height and when use expanded inside, The column will allocate remaining space to the child of the expanded widget, Now if you use SingleChildScrollView It will try to expand(by direction, vertically in your case) as long as possible but as you're using the Expanded which tries to take remaining space, So it goes infinite thus throws that error,

So Either remove SingleChildScrollView and use Column and expanded or remove the Expanded and Use SingleChildScrollView also make sure ShrinkWrap in ListView to true.

Column(
      children: [
        Text(
          'Hello, World!',
          style: Theme.of(context).textTheme.headline4,
        ),
        Container(
          height: 50,
          width: 200,
          color: Colors.amber,
          child: const Text('Random widget'),
        ),
        Expanded(
          child: ListView.separated(
            shrinkWrap: true,
            itemCount: 20,
            separatorBuilder: (_, __) => const Divider(),
            itemBuilder: (context, int index) {
              return ListTile(
                title: Text('Item at $index'),
              );
            },
          ),
        )
      ],
    );

Or to Scroll all the widgets You can do using SingleChildScrollView

Remove the Expanded widget here.

SingleChildScrollView(
      child: Column(
        children: [
          Text(
            'Hello, World!',
            style: Theme.of(context).textTheme.headline4,
          ),
          Container(
            height: 50,
            width: 200,
            color: Colors.amber,
            child: const Text('Random widget'),
          ),
          ListView.separated(
              shrinkWrap: true,
              itemCount: 20,
              separatorBuilder: (_, __) => const Divider(),
              itemBuilder: (context, int index) {
                return ListTile(
                  title: Text('Item at $index'),
                );
              },
            ),
        ],
      ),
    );

Wrap it in a Container and add a height to it. Fixed it for me.

I solved the issue by enclosing the Column widget in a Container widget that has a set width and height

Related