listview.builder doesnt works with scrollDirection: Axis.horizontal

Question

This is my HomePage.dart in which I am trying to display list of products horizontally but when I set scrollDirection: Axis.horizontal the entire screen turns white, I have used hero widget for some details page and thats why I have created widget buidItem. please help I am badly stuck at this I also tried signleChildScrollView but that didnt work too.

import 'package:EcommerceApp/animations/fadeAnimations.dart';
import 'package:EcommerceApp/screens/info_page.dart';
import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  final List<Map<String, String>> dataList = [
    {"imageLink": "images/1.jpg", "tag": "one", "name": "product1"},
    {"imageLink": "images/2.jpg", "tag": "two", "name": "product2"},
    {"imageLink": "images/3.jpg", "tag": "three", "name": "product3"},
    {"imageLink": "images/4.jpg", "tag": "four", "name": "product4"},
    {"imageLink": "images/bensen.jpg", "tag": "five", "name": "product5"},
    {"imageLink": "images/marl.jpg", "tag": "six", "name": "product6"},
    {"imageLink": "images/fs.jpg", "tag": "seven", "name": "product7"},
    {"imageLink": "images/marl.jpg", "tag": "eight", "name": "product8"},
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text(
          "Home Page",
          style: TextStyle(color: Colors.black, fontSize: 25),
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
                 scrollDirection: Axis.horizontal, // this scrollDirection is throwing error but when I remove this It works just fine
                padding: EdgeInsets.symmetric(horizontal: 10),
                itemCount: dataList.length,
                itemBuilder: (context, index) {
                  return buidItem(
                      image: dataList[index]['imageLink'],
                      tag: dataList[index]['tag'],
                      name: dataList[index]['name'],
                      context: context);
                }),
          ),
        ],
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget buidItem(
      {String image = "images/",
      @required String tag,
      @required String name,
      @required BuildContext context}) {
    return Material(
        child: Hero(
            tag: tag,
            child: GestureDetector(
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => InfoPage(
                              image: image,
                              tag: tag,
                              name: name,
                            )));
              },
              child: Container(
                height: 100,
                width: double.infinity,
                decoration: BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.cover, image: AssetImage(image)),
                ),
              ),
            )));
  }
}

score 0 · Accepted Answer · answered May 08 '21 at 10:47

Wrap your ListView.Builder() inside an Expanded widget. Everytime you have a growing widget e.g. ListView or GridView insdie a Row or Column this error will come. The fix is either to provide a fixed width or wrap it under a Expanded widget.

Check this link for more: https://stackoverflow.com/a/57132247/3197387

score 0 · Answer 2 · answered May 08 '21 at 14:56

This worked for me, got this from Vertical ListView inside horizontal SingleChildScrollView

SingleChildScrollView(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      SizedBox(
        height: 120, // <-- you should put some value here
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Text('it works');
          },
        ),
      ),
    ],
  ),
);

LihnNguyen · Answer 3 · 2021-05-08T17:47:13.010

You try this way

ListView.builder(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  scrollDirection: Axis.horizontal,
  padding: EdgeInsets.symmetric(horizontal: 10),
  itemCount: dataList.length,
  itemBuilder: (context, index) {
    return buidItem(
        image: dataList[index]['imageLink'],
        tag: dataList[index]['tag'],
        name: dataList[index]['name'],
        context: context);
  }),

listview.builder doesnt works with scrollDirection: Axis.horizontal

3 Answers3