将 scrollDirection 设置为 Axis.horizontal 时 ListView.builder 引发 RedorBox 错误

Question

I am using a ListView.builder and a Gridview.builder and need to make ListView horizontal but when I set its scrollDirection property it throws error (picture attached) [![enter image description here][1]][1]

import 'package:flutter/material.dart';

class MenuPage extends StatefulWidget {
  @override
  _MenuPageState createState() => _MenuPageState();
}

class _MenuPageState extends State<MenuPage> {
  List<String> litems = ["Hello", "how"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        physics: ScrollPhysics(),
        child: Column(
          children: <Widget>[
            ListView.builder(
                scrollDirection: Axis.horizontal,
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                padding: EdgeInsets.all(8),
                itemCount: 18,
                itemBuilder: (context, index) {
                  return CategoryButton(title: "title");
                }),
            GridView.builder(
                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 200,
                    childAspectRatio: 3 / 2,
                    crossAxisSpacing: 20,
                    mainAxisSpacing: 20),
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: 18,
                itemBuilder: (context, index) {
                  return Text('Some text more');
                })
          ],
        ),
      ),
    );
  }
}


  [1]: https://i.stack.imgur.com/D2knH.png

Answer 1

You have used ListView.builder directly to the column widget. Column and its parent SingleChildScrollView widgets have infinity height and width. You should set width and height for the ListView.builder widget or warp inside the Expanded widget. I have resolved it by setting the height and widget. Find the codes below.

class MenuPage extends StatefulWidget {
  @override
  _MenuPageState createState() => _MenuPageState();
}

class _MenuPageState extends State<MenuPage> {
  final List<String> litems = ["Hello", "how"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        physics: ScrollPhysics(),
        child: Column(
          children: <Widget>[_buildListView(), _buildGridView()],
        ),
      ),
    );
  }

  GridView _buildGridView() {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 200,
          childAspectRatio: 3 / 2,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20),
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemCount: 18,
      itemBuilder: (context, index) {
        return Text('Some text more');
      },
    );
  }

  Widget _buildListView() {
    final deviceWidth = MediaQuery.of(context).size.width;
    return Container(
      width: deviceWidth,
      height: 150.0,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        padding: EdgeInsets.all(8),
        itemCount: 18,
        itemBuilder: (context, index) {
          return Container(
            width: 100,
            height: 100,
            child: TextButton(
              onPressed: () {},
              child: Text("title"),
            ),
          );
        },
      ),
    );
  }
}