Question 353212 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Vertical viewport error. Can't fix with even Shrink Wrap or Expanded

This is my code

 ListView.builder(
          itemCount: customerList.length,
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              child: Expanded(
                child: ListTile(
                  title: Text(customerList[index].customerName),
                  subtitle: Column(
                    children: [
                      Text(customerList[index].customerID),
                      Text(customerList[index].customerAddress),
                    ],
                  ),
                ),
              ),
            );
          }),

I have Used Shrink Wrap and Scroll direction and I have tried Getting Rid of the expanded widget but i am still getting this error

here is debug console

The following assertion was thrown during performLayout():
Vertical viewport was given unbounded width.
Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a vertical shrinkwrapping viewport was given an unlimited amount of horizontal space in which to expand.


RenderBox was not laid out: RenderShrinkWrappingViewport#90e43 relayoutBoundary=up23 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1972 pos 12: 'hasSize'
Tags:

2

Answers


  1. 0

    First, Expanded Widget has a wrong parent.

    Expanded widget can be a child of only Column, Row or Flex.

    Second, You can’t expand within a ListView.

    in simple words:

    ListView offers infinity of space while Expanded allocates all of the available space, So they are working in opposite goals.

    I think your goal is to make sure the ListTile fills the entire Container, if so.

    by default it will fill the container, but you need to set intrinsic dimensions at least a height for the Container, as you know how the container works.

    Container fills the available space also, which must be prevented as long as it exists within a ListView

    So, to fix your code:

    • Remove Expanded Widget.
    • Set an Intrinsic height for the Container which wraps the
      ListTile, or remove it.

    Hope it helps you.

    Login or Signup to reply.
  2. 0

    Remove Container and Expanded Widget your code is working well.

    ListView.builder(
        itemCount: customerList.length,
        shrinkWrap: true,
        scrollDirection: Axis.vertical,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(customerList[index].customerName),
              subtitle: Column(
                children: [
                  Text(customerList[index].customerID),
                  Text(customerList[index].customerAddress),
                ],
              ),
          );
        },
      ),

    Result: image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search