i am trying to show the catalog list in two row within horizontal GridView or ListView
instead of single row the list data comes from server The horizontal ListView working fine with one row How can I achieve this as the GIF bellow ?

bellow image what i have

bellow gif what i need

[

below full code The horizontal ListView which is working fine with one row and i need to convert it to GridView so it can show two row and horizontal scrollable

_catList() {
return Container(
  height: 150,
  child: ListView.builder(
    itemCount: catList.length < 10 ? catList.length : 10,
    scrollDirection: Axis.horizontal,
    shrinkWrap: true,
    physics: AlwaysScrollableScrollPhysics(),
    itemBuilder: (context, index) {
      return Padding(
        padding: const EdgeInsetsDirectional.only(end: 10),
        child: GestureDetector(
          onTap: () async {
            if (catList[index].subList == null ||
                catList[index].subList.length == 0) {
              await Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => ProductList(
                        name: catList[index].name,
                        id: catList[index].id,
                        tag: false,
                        updateHome: widget.updateHome),
                  ));
              if (mounted) setState(() {});
            } else {
              await Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SubCat(
                        title: catList[index].name,
                        subList: catList[index].subList,
                        updateHome: widget.updateHome),
                  ));
              if (mounted) setState(() {});
            }
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: const EdgeInsetsDirectional.only(bottom: 5.0),
                child: new ClipRRect(
                  borderRadius: BorderRadius.circular(25.0),
                  child: new FadeInImage(
                    fadeInDuration: Duration(milliseconds: 50),
                    image: NetworkImage(
                      catList[index].image,
                    ),
                    height: 100.0,
                    width: 100.0,
                    fit: BoxFit.cover,
                    imageErrorBuilder: (context, error, stackTrace) =>
                        erroWidget(100),

                    //  errorWidget: (context, url, e) => placeHolder(50),
                    placeholder: placeHolder(100),
                  ),
                ),
              ),
              Container(
                child: Text(
                  catList[index].name,
                  style: Theme.of(context).textTheme.caption.copyWith(
                      color: colors.fontColor,
                      fontWeight: FontWeight.w600,
                      fontSize: 15),
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                ),
                width: 100,
              ),
            ],
          ),
        ),
      );
    },
  ),
);

}

CodePudding user response：

You can use grid view to archive this thing. Here is a snippet of the configuration.

GridView.count(
                  shrinkWrap: true,
                  crossAxisCount: 2,
                  physics: const ClampingScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 20,
                  children: ...)

Here crossAxisCount: 2,scrollDirection: Axis.horizontal is what you need.

CodePudding user response：

You can either use ListView.builder with itemCount: catList.length/2 and return a Column with two items (index and index 1)

or use GridView.count:

Container(
  height: 150,
  child: GridView.count(
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    crossAxisCount: 2,
    children: catList.isEmpty ? [Container()] : catList.map((cat) {
      return Padding(
        padding: const EdgeInsetsDirectional.only(end: 10),
         child: GestureDetector(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: const EdgeInsetsDirectional.only(bottom: 5.0),
                child: new ClipRRect(
                  borderRadius: BorderRadius.circular(25.0),
                  child: new FadeInImage(
                    fadeInDuration: Duration(milliseconds: 50),
                    image: NetworkImage(
                      cat.image,
                    ),
                    height: 100.0,
                    width: 100.0,
                    fit: BoxFit.cover,
                    imageErrorBuilder: (context, error, stackTrace) =>
                        erroWidget(100),
                    placeholder: placeHolder(100),
                  ),
                ),
              ),
              Container(
                child: Text(
                  cat.name,
                  style: Theme.of(context).textTheme.caption.copyWith(
                      color: colors.fontColor,
                      fontWeight: FontWeight.w600,
                      fontSize: 15),
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                ),
                width: 100,
              ),
            ],
          ),
        ),
      );
    }).toList(),
  ),
);