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.
 |
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
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
.jpg) |
.jpg)
|
Article Contributed By :
|
|
|
|
|
1497 Views |
|