Education
Software Development Executive - II
Last updated on Oct 24, 2023
Last updated on Oct 16, 2023
Navigating the dynamic wave of UI development, especially with Flutter, can sometimes feel challenging. But fear not! Once you embrace core concepts like SliverPersistentHeader, Flutter renders you equipped to create dynamic and responsive apps. So, what exactly is SliverPersistentHeader, and how does it facilitate the creation of engaging UIs? Let's find out.
In the fun-filled world of Flutter, a sliver refers to a "slice" or "portion" of the viewport. Slivers change their layout, making them an integral part of the scrolling model in Flutter. They help address complex scrolling requirements in a structure that extends beyond the standard scroll view.
SliverPersistentHeader, as the title suggests, is a sliver whose size varies as the user scrolls through the viewport. This creates a unique scrolling experience where the header changes its appearance based on the scrolling progress. This effect can be used in creating elements like a hide-on-scroll app bar or an expanding hero image. SliverPersistentHeader supports both floating and pinned header styles to satisfy varying needs.
Implementing unique scrolling animations can be a daunting task. But with the SliverPersistentHeader, Flutter makes it easy and intuitive. This powerful class allows you to create custom scrolling effects to enhance UI interaction and user experience.
The SliverPersistentHeader has the ability to change its own dimensions as the user scrolls. It could either shrink to its minimum height (known as the pinned header) or get pushed entirely out of the viewport opposite the scrolling direction, based on its configuration. This gives developers the ability to create diverse scrolling effects suiting specific application needs.
To use SliverPersistentHeader effectively, we must first understand its structure and properties. Let's define those parameters and understand their role in creating a unique scrolling experience for our Flutter app.
There are two primary properties to familiarize yourself with when working with SliverPersistentHeader:
These properties are your key to designing interactive and dynamic headers. Deep-diving, the SliverPersistentHeaderDelegate has three major functions to assist the header visibility aspects during a user scroll. They are:
maxExtent: Defines the maximum size that our header can expand to. This is the size of our header at the start, when no scrolling has occurred.
1 @override 2 double get maxExtent => max_height;
minExtent: Defines the minimum size our header can shrink to. This is the final size of our header after scroll reaches the bottom.
1 @override 2 double get minExtent => min_height;
build: This is where we return our header layout.
1@override 2Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { 3 return LayoutBuilder(builder: (context, constraints) { 4 return Container(); 5 }); 6}
These components work together, creating a smooth scrolling experience. They provide the necessary support needed to create an intuitive SliverPersistentHeader which enhances the app's overall feel.
Now that we've spent some time understanding the SliverPersistentHeader, let's put our learning into practice. We'll implement a basic SliverPersistentHeader and then move on to create a more complex one.
First, let's create a flutter project and define a function that creates a simple SliverPersistentHeader. Following this, we'll add this function to our home screen inside a CustomScrollView.
1SliverPersistentHeader makeHeader(String headerTitle) { 2 return SliverPersistentHeader( 3 pinned: true, 4 delegate: _SliverAppBarDelegate( 5 minHeight: 60.0, 6 maxHeight: 200.0, 7 child: Container( 8 color: Colors.lightBlue, child: Center(child: Text(headerTitle))), 9 ), 10 ); 11 } 12 13 @override 14 Widget build(BuildContext context) { 15 return CustomScrollView( 16 slivers: <Widget>[ 17 makeHeader("Header Section 1"), 18 ], 19 ); 20 }
In the code snippet, we're creating a SliverPersistentHeader with the style of being pinned at the top. Upon scrolling, the header size reduces from its maxHeight to the minHeight.
Now let's scroll forward to building a more complex header.
1class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate { 2 _SliverAppBarDelegate({ 3 @required this.minHeight, 4 @required this.maxHeight, 5 @required this.child, 6 }); 7 final double minHeight; 8 final double maxHeight; 9 final Widget child; 10 11 @override 12 double get minExtent => minHeight; 13 @override 14 double get maxExtent => max(maxHeight, minHeight); 15 16 @override 17 Widget build( 18 BuildContext context, double shrinkOffset, bool overlapsContent) { 19 return new SizedBox.expand(child: child); 20 } 21 22 @override 23 bool shouldRebuild(_SliverAppBarDelegate oldDelegate) { 24 return maxHeight != oldDelegate.maxHeight || 25 minHeight != oldDelegate.minHeight || 26 child != oldDelegate.child; 27 } 28}
In this class, we define the minExtent and maxExtent to give our header a variable size. The child widget is the content that is to be shown in the title header. The shouldRebuild function is used to say when it is required to rebuild the widget on a scroll.
Now that we have a grasp on a single SliverPersistentHeader instance, it's time to raise the bar! Let's learn how to include multiple SliverPersistentHeaders inside a CustomScrollView to bring the interaction to the next level.
The integration of multiple SliverPersistentHeaders enables greater customization of the scrolling behavior in your Flutter apps. Let's illustrate this by adding more headers to the CustomScrollView.
1@override 2 Widget build(BuildContext context) { 3 return CustomScrollView( 4 slivers: <Widget>[ 5 makeHeader("Header Section 1"), 6 makeHeader("Header Section 2"), 7 makeHeader("Header Section 3"), 8 // .. as many as needed! 9 ], 10 ); 11 }
When you scroll through the app now, you'll notice the differential scrolling effect. As each "Header Section" reaches the leading edge of the viewport, it reduces in size while the following header prepares to take its place. This progression continues as the user scrolls, creating a unique and modern scrolling experience.
Achieving this effect without the power of the SliverPersistentHeader could be unachievable or extremely complex and difficult to manage. In the next section, we will discuss the best practices and tips to get the most out of your SliverPersistentHeader.
While using the Flutter SliverPersistentHeader, keeping certain practices and tips in mind can help you avoid potential pitfalls and troubleshoot common issues.
The very first tip is related to the rebuild of the header. It's essential to ensure that the shouldRebuild function in the _SliverAppBarDelegate returns true when the header needs to be redesigned. If the header is not updating as expected, this is the first place to turn to diagnose the issue.
Next, do keep an eye on the maximum and minimum extents. Defining improper or too different values for minExtent and maxExtent can lead to unwanted behavior during scrolling.
Another aspect is the use of pinned and floating properties wisely. Each serves a different purpose; for example, pinned true makes the header stick at the top of the viewport even after scrolling, whereas floating allows the header to come back into view if the user scrolls towards the top.
1SliverPersistentHeader( 2 floating: true, 3 pinned: true, 4 delegate: _SliverAppBarDelegate(..), 5 ),
Lastly, ensure you don't use too many SliverPersistentHeaders at once. Too many headers within a scroll view can hinder the application's performance and make for an unpleasant user experience.
With the power of SliverPersistentHeader at your fingertips, implementing custom scroll behaviors in Flutter becomes a lot more accessible and enjoyable. You can now effortlessly create applications with unique scrolling views, whether it's a simple pinned app bar or a hero image that changes its size upon scrolling.
Today, we explored what SliverPersistentHeader is, its importance, how to use it, and the best practices around it. We learned how to implement a basic SliverPersistentHeader, use multiple of them to create fascinating scroll behaviors, and spot issues that might come up as you venture further into this territory.
Let's hope our dive into the sea of SliverPersistentHeader in Flutter has equipped you well for your journey forward in creating conversational and custom scrolling views that augment the user journey.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.