Collapsible AppBar

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

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

Also we are going to use the CarouselSlider.

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

First we are going to discuss on 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 abililty of scrollable or collapsible AppBar. It also allows us the create the floating app bar effect. It gets expand and collapase when the AppBar is scrolled up and scrolled down respectively.

CarouselSlider

Carousel Slider is one of the most popular image slider 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.

In this blog we are going to create an app that behaves as in the image below:

Collapsible AppBar

Let’s Dig In

First let’s add our needed packages in pubsec.yaml.

carousel_slider: ^4.1.1
flutter_staggered_grid_view: ^0.4.1

Also give path of the images as

assets:
  - assets/images/

Then create the folder named utils inside the lib folder. In this folder we keep our theme and the data that will be used in our application.

Inside utils create a file named dummy_model.dart. Here we keep our data that we are going to use in application.

dummy_model.dart

collapsible appbar

After that inside utils let’s create the other file named my_theme.dart. Here we keep our all the colors and theme of our application.

my_theme.dart

collapsible appbar

Bingo we just created our utilities for our project.

After that, lets move forward on creating the our widgets. We are creating the widgets separately so that they can be used in other parts of the application.

Here we are going to create the reusable widgets that we can easily access. Like the term reusable defines these widgets we created can used used from all over the application with the same or different behavior. These widgets behavior can be handled from different classes of application with the props. It is one of the great feature of flutter.

For that, create the folder named widget inside the lib folder.

All right the first widget we are going to create is our appbar. Create the new file named custom_appbar.dart .

custom_appbar.dart

collapsible appbar

Finally we are done configuring and creating our necessary widgets.

Moving Forward Now we create our homepage.

Create the home_screen.dart inside the lib folder.

home_screen.dart

Collapsible appbar

At last our main.dart file

main.dart

Let’s get connected

We can be friends. Find on Facebook, Linkedin, Github, Youtube, BuyMeACoffee, and Instagram.

Visit: Flutter Junction

Contribute: BuyMeACoffee

Conclusion

I hope this article is helpful to you and you learned new things. I have used various things in this article that might be new for some of you.

If you learned something new or want to suggest something then please let me know in the comment.

If you loved the article click on 👏 icon which provides motivation on delivering you all with the new things.

Also follow to get updated on exciting articles and projects.

Learning by sharing gives great impact in learning process and making the community bigger and bigger.

Sharing is a magnet that attracts other enthusiast towards you.

Hence, lets take a small step on making our learning community bigger.

Share this article with your friends or tweet about this article if you loved it.

Get full at:

GitHub - nbnD/collapsible_appbar