how to padding in flutter with inkwell

user_9857486 0
Viewed 728

I m trying to give padding between these two images but was unable to do so tried adding padding in the child

enter image description here

class BrandSlider extends StatelessWidget {
  final config;

  const BrandSlider({required Key key, this.config}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return InkWell(
            // splashColor: Colors.orange,
            onTap: () {
              ProductModel.showList(
                  context: context, brandIds: config['items'][index]['id']);
            },
            child: Image.network(config['items'][index]['image']),

          );
        },
        itemCount: brands.length,
      ),
    );
  }
}
dart flutter
5 Answers

wrap inkwell with padding if it does not work then increase height of SizedBox

Padding(padding:EdgeInsets.all(8.0),child:InkWell(
        // splashColor: Colors.orange,
        onTap: () {
          ProductModel.showList(
              context: context, brandIds: config['items'][index]['id']);
        },
        child: Image.network(config['items'][index]['image']),

      ));
user_147243610

I think ListView.separated will be more suitable in this case.



class BrandSlider extends StatelessWidget {
  final config;

  const BrandSlider({required Key key, this.config}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100,
      child: ListView.separated(
        separatorBuilder: (context, index) => SizedBox(
          width: 20,
        ),
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return InkWell(
            splashColor: Colors.orange,
            onTap: () {
              ProductModel.showList(
                  context: context, brandIds: config['items'][index]['id']);
            },
            child: Image.network(config['items'][index]['image']),
          );
        },
        itemCount: brands.length,
      ),
    );
  }
}
user_101571270

You can use the Listview padding property

class BrandSlider extends StatelessWidget {
  final config;

  const BrandSlider({required Key key, this.config}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100,
      child: ListView.builder(
        padding: EdgeInsets.symmetric(horizontal: 8),
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return InkWell(
            // splashColor: Colors.orange,
            onTap: () {
              ProductModel.showList(
                  context: context, brandIds: config['items'][index]['id']);
            },
            child: Image.network(config['items'][index]['image']),

          );
        },
        itemCount: brands.length,
      ),
    );
  }
}
user_169070120

You shouldn't put padding in the child. You should make it the parent.

return Padding(
  padding:EdgeInsets.only(right:20),
  child:InkWell(
  // splashColor: Colors.orange,
  onTap: () {
  ProductModel.showList(
    context: context, brandIds: config['items'][index]['id']);
  },
   child: Image.network(config['items'][index]['image']),
   ...
user_145958630 
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return InkWell(
            // splashColor: Colors.orange,
            onTap: () {
              ProductModel.showList(
                  context: context, brandIds: config['items'][index]['id']);
            },
            child: Container(
padding:EdgeInsets.all(10.0),
child: Image.network(config['items'][index]['image']),),

          );
        },
        itemCount: brands.length,
      ),
    );
user_164554210
Related