Slivers Deep Dive Series: SliverToBoxAdapter, SliverList and SliverFixedExtentList
In the previous part of this blog post series, you have made an intro to the Slivers, how do they work and lastly, you have implemented a SliverAppBar. With this blog post, we will be getting closer to the surface for understanding how other types of Slivers work.
For starting, we are going to keep going where we left off. For that, you can check out this project and move yourself to the step_1_final branch.
Let's start!
SliverToBoxAdapter
Next step is to add the movie information to screen. If you check out the code for it, you can see that it’s the main parent is a Row. Row is a widget that is using the Box protocol. But you saw before that, you need to implement something using Sliver protocol for implementing a widget inside CustomScrollView. Probably you are thinking, “How am I supposed to change a Box protocol widget to Sliver protocol widget?”. Don’t worry, Flutter got you covered on this as well. You will be simply using the SliverToBoxAdapter for it.
SliverToBoxAdapter is a sliver that contains a single box widget. It’s quite handy when you want to show only a single child in the CustomScrollView.
For implementing SliverToBoxAdapter, we will keep working on the _PopularMoviesDetailPageState class inside the popular_movies_detail_page.dart file. Before starting the implementation add the method below inside the class:
The method above is created from the previously implemented widgets which are displaying the movie information. You extracted it to be able to make it more independent from the implementation.
For implementing SliverToBoxAdapter, navigate yourself back to the return statement of build(BuildContext context). Just add the code below after the SliverAppBar code implementation.
And that’s it. If you run your application now, you can see that the previously implemented movie information is under the SliverAppBar and the scrolling behavior still works as expected.
Next step is to implement the movie overview. Since you have implemented an animation before and it’s better to keep it. You need to convert your widgets which is following Box protocol into Sliver protocol widgets.
SliverList and SliverFixedExtentList
For a single widget, you learned that it’s enough to use SliverToBoxAdapter. But if you would like to convert multiple images, you need to go for a different approach. You can create SliverToBoxAdapter for each widget but, it won’t be performant.
For this purpose, you can simply use a SliverList or a SliverFixedExtentList. SliverList is a sliver that places multiple box children in a linear array along the main axis. SliverFixedExtentList is a sliver that places multiple box children with the same main axis extent in a linear array. So in case you have the children with the same extent for your list you can use SliverFixedExtentList otherwise, you can use SliverList. For our scenario, you will be combining two very different widgets, therefore you will be implementing a SliverList.
For implementing SliverList, we will keep working on the _PopularMoviesDetailPageState class inside the popular_movies_detail_page.dart file. Before starting the implementation add the method below inside the class:
This method will be creating the animated movie overview and ticket information screen that you had before.
For implementing SliverList, navigate yourself back to the return statement of build(BuildContext context). Just replace the code below with the SliverToBoxAdapter code.
With the code above, you can see that you are creating your children with delegate. There are basically two ways to create the list elements. You can either specify the whole list in the delegate by using SliverChildListDelegateor you can load them dynamically by using SliverChildBuilderDelegate. For SliverListyou will be learning how to use SliverChildListDelegateand you will be learning how to use SliverChildBuilderDelegatein the following part.
Inside the delegate, you moved your _createMovieInformationWidget() in to SliverList to prevent creating multiple SliverToBoxAdapter adapters. Afterward, you also added _createAnimatedMovieOverviewAndTicketInformationWidget() to provide all elements to the SliverList. If you run the application, you can see that it’s in the starting state but implemented with Slivers. If you open the app and the movie detail page then click on the “Tickets” tab, if you scroll up, you can see how the SliverAppBar really behaves. You can also see the current app behavior below:
SliverList is useful for placing the children in one dimension. What if you want to have your children in a two-dimensional arrangement. Your answer to that is SliverGrid.
We are going to talk about SliverGrid and custom Slivers in the last part of this blog post series coming soon. In the meantime, if you have any further questions, just reach out to me via comments here or over Twitter.
