How to make two rows of icons and add the ability to scroll them horizontally?-CodePudding

I have a widget that displays icons from a server. I display all the icons in the list in one line with horizontal scrolling. I need to make sure that the icons are added in two rows at most, and if there are more of them, then add horizontal scrolling, how to do this?

  Widget _amenities(PublicChargingStationModel station) {
    List<Widget> assetsList = station.getAmenitiesAsset;
    return SizedBox(
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: assetsList.length,
        itemBuilder: (context, index) => Padding(
          padding:
              EdgeInsets.only(right: index == assetsList.length - 1 ? 0 : 8),
          child: Container(
            width: 30,
            height: 30,
            alignment: Alignment.center,
            decoration: const BoxDecoration(
              color: constants.Colors.purpleMain,
              shape: BoxShape.circle,
            ),
            child: assetsList[index],
          ),
        ),
      ),
    );
  }

now I have

need to do

CodePudding user response：

Instead of using list view, you can use grid view. Like this:

SizedBox(
      height: 100,
      width: 300,
      child: GridView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: _list.length,
        itemBuilder: (context, index) => Container(
          width: 30,
          height: 30,
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.purple,
            shape: BoxShape.circle,
          ),
        ),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, crossAxisSpacing: 8, mainAxisSpacing: 8),
      ),
    )