Check Mobile App
Read now

SliverAppBar In Flutter

Save

SliverAppBar in Flutter is a Material Design widget in flutter which gives a scrollable or collapsible app-bar.

SliverAppBar most importantly gives us the means to create an app-bar that can change appearance, blend in the background, or disappear as we scroll.

Properties of SliverAppBar

  1. action – you can use this property to displayed the list of widgets after the title of the SliverAppBar.
  2. backgroundColor – you can use this property to add colors to the background of the SliverAppBar.
  3. centerTitle – you can use this property to determines whether the title is in center of the SliverAppBar.
  4. flexibleSpace – you can use this property to stacks widgets behind the took bar when it collapse in SliverAppBar.
  5. expandedHeight – you can use this property to set the size of the app bar when expanded.
  6. floating – you can use this property to determine whether the SliverAppBar is visible as soon as you scrolls towards it(top or bottom) or not.
  7. pinned – you can use this property to SliverAppBar remain visible at the start of scroll view.
  8. stretch – you can use this property to determine whether the SliverAppBar stretch to full space of the over scroll area.

Implementation of SliverAppbar in Flutter

At first, you have the CustomScrollView widget in SliverAppBar. Then you can use the slivers property that takes a list of widgets and makes them scrollable.

Now you have to pass SliverAppBar as the first child in the sliver. The properties like snap, pinned, floating will give you different effects to your SliverAppBar.

And, In SliverAppBar, you can pass the image of your choice in the background of SliverAppbar because of the background property in FlexibleScapeBar.

In the FlexibleSpaceBar widget you can pass the title and the cover image with their respective properties.

Complete Code & Outputs

Here’s the final code below –

Demo Video –

Conclusion

In this blog, we have read about the SliverAppBar in Flutter.

I hope it will help you out in understanding and getting a brief idea about it.

Thank you for reading!!

References

https://api.flutter.dev/flutter/material/SliverAppBar-class.html

https://www.geeksforgeeks.org/flutter-silverappbar-widget/

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!

Deniel Kerr

Owner and Founder. Opencart

Talk to Sales
Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home