I m trying to give padding between these two images but was unable to do so tried adding padding in the child
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,
),
);
}
}
CodePudding user response:
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,
),
);
}
}
CodePudding user response:
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,
),
);
}
}
CodePudding user response:
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']),
));
CodePudding user response:
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']),
...
CodePudding user response:
@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,
),
);