Reputation: 272
I want to implement a horizontal scroll with categories:
I put my Categories section in Column (maybe it is not the right way, correct me please if I am wrong) and then I try to make my categories scrollable using ListView/Slivers. I have faced with issue that I need to specify constraints for ListView if I use it inside Column. I tried to wrap it with Expanded widget but it didnt work for me. Then I tried CustomScrollView and Slivers but it seems I am doing something wrong. Can you please suggest me the right structure of the widgtes for this view or correct me.
Container(
margin: EdgeInsets.all(40),
child: Column(
children: <Widget>[
Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Category',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
Text(
'8 CATEGORIES',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
],
),
SizedBox(
height: 30,
),
CustomScrollView(
scrollDirection: Axis.horizontal,
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate([
CategoryCard(
title: 'Featured',
previewImageAsset:
'assets/images/bliny-shokolad-klubnika.jpg',
),
]),
)
],
),
Row(
children: <Widget>[
CategoryCard(
title: 'Featured',
previewImageAsset:
'assets/images/bliny-shokolad-klubnika.jpg',
),
],
),
],
),
),
],
),
),
Upvotes: 1
Views: 4471
Reputation: 14053
You are getting the error when using the ListView
the renderview port was exceeded. To fix this, warp your ListView
in a Container
widget and give it the height and width property:
Check below:
Container(
// change your height based on preference
height: 80,
width: double.infinity,
child: ListView(
// set the scroll direction to horizontal
scrollDirection: Axis.horizontal,
children: <Widget>[
// add your widgets here
CategoryCard(
title: 'Featured',
previewImageAsset:
'assets/images/bliny-shokolad-klubnika.jpg',
),
// space them using a sized box
SizedBox(width: 15,),
CategoryCard(
title: 'Featured',
previewImageAsset:
'assets/images/bliny-shokolad-klubnika.jpg',
),
],
),
),
Upvotes: 5