44/// Email: niebin312@gmail.com
55///
66import "package:flutter/material.dart" ;
7- import '../view/app_bar.dart' ;
87import '../constant/main_const.dart' ;
8+ import "../constant/size_const.dart" ;
9+ import 'package:flutter/rendering.dart' ;
10+
11+ const BAR_FONT_SIZE = 21.0 ;
12+ const BAR_TITLE_COLOR = Colors .white;
13+ const IMAGES = [
14+ "pic_01" ,
15+ "pic_02" ,
16+ "pic_04" ,
17+ "pic_05" ,
18+ "pic_06" ,
19+ "pic_07" ,
20+ "pic_08" ,
21+ "pic_09"
22+ ];
23+
24+ Image _getAssetImage (name) {
25+ return Image .asset (
26+ "assets/$name .jpg" ,
27+ fit: BoxFit .cover,
28+ );
29+ }
30+
31+ class HeaderDelegate implements SliverPersistentHeaderDelegate {
32+ HeaderDelegate ({
33+ Key key,
34+ this .maxExtent,
35+ this .minExtent,
36+ this .group,
37+ this .onClick,
38+ });
39+
40+ final VoidCallback onClick;
41+ final GroupType group;
42+ double maxExtent;
43+ double minExtent;
44+
45+ @override
46+ Widget build (
47+ BuildContext context, double shrinkOffset, bool overlapsContent) {
48+ print ("shrinkOffset:$shrinkOffset " );
49+ return Stack (
50+ fit: StackFit .expand,
51+ children: < Widget > [
52+ _getAssetImage ("pic_03" ),
53+ Container (
54+ decoration: BoxDecoration (
55+ gradient: LinearGradient (
56+ colors: [
57+ Colors .transparent,
58+ Colors .black54,
59+ ],
60+ stops: [0.2 , 1.0 ],
61+ begin: Alignment .topCenter,
62+ end: Alignment .bottomCenter,
63+ tileMode: TileMode .repeated,
64+ ),
65+ ),
66+ ),
67+ Positioned (
68+ top: 4.0 ,
69+ left: 4.0 ,
70+ child: SafeArea (
71+ child: IconButton (
72+ icon: Icon (
73+ BAR_ICONS [this .group.index],
74+ color: BAR_TITLE_COLOR ,
75+ ),
76+ onPressed: onClick)),
77+ ),
78+ Container (
79+ alignment: shrinkOffset > 100
80+ ? AlignmentDirectional .topCenter
81+ : AlignmentDirectional .bottomStart,
82+ margin: shrinkOffset > 100
83+ ? EdgeInsets .only (top: 40.0 )
84+ : EdgeInsets .only (left: 40.0 , bottom: 20.0 ),
85+ child: Text (
86+ BOTTOM_TITLES [ItemType .hero.index],
87+ style: TextStyle (color: BAR_TITLE_COLOR , fontSize: BAR_FONT_SIZE ),
88+ ),
89+ )
90+ ],
91+ );
92+ }
93+
94+ @override
95+ bool shouldRebuild (SliverPersistentHeaderDelegate oldDelegate) => true ;
96+
97+ @override
98+ FloatingHeaderSnapConfiguration get snapConfiguration => null ;
99+ }
9100
10101class HeroScreen extends StatefulWidget {
11102 HeroScreen ({Key key, this .group, this .onClick}) : super (key: key);
@@ -19,16 +110,34 @@ class HeroScreen extends StatefulWidget {
19110class _HeroState extends State <HeroScreen > {
20111 @override
21112 Widget build (BuildContext context) {
22- return Scaffold (
23- appBar: TopAppBar (
24- group: widget.group,
25- itemType: ItemType .hero,
26- onClick: widget.onClick,
27- bottomView: null ,
113+ return CustomScrollView (slivers: [
114+ SliverPersistentHeader (
115+ pinned: true ,
116+ delegate: HeaderDelegate (
117+ maxExtent: 200 ,
118+ minExtent: 100 ,
119+ group: widget.group,
120+ onClick: widget.onClick,
121+ ),
28122 ),
29- body: Text (
30- BOTTOM_TITLES [ItemType .hero.index],
123+ SliverGrid (
124+ gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent (
125+ maxCrossAxisExtent: 200.0 ,
126+ mainAxisSpacing: 10.0 ,
127+ crossAxisSpacing: 10.0 ,
128+ childAspectRatio: 1.0 ,
129+ ),
130+ delegate: SliverChildBuilderDelegate (
131+ (context, index) {
132+ var name = IMAGES [index % 8 ];
133+ return Container (
134+ margin: EdgeInsets .symmetric (vertical: 2.0 ),
135+ child: _getAssetImage (name),
136+ );
137+ },
138+ childCount: IMAGES .length,
139+ ),
31140 ),
32- );
141+ ] );
33142 }
34143}
0 commit comments