SliverAppBar Flutter How to make Scrollable AppBar or Collapsible AppBar

Published January 26, 2022

In this flutter tutorial example we will cover what is SliverAppBar and How to create Collapsible Appbar in flutter application. SliverAppBar is a Flutter Material widget which will be acts like AppBar. With using SliverAppBar we can make Scrollable appbar or Collapsible AppBar.

Before going to implement SliverAppBar first we should know about what is Sliver, Sliver is Custom Scrollable area Slivers are more usable when we wants to put all widgets inside scrollable area.

Flutter provided different types of Slivers.

  • SliverAppBar
  • SliverList
  • SliverGrid
  • SliverToBoxAdapter
Flutter SliverAppBar - Create Collapse Appbar

 

How to Use Slivers in Flutter?

If we want to use Slivers we should always put slivers inside CustomScrollView widget and we can add multiple slivers to make them scrollable together.

Here we talking about CustomScrollView, so What is CustomScrollView?

In Flutter CustomScrollView is a widget which will give option to make scrollable content in different ways like list, grid, appbar...

 

const CustomScrollView({
  Key? key,
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController? controller,
  bool? primary,
  ScrollPhysics? physics,
  ScrollBehavior? scrollBehavior,
  bool shrinkWrap = false,
  Key? center,
  double anchor = 0.0,
  double? cacheExtent,
  this.slivers = const <Widget>[],
  int? semanticChildCount,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  String? restorationId,
  Clip clipBehavior = Clip.hardEdge,
}) 

 

This widget has property call sliver which we can pass different types of slivers like SliverList,SliverGrid, SliverAppbar, SliverToBoxAdapter

 

SliverAppBar Constructor

 SliverAppBar({
  Key? key,
  this.leading,
  this.automaticallyImplyLeading = true,
  this.title,
  this.actions,
  this.flexibleSpace,
  this.bottom,
  this.elevation,
  this.shadowColor,
  this.forceElevated = false,
  this.backgroundColor,
  this.foregroundColor,

  this.brightness,
  this.iconTheme,
  this.actionsIconTheme,

  this.textTheme,
  this.primary = true,
  this.centerTitle,
  this.excludeHeaderSemantics = false,
  this.titleSpacing,
  this.collapsedHeight,
  this.expandedHeight,
  this.floating = false,
  this.pinned = false,
  this.snap = false,
  this.stretch = false,
  this.stretchTriggerOffset = 100.0,
  this.onStretchTrigger,
  this.shape,
  this.toolbarHeight = kToolbarHeight,
  this.leadingWidth,
  this.backwardsCompatibility,
  this.toolbarTextStyle,
  this.titleTextStyle,
  this.systemOverlayStyle,
})

 

Properties of SliverAppBar

  • actions: The actions property will be used to create widgets right of the appBar title. Most of the time we will use Icons to do actions like share,notifications...
  • title: This title property will be used to set the title to the SliverAppBar. It will be like AppBar title to give the name of the application.
  • leading: This leading property will be used to define a widget on left side. Generally, we will add icons like back button, Menu Drawer widget.
  • backgroundColor: This property will be used to set a background color to the sliver app bar.
  • bottom: The bottom property will be used to set the space form the bottom of the title
  • expandedHeight: If we want to set a respected heigh to expand our widgets then we will use expandedHeight property which we specify the maximum height to the app bar that can be expanded while scrolling
  • floating: The floating property will tell the users to whether the app bar will be visible or not when scrolls towards the app bar.
  • flexibleSpace: The flexibleSpace property will be used to set a widget which is stacked behind the toolbar and the tab bar. The height of the flexibleSpace is the same as the app bar height

 

SliverList

This SliverList is one the Sliver widget which will arange the list of items in linear ways.

Constructor

const SliverList({
  Key? key,
  required SliverChildDelegate delegate,
}) 

 

This SliverList widget has propery called delegate where we will set the child items. We can set the childresn to the SliverList by using SliverChildBuilderDelegate or SliverChildListDelegate

In this example we will create a simple collapse appbar with SliverAppbar and SliverList widgets.

 

Step 1: Create Flutter Application

Step 2: Add below code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final title = 'RRTutors';

    return MaterialApp(
      home: SafeArea(
        child: Scaffold(

            body: CustomScrollView(

              slivers: <Widget>[
SliverAppBar(expandedHeight: 20,backgroundColor: Color(0XFF34495e ),),
                SliverAppBar(
                  snap: false,
                  pinned: false,
                  floating: false,
                  expandedHeight: 120,
                  flexibleSpace:Container(
                    margin: EdgeInsets.only(bottom:20 ),
                    decoration: BoxDecoration(
                       color: Color(0XFF34495e ),
                        borderRadius: BorderRadius.vertical(bottom:Radius.circular(20))
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: FlexibleSpaceBar(
                        centerTitle: true,
                        title:  Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 32.0,vertical: 8),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text("Balance \n \$250",style: TextStyle(fontSize: 16,color: Colors.white),),
                              Icon(Icons.wallet_membership,color: Colors.white,)
                            ],
                          ),
                        ),
                      ),
                    ),
                  ), //FlexibleSpaceBar

                  backgroundColor: Colors.white,

                ),
                SliverAppBar(
                  snap: false,
                  pinned: false,
                  floating: false,
                  expandedHeight:80,
                  flexibleSpace:FlexibleSpaceBar(
                    centerTitle: true,
                    title:  Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 32.0,vertical: 8),
                      child: Container(
height: 35,
                        child: TextField(

                          decoration: InputDecoration(
                            hintText: 'Enter a product name ',
                            hintStyle: TextStyle(fontSize: 12),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(32),
                              borderSide: BorderSide(
                                width: 0,
                                style: BorderStyle.solid,
                              ),
                            ),
                            filled: true,
                            contentPadding: EdgeInsets.symmetric(horizontal: 10),

                          ),
                        ),
                      ),
                    ),
                  ), //FlexibleSpaceBar

                  backgroundColor: Colors.white,

                ),
                SliverAppBar(
                  backgroundColor: Color(0XFF34495e ),
                  pinned: true,
                  flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title:  DefaultTabController(
                      initialIndex: 0,
                      length: 2,
                      child: TabBar(
                        indicatorSize: TabBarIndicatorSize.label,
                          indicator: BoxDecoration(
                            border: Border.all(width: 0)
                          ),
                          labelColor: Colors.white,
labelStyle: TextStyle(fontSize: 20,),
                          tabs: [
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("Products"),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("Earnings"),
                            ),
                          ]),
                    ),
                    //Text
                    //Images.network
                  ),
                ),//SliverAppBar
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                        (context, index) => ListTile(
                      tileColor: (index % 2 == 0) ? Colors.white : Colors.green[50],
                      title:      Column(
                        children: [


                          Divider(

                            height: 0.0,

                            color: Colors.grey,

                            thickness: 1.0,

                          ),

                          Row(

                            children: [

                              Expanded(

                                child: Padding(

                                  padding: EdgeInsets.all(16.0),

                                  child: Column(

                                    children: [

                                      Text('Date'),

                                      FittedBox(

                                        child: Text(

                                          '20/20',

                                          style: TextStyle(

                                            fontSize: 18.0,

                                            fontWeight: FontWeight.w600,

                                          ),

                                        ),

                                      )

                                    ],

                                  ),

                                ),

                              ),

                              Expanded(

                                child: Padding(

                                  padding: EdgeInsets.all(16.0),

                                  child: Column(

                                    children: [

                                      Text('Time'),

                                      FittedBox(

                                        child: Text(

                                          '9.00PM',

                                          style: TextStyle(

                                            fontSize: 18.0,

                                            fontWeight: FontWeight.w600,

                                          ),

                                        ),

                                      )

                                    ],

                                  ),

                                ),

                              ),

                              Expanded(

                                child: Padding(

                                  padding: EdgeInsets.all(16.0),

                                  child: Column(

                                    children: [

                                      Text('Price'),

                                      FittedBox(

                                        child: Text(

                                          '\$20.00',

                                          style: TextStyle(

                                            fontSize: 18.0,

                                            fontWeight: FontWeight.w600,

                                          ),

                                        ),

                                      )

                                    ],

                                  ),

                                ),

                              ),]
                              ),
                          Container(

                            width: double.infinity,

                            height: 50,

                            color: Colors.blue,

                            child: Center(

                              child: InkWell(

                                child: Text(

                                  'Add Products',

                                  style: TextStyle(

                                    color: Colors.white,

                                    fontSize: 18.0,

                                    fontWeight: FontWeight.bold,

                                  ),

                                ),

                                onTap: () {

                                  print('Add Products');

                                },

                              ),

                            ),

                          ),
                        ],
                      ), //Center
                    ), //ListTile
                    childCount: 51,
                  ), //SliverChildBuildDelegate
                ) //SliverList
              ], //<Widget>[]
            ) //CustonScrollView
        ),
      ), //Scaffold
      debugShowCheckedModeBanner:false,
      // Remove debug banner for proper
      // view of setting icon
    ); //MaterialApp
  }
}

 

Step 3: Run application

SliverAppBar - Expand Appbar flutter

 

 

SliverAppBar - Expand Appbar flutter 2

 

Download Source code

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

713 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions