I want to add a listview in Card widget. It works when scroll vertically, but not when scroll horizontally. How can I fix it? It is in Sizedbox. I tried flexible and expanded but doesnt work.

 return Scaffold(
  appBar: appBar(),
  body: Padding(
    padding: const EdgeInsets.only(top: 5, left: 8, right: 5),
    child: Column(
      children: [
        Card(
          elevation: 0,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
            
              SizedBox(
                height: 100,
                width: 110,
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  child: ListView.builder(
                    shrinkWrap: true,
                    physics: const BouncingScrollPhysics(),
                    itemCount: 5,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                        title: TextButton(onPressed: () {}, child: Text(brandName[index])),
                      );
                    },),),)],),),],),),);

CodePudding user response：

Do this instead:

/*...*/
SizedBox(
  height: 100,
  width: 110,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    shrinkWrap: true,
    physics: const BouncingScrollPhysics(),
    itemCount: 5,
    itemBuilder: (BuildContext context, int index) {
      return SizedBox(
        width: // set a value,
        child: ListTile(
          // for suggestion you don't need `TextButton` here
          // just do `title: Text(brandName[index])` and use the `onTap` function of `ListTile` instead
          title: TextButton(
            onPressed: () {},
            child: Text(brandName[index])
          )
        ),
      );
    },
  ),
)
/*...*/

CodePudding user response：

Wrap your ListTile with SizedBox() and explicitly specify the width of ListTile.

eg. SizedBox (width: 100, LisTile(...))

For better understanding refer this answer.