Adding listview inside the middle of my layout flutter

Question

I'd like to display my listview in between other items in the page. My basic flow is like so right now:

AppBar Body:
-Image
-Title
-IntroText
-NEED LIST VIEW HERE

Here is my Widget and Layout following:

ListView _buildSectionList(List<Sections> sections, context) {
  print(sections.length);
  return ListView.builder(
    itemCount: sections.length,
    itemBuilder: (BuildContext context, int index) {
      return new Column(
        children: <Widget>[
          new ListTile(
            leading: Text(index.toString()),
            title: new Text(
              (sections[index].content),
              style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.white),
            ),
          ),
          new Divider(
            height: 12.0,
            color: Colors.white,
          ),
        ],
      );
    },
  );
}

If I insert just that _buildSectionList into the body: it will display data just fine.

However, when I add it to my Layout below, I get errors (below layout):

children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(top: 0.0, bottom: 15.0),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            title.toUpperCase(),
                            style: TextStyle(
                                fontSize: 24,
                                fontWeight: FontWeight.bold,
                                color: Colors.black54),
                            textAlign: TextAlign.left,
                          ),
                        ),
                      ),
                      Text(landingpagecontent, style: TextStyle(fontSize: 18)),
                      _buildSectionList(sections,context),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        textDirection: TextDirection.rtl,
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(top: 15, bottom: 15),
                            child: InkWell(
                                child: Text("Learn More >",
                                    style: TextStyle(fontSize: 18)),
                                onTap: () async {
                                  var url = weblink;
                                  if (await canLaunch(url)) {
                                    await launch(url, forceWebView: false);
                                  } else {
                                    throw 'Could not launch $url';
                                  }
                                }),
                          ),
                        ],
                      ),
                    ],

I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderFlex#4d43f relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderConstrainedBox#18160 relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderPadding#4486e relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: _RenderSingleChildViewport#b4572 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#87d08 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#8fa89 relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#b9ffd relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#f3831 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#fe472 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#6b201 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#da0f9 relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#68715 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#b7790 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderDecoratedBox#eb17f relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (29498): Another exception was thrown: RenderBox was not laid out: RenderDecoratedBox#eb17f relayoutBoundary=up1

I've tried the Expanded() widget with no results there either. Any ideas? Thanks!

duongdt3 duongdt3 · Accepted Answer · 2019-12-19T01:48:41

You can take a try with it:

Demo:

Code:

Widget buildBody(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          color: Colors.pink,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text("Image"),
              ),
            ],
          ),
        ),
        Container(
          color: Colors.orangeAccent,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text("Text"),
              ),
            ],
          ),
        ),
        Expanded(
          child: _buildListView(),
        ),
        Container(
          color: Colors.cyanAccent,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text("Bottom 1"),
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text("Bottom 2"),
              ),
            ],
          ),
        )
      ],
    );
  }

  Widget _buildListView() {
    return ListView.separated(
      itemCount: 1000,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(16.0),
          child: Center(child: Text("Item ${index + 1}")),
        );
      },
      separatorBuilder: (context, index) {
        return Divider(
          height: 1,
        );
      },
    );
  }

Adding listview inside the middle of my layout flutter

1 Answers