Horizontal and vertical scrolling list view in flutter

As a Mobile User, You Already know the Google play store or App Store both have a scrolling view horizontal and vertical scrolling view to view apps. How do we do that view implementation for the flutter app?. When I was searching for it I couldn’t find a fully effective document for my purpose. Finally, I could implement that as follows.No more boring words! 😂.Let’s dig!

First I have created a card widget for a Movie app here. So I created a Movie Card Widget using Container widget in a flutter. After added decoration into it and I have added flutter_svg: ^0.16.1 package to use SVG images into my app. SVG image’s size is small concerning other image categories. You can use Your image or category. At the bottom, I created that stateless widget “movie card”.

_provideRatingBar(int rating){
    return Row(
        mainAxisSize: MainAxisSize.min,
        children: List.generate(5, (index) {
           return Icon(
             index < rating ? Icons.star : Icons.star_border,      );
    })    );  
}

I have added this function because I needed to add rating stars for that movie card. If you don’t need it Skip that function. My main purpose is for the UI part only. This function will generate 5 starts and It will be filled according to the rating value.

Flutter has amazing widgets😍. Here I Have used Flutter Slivers. It was enabled our UI flexibility of scrolling inside the CustomScrollview.If you want to expand the app bar at the start of scrolling, You can use SliverAppBar instead of a normal appbar.

expandedHeight: 200,

This property increase the expandable height of the app bar.

flexibleSpace: FlexibleSpaceBar(
              background: Image.network(
            "https://images.unsplash.com/photo-1517404215738-15263e9f9178?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",            fit: BoxFit.fill,
)),

You can add a background image when the sliver app bar is fully expanded or any other color for the expandable background. I have used a network image here and set it to the flexible app bar space. When the app bar is scrolling image will display it’s background and when scroll back the app bar will become as normal as the starting screen.

After the sliver app bar creation I had to implement our scrolling list view. I have used the SliverFixedExtentList widget for this. Because I have a fixed item extent. My item extent is 200. So if you need a custom expandable content, Try to move for SliverExtentList.This widget provides the vertical scrolling and has to use another way to horizontal scroll. So I created List Item widget for the delegates in SliverFixedExtentList.

_listItem() {
    return Container(
      padding: EdgeInsets.only(top: 10, bottom: 5)
,      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height * 0.3,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          MovieCard(),
          MovieCard(),
          MovieCard()
           ///add more as you wish
        ],
      ),
    );
  }

I wanted to scroll the movie card both horizontally and vertically. So I Created a Container widget here to scroll vertically. Inside that container, I created a horizontal list view to scroll movie cards horizontally. Now each movie card can be scrolled both directions easily.

If you are trying to create a list view according to the state changes of the app.Try SliverChildBuilderDelegate inside the SliverFixedExtentList.

Thanks for reading this article. Be sure to clap/recommend as much as you can and also share with your friends. It means a lot to me.

Also, Let’s become friends on LinkedIn and Github.