Want to put a card into a sliver in flutter app bar? You can do it using SliverPersistentHeaderDelegate and Stack widget, check my sample :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | class PlayingSliversState extends State<PlayingSlivers> { @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: CustomScrollView( slivers: <Widget>[ SliverPersistentHeader( pinned: true, floating: true, delegate: CustomSliverDelegate( expandedHeight: 120, ), ), SliverFillRemaining( child: Center( child: Text("data"), ), ), ], ), ), ); } } class CustomSliverDelegate extends SliverPersistentHeaderDelegate { final double expandedHeight; final bool hideTitleWhenExpanded; CustomSliverDelegate({ @required this.expandedHeight, this.hideTitleWhenExpanded = true, }); @override Widget build( BuildContext context, double shrinkOffset, bool overlapsContent) { final appBarSize = expandedHeight - shrinkOffset; final cardTopPosition = expandedHeight / 2 - shrinkOffset; final proportion = 2 - (expandedHeight / appBarSize); final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion; return SizedBox( height: expandedHeight + expandedHeight / 2, child: Stack( children: [ SizedBox( height: appBarSize < kToolbarHeight ? kToolbarHeight : appBarSize, child: AppBar( backgroundColor: Colors.green, leading: IconButton( icon: Icon(Icons.menu), onPressed: () {}, ), elevation: 0.0, title: Opacity( opacity: hideTitleWhenExpanded ? 1.0 - percent : 1.0, child: Text("Test")), ), ), Positioned( left: 0.0, right: 0.0, top: cardTopPosition > 0 ? cardTopPosition : 0, bottom: 0.0, child: Opacity( opacity: percent, child: Padding( padding: EdgeInsets.symmetric(horizontal: 30 * percent), child: Card( elevation: 20.0, child: Center( child: Text("Header"), ), ), ), ), ), ], ), ); } @override double get maxExtent => expandedHeight + expandedHeight / 2; @override double get minExtent => kToolbarHeight; @override bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) { return true; } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
