Flutter：水平使用无限滚动 ListView

Question

I am using the flutter package infiniteListView in order to get a horizontal list of infinitely scrolling list of days that users can click on.

This is the following error I am getting

The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
When a column is in a parent that does not provide a finite height constraint, for example 
if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting aflex
on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
space in the vertical direction.

Here is my code

 Widget build(BuildContext context) {
    return Container(
        // Leave margin here for top bar
        color: Colors.grey[900],
        padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 5.0),
        child: (Column(children: [
     Expanded(
            child: InfiniteListView.builder(
                scrollDirection: Axis.horizontal,
                controller: _infiniteController,
                anchor: 0.5,
                itemBuilder: (BuildContext context, int index) {
                  return Material(
                    child: InkWell(
                      
                      onTap: () {},
                      child: ListTile(
                        
                        title: Text('Item #$index'),
                        subtitle: Text('Subtitle $index'),
                        trailing: const Icon(Icons.chevron_right),
                      ),
                    ),
                  );
                }),
          ),

        ])));
  }

Answer 1

wrap your ListTile with Fixed width, ListTile by default takes full width(something like double.infinity ). also our Axis.horizontal, will take double.infinity , and this is where errors come.

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // Leave margin here for top bar
        color: Colors.grey[900],
        padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 5.0),
        child: (Column(mainAxisSize: MainAxisSize.min, children: [
          Expanded(
          
            child: InfiniteListView.builder(
              // itemCount: 222,
              scrollDirection: Axis.horizontal,
              controller: _infiniteController,
              anchor: 0.5,
              itemBuilder: (BuildContext context, int index) {
                return Material(
                  child: InkWell(
                    onTap: () {},
                    child: SizedBox(
                      width: 100,
                      child: ListTile(
                        title: Text('Item #$index'),
                        subtitle: Text('Subtitle $index'),
                        trailing: const Icon(Icons.chevron_right),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ])),
      ),
    );
  }

Answer 2

Solution 1:

• Column has Unbounded Constriants (Infinite Height). Wrap your InfiniteLiewView into a SizedBox(height 300: child: //InfiniteListView);

Solution 2:

• If that does not work, Pass shrinkWrap: true to InfiniteLiewView,

Solution 3:

• Wrap you Column into a SizedBox(height 400, child: //code) .

Try this out, Let me know then.