What can I do to implement this horizontal list view with custom sections header, knowing that the list view data is also dynamic like in this image.
list view with custom sections header
I want to divide the horizontal list view into sections with Text widget and Divider above its corresponding section.
this image what I have implemented so far
the List view widget
Flexible(
child: Container(
height: 200,
child: ListView.builder(
itemBuilder: comingMoviesItemBuilder,
scrollDirection: Axis.horizontal,
itemCount: comingMovies.length,
),
),
),
item builder function
Widget comingMoviesItemBuilder(context, index) {
return ImageCardButton(
image: '$kImageApiURL${comingMovies[index].posterPath}',
heroTag: 'coming_poster_$index',
onPressed: () {
print(comingMovies[index].posterPath);
Navigator.pushNamed(context, SingleMovieScreen.id,
arguments: SingleMovieScreenArguments(heroTag: 'coming_poster_$index',movie: comingMovies[index]));
},
);
}
Section header widget
Flexible(
child: Padding(
padding: EdgeInsets.only(right: 10),
child: Row(
children: <Widget>[
Text(
title,
style: TextStyle(letterSpacing: 5),
),
Expanded(
child: Container(
height: 1.0,
color: Color(0xFFEEEEEE),
),
),
],
),
),
);
..