bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Apply max width to editorial list content

Browse Source
This commit is contained in:
Shawn 2022-10-07 11:30:00 -06:00
parent f98cb93f23
commit 3721d75a8e
1 changed files with 54 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
lib/ui/screens/editorial/editorial_screen.dart
View File

@ -81,7 +81,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
valueListenable: _scrollPos, valueListenable: _scrollPos,
builder: (_, value, __) { builder: (_, value, __) {
return Container( return Container(
color: widget.data.type.bgColor.withOpacity(_scrollPos.value > 1000 ? 0 : 1), color: widget.data.type.bgColor.withOpacity(1),
); );
}, },
), ),
@ -103,58 +103,64 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
), ),
/// Scrolling content - Includes an invisible gap at the top, and then scrolls over the illustration /// Scrolling content - Includes an invisible gap at the top, and then scrolls over the illustration
CustomScrollView( TopCenter(
primary: false, child: SizedBox(
controller: _scroller, width: $styles.sizes.maxContentWidth,
cacheExtent: 1000, child: CustomScrollView(
slivers: [ primary: false,
/// Invisible padding at the top of the list, so the illustration shows through the btm controller: _scroller,
SliverToBoxAdapter( scrollBehavior: ScrollConfiguration.of(context).copyWith(),
child: SizedBox(height: illustrationHeight), cacheExtent: 1000,
), slivers: [
/// Invisible padding at the top of the list, so the illustration shows through the btm
SliverToBoxAdapter(
child: SizedBox(height: illustrationHeight),
),
/// Text content, animates itself to hide behind the app bar as it scrolls up /// Text content, animates itself to hide behind the app bar as it scrolls up
SliverToBoxAdapter( SliverToBoxAdapter(
child: ValueListenableBuilder<double>( child: ValueListenableBuilder<double>(
valueListenable: _scrollPos, valueListenable: _scrollPos,
builder: (_, value, child) { builder: (_, value, child) {
double offsetAmt = max(0, value * .3); double offsetAmt = max(0, value * .3);
double opacity = (1 - offsetAmt / 150).clamp(0, 1); double opacity = (1 - offsetAmt / 150).clamp(0, 1);
return Transform.translate( return Transform.translate(
offset: Offset(0, offsetAmt), offset: Offset(0, offsetAmt),
child: Opacity(opacity: opacity, child: child), child: Opacity(opacity: opacity, child: child),
); );
}, },
child: _TitleText(widget.data, scroller: _scroller), child: _TitleText(widget.data, scroller: _scroller),
), ),
), ),
/// Collapsing App bar, pins to the top of the list /// Collapsing App bar, pins to the top of the list
SliverAppBar( SliverAppBar(
pinned: true, pinned: true,
collapsedHeight: minAppBarHeight, collapsedHeight: minAppBarHeight,
toolbarHeight: minAppBarHeight, toolbarHeight: minAppBarHeight,
expandedHeight: maxAppBarHeight, expandedHeight: maxAppBarHeight,
backgroundColor: Colors.transparent, backgroundColor: Colors.transparent,
elevation: 0, elevation: 0,
leading: SizedBox.shrink(), leading: SizedBox.shrink(),
flexibleSpace: SizedBox.expand( flexibleSpace: SizedBox.expand(
child: _AppBar( child: _AppBar(
widget.data.type, widget.data.type,
scrollPos: _scrollPos, scrollPos: _scrollPos,
sectionIndex: _sectionIndex, sectionIndex: _sectionIndex,
).animate().fade(duration: $styles.times.med, delay: $styles.times.pageTransition), ).animate().fade(duration: $styles.times.med, delay: $styles.times.pageTransition),
), ),
), ),
/// Editorial content (text and images) /// Editorial content (text and images)
_ScrollingContent(widget.data, scrollPos: _scrollPos, sectionNotifier: _sectionIndex), _ScrollingContent(widget.data, scrollPos: _scrollPos, sectionNotifier: _sectionIndex),
/// Bottom padding /// Bottom padding
SliverToBoxAdapter( SliverToBoxAdapter(
child: Container(height: 150, color: $styles.colors.offWhite), child: Container(height: 150, color: $styles.colors.offWhite),
),
],
), ),
], ),
), ),
/// Home Btn /// Home Btn