Home > database >  why if I change scroll Direction to Axis.horizontal it doesn't work?
why if I change scroll Direction to Axis.horizontal it doesn't work?

Time:10-02

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFE6E6E6),
      body: SingleChildScrollView(
        child: SafeArea(
          child: Column(
            children: [
              ListView.builder(
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                itemCount: iconList.length,
                itemBuilder: (BuildContext context, int index) {
                  return Row(
                    children: [iconList[index]],
                  );
                },
              ),
              const SizedBox(
                height: 50,
              ),

CodePudding user response:

note that you have 2 scrollable widgets in your widget tree, the SingleChildScrollView and the ListView.builder, the SingleChildScrollView can be set to be horizontally scrollable, and don't forget the Column that's vertically aligned it's children.

if you want something scrollable horizontally, you need a Row wrapped with SingleChildScrollView with scrollDirection: Axis.horizontal, same thing for listView

another Note: like I said you have scrollable widgets, so better consider to not use ListView since you used SingleChildScrollView, instead to generate widgets based on the index you can use List.generate() method :

SingleChildScrollView(
scrollDirection: Axis.horizontal, 
child: Row(
children: <Widget>[
// your other Widgets
...List.generate(iconList.length, (index) => YourWidgetExample(index)
),
],
)

Consider if any writing mistakes I made in the code because I write in the Stackoverflow editor directly

Hope it helps

CodePudding user response:

Whenever you are trying to use horizontal ListView inside Column widget, provide a fixed height based on ItemBuilder

child: Column(
  mainAxisSize: MainAxisSize.max,
  children: [
    SizedBox(
      height: 200,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 22,
        itemBuilder: (BuildContext context, int index) {
          return Row(
            mainAxisSize: MainAxisSize.min,
            children: [Text("Item $index")],
          );
        },
      ),
    ),
  ],
),

Or you can follow Gwhyyy's post with SingleChildScrollView

SingleChildScrollView(
  child: Row(
    children: [
      for (int index = 0; index < itemLength; index  )
        Text("Item $index")
    ],
  ),
),

You can check Unbounded height / width | Decoding Flutter

  • Related