Collapsible App Bar Flutter

 AppBar widget is one of the most used and integral part of any mobile app which is used to display important information such as page title, tabs, logo, and action icons that can be used for various purposes like navigation and many more.

Scrolling App bar is one of the special abilities that is widely used in modern applications.

Also, we are going to use the CarouselSlider.

Note: The image of products used in this application are from Nykaa.

First, we are going to discuss the widgets we are going to use in this application.

NestedScrollView

It is a ScrollView inside which other scrolling views can be used , with their scroll positions being intrinsically linked. The most common use case for this widget is a scrollable view with a flexible SliverAppBar containing a TabBar in the header (built by headerSliverBuilder, and with a TabBarView in the body, such that the scrollable view’s contents vary based on which tab is visible.

SliverAppBar

SliverAppBar is the material widget in flutter which provides ability of scrollable or collapsible AppBar. It also allows us the create the floating app bar effect. It gets expanded and collapses when the AppBar is scrolled up and scrolled down respectively.

CarouselSlider

Carousel Slider is one of the most popular image sliders used nowadays in most apps. These Carousel Sliders are mostly seen in various eCommerce sites such as Amazon, Flipkart, Myntra, and many more. Displaying the images in a slider gives an attractive User Experience. As these sliders are automated you can get to see various types of images and content in them.



Learn more on this link.





Live example:




0 comments:

Post a Comment