I'm trying to make a list view but there is a space between children I didn't know from where it comes.

I colored the containers to see where is this space and I found it in the first container where I put inside the list view builder. but no padding and still the space.

i want the card to be fitted in the container.

any one can help!

import 'package:flutter/material.dart';

class CustomListView_frequentlyUsed extends StatelessWidget {
  final List<FreelancerService> services;
  CustomListView_frequentlyUsed(this.services);

  Widget build(context) {
    return ListView.separated(
      shrinkWrap: false,
      scrollDirection: Axis.horizontal,
      itemCount: services.length,
      separatorBuilder: (BuildContext context, int index) {
        return SizedBox(height: 3);
      },
      itemBuilder: (context, int currentIndex) {
        return new Container(
          padding: EdgeInsets.all(0.0),
          margin: EdgeInsets.all(0),
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.purple,
            boxShadow: [
              BoxShadow(
                color: Colors.grey[50],
                spreadRadius: 5,
                blurRadius: 7,
                offset: Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
          width: 180,
          height: 150,
          child: createViewItem(services[currentIndex], context)
        );
      },
    );
  }

  Widget createViewItem(FreelancerService service, BuildContext context) {
    return new ListTile(
        title: new Card(
          color: Colors.pink,
          elevation: 0.0,
          child: new Container(
            padding: EdgeInsets.zero,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                _getImgWidget(service.image),
                Padding(padding: EdgeInsets.only(bottom:4), child: _getTitleWidget(service.title)),
                _getPriceWidget(service.price)
              ],
            ),
          ),
        ),
        onTap: () {
        });
  }
  Widget _getImgWidget(String url){
    return new Container(
      margin: EdgeInsets.only(bottom: 7),
      color: Colors.red,
      height: 150.0,
      child: Image.asset(url, fit: BoxFit.fitWidth),
    );
  }

  Text _getTitleWidget(String title){
    return new Text(
      title,
      maxLines: 1,
      style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
    );
  }

  Text _getPriceWidget(double price){
    return new Text(
      "LBP "   c.format(price).toString(),
      maxLines: 1,
      textAlign: TextAlign.center,
      style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 13, color: Colors.blue),
    );
  }
 
} 
//end class customListView

CodePudding user response：

I have tried from dummy model. Hope it is you are expecting. Try as follows:

    class CustomListView_frequentlyUsed extends StatelessWidget {
  
  var services=[
      Model("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png","Travel",10000.0),
    Model("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png","Somthing",20000.0),
    Model("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png","Else",4555.0),
    Model("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png","New ",8985.0),
    Model("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png","Itmes",5222.0),
  ];
  
@override
  Widget build(context) {
    return ListView.separated(
      shrinkWrap: false,
      scrollDirection: Axis.horizontal,
      itemCount: 5,
      separatorBuilder: (BuildContext context, int index) {
        return SizedBox(height: 3);
      },
      itemBuilder: (context, int currentIndex) {
        return  Container(
          padding: EdgeInsets.all(0.0),
            child:// new Stack(
          //    children: <Widget>[
                Container(
               //   height: double.infinity,
                 // width: double.infinity,
                  alignment: Alignment.center,
                  decoration: const BoxDecoration(
                    color: Colors.purple,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey,
                        spreadRadius: 5,
                        blurRadius: 7,
                        offset: Offset(0, 3), // changes position of shadow
                      ),
                    ],
                  ),
                  width: 180,
                  height: 150,
                 // color: Colors.white,
                  child: createViewItem(services[currentIndex], context)
                )
         //     ],
       //     )
        );
      },
    );
  }

   Widget createViewItem(var service, BuildContext context) {
return InkWell(
  onTap: () {},
  child: Card(
    color: Colors.pink,
    elevation: 0.0,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        _getImgWidget(service.image),
        Padding(
            padding: const EdgeInsets.only(bottom: 4),
            child: _getTitleWidget(service.title)),
        _getPriceWidget(service.price)
      ],
    ),
  ),
);
}

  
  Widget _getImgWidget(String url){
    return  Container(
      margin:const EdgeInsets.only(bottom: 7),
      color: Colors.red,
      height: 150.0,
      child: Image.network(url, fit: BoxFit.cover),
    );
  }

  Text _getTitleWidget(String title){
    return  Text(
      title,
      maxLines: 1,
      style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
    );
  }

  Text _getPriceWidget(double price){
    return  Text(
      "LBP "   price.toString(),
      maxLines: 1,
      textAlign: TextAlign.center,
      style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 13, color: Colors.blue),
    );
  }
 
}

class Model{
  final String image;
  final String title;
  final double price;
   Model(this.image,this.title,this.price);
  
}

CodePudding user response：

The issue is probably being caused because of separatorBuilder

Try changing the height to 0 of separator builder because of which the space is being shown in the image you shared.

or refer from below code.

separatorBuilder: (BuildContext context, int index) {
    return SizedBox();
  },