How to implement horizontal list view with custom sections header in flutter?

726 views Asked by At

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),
              ),
            ),
          ],
        ),
      ),
    );

..

0

There are 0 answers