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

Remove unused scroll pos callback

Browse Source
This commit is contained in:
Shawn 2023-04-26 10:23:00 -06:00
parent c689fd60e7
commit 92c60ce18a
4 changed files with 137 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,10 +38,9 @@ part 'widgets/_title_text.dart';
part 'widgets/_top_illustration.dart'; part 'widgets/_top_illustration.dart';
class WonderEditorialScreen extends StatefulWidget { class WonderEditorialScreen extends StatefulWidget {
const WonderEditorialScreen(this.data, {Key? key, required this.onScroll, required this.contentPadding}) const WonderEditorialScreen(this.data, {Key? key, required this.contentPadding}) : super(key: key);
: super(key: key);
final WonderData data; final WonderData data;
final void Function(double scrollPos) onScroll; //final void Function(double scrollPos) onScroll;
final EdgeInsets contentPadding; final EdgeInsets contentPadding;
@override @override
@ -62,7 +61,6 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
/// Various [ValueListenableBuilders] are mapped to the _scrollPos and will rebuild when it changes /// Various [ValueListenableBuilders] are mapped to the _scrollPos and will rebuild when it changes
void _handleScrollChanged() { void _handleScrollChanged() {
_scrollPos.value = _scroller.position.pixels; _scrollPos.value = _scroller.position.pixels;
widget.onScroll.call(_scrollPos.value);
} }
@override @override
@ -168,16 +166,17 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
), ),
/// Home Btn /// Home Btn
AnimatedBuilder( /// TODO: Decide when to show the back btn, probably whenever in tab view? This should be passed down from above somewhere...
animation: _scroller, // AnimatedBuilder(
builder: (_, child) { // animation: _scroller,
return AnimatedOpacity( // builder: (_, child) {
opacity: _scrollPos.value > 0 ? 0 : 1, // return AnimatedOpacity(
duration: $styles.times.med, // opacity: _scrollPos.value > 0 ? 0 : 1,
child: child, // duration: $styles.times.med,
); // child: child,
}, // );
child: AppHeader(backIcon: AppIcons.north, isTransparent: true)), // },
// child: AppHeader(backIcon: AppIcons.north, isTransparent: true)),
], ],
), ),
), ),

182
lib/ui/screens/wonder_details/wonder_details_tab_menu.dart
View File

@ -3,6 +3,9 @@ import 'package:wonders/common_libs.dart';
class WonderDetailsTabMenu extends StatelessWidget { class WonderDetailsTabMenu extends StatelessWidget {
static double bottomPadding = 0; static double bottomPadding = 0;
static double buttonInset = 12; static double buttonInset = 12;
static const double homeBtnSize = 74;
static double get minTabSize => 25;
static const double maxTabSize = 100;
const WonderDetailsTabMenu( const WonderDetailsTabMenu(
{Key? key, {Key? key,
@ -21,92 +24,107 @@ class WonderDetailsTabMenu extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
Color iconColor = showBg ? $styles.colors.black : $styles.colors.white; Color iconColor = showBg ? $styles.colors.black : $styles.colors.white;
const double homeBtnSize = 74;
final availableSize = ((isVertical ? context.heightPx : context.widthPx) - homeBtnSize - $styles.insets.md);
final double tabBtnSize = (availableSize / 4).clamp(minTabSize, maxTabSize);
final double homeBtnBorderSize = showBg ? 6 : 2;
final double gapAmt = max(0, tabBtnSize - homeBtnSize);
// Use SafeArea padding if its more than the default padding. // Use SafeArea padding if its more than the default padding.
bottomPadding = max(context.mq.padding.bottom, $styles.insets.xs * 1.5); bottomPadding = max(context.mq.padding.bottom, $styles.insets.xs * 1.5);
return Stack( return Padding(
children: [ padding: EdgeInsets.only(
/// Background, animates in and out based on `showBg` top: isVertical ? context.mq.viewPadding.top : buttonInset,
Positioned.fill( right: isVertical ? buttonInset : 0,
child: AnimatedOpacity( ),
duration: $styles.times.fast, child: Stack(
opacity: showBg ? 1 : 0, children: [
child: Padding( /// Background, animates in and out based on `showBg`
padding: EdgeInsets.only( Positioned.fill(
top: isVertical ? context.mq.viewPadding.top : buttonInset, child: AnimatedOpacity(
right: isVertical ? buttonInset : 0, duration: $styles.times.fast,
), opacity: showBg ? 1 : 0,
child: Container( child: Padding(
decoration: BoxDecoration( padding: EdgeInsets.only(right: isVertical ? buttonInset : 0, top: isVertical ? 0 : buttonInset),
color: $styles.colors.offWhite, child: Container(
borderRadius: isVertical ? BorderRadius.only(topRight: Radius.circular(32)) : null, decoration: BoxDecoration(
color: $styles.colors.white,
borderRadius: isVertical ? BorderRadius.only(topRight: Radius.circular(32)) : null,
),
), ),
), ),
), ),
), ),
),
/// Buttons /// Buttons
/// A Stack with a row or column of tabButtons, and an illustrated homeButton sitting on top. /// A Stack with a row or column of tabButtons, and an illustrated homeButton sitting on top.
Padding( Padding(
padding: EdgeInsets.only(left: $styles.insets.sm, right: $styles.insets.xxs, bottom: bottomPadding), padding: EdgeInsets.only(left: $styles.insets.xs * 1.5, right: $styles.insets.xxs, bottom: bottomPadding),
child: Stack( child: Stack(
children: [ children: [
SizedBox( SizedBox(
width: isVertical ? null : double.infinity, width: isVertical ? null : double.infinity,
height: isVertical ? double.infinity : null, height: isVertical ? double.infinity : null,
child: FocusTraversalGroup( child: FocusTraversalGroup(
child: Flex( child: Flex(
direction: axis, direction: axis,
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: isVertical ? CrossAxisAlignment.start : CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
/// Home btn /// Home btn
_WonderHomeBtn( _WonderHomeBtn(
size: homeBtnSize, size: homeBtnSize,
wonderType: wonderType, wonderType: wonderType,
borderSize: showBg ? 6 : 2, borderSize: homeBtnBorderSize,
), ),
Gap(gapAmt),
/// Tabs /// Tabs
_TabBtn( _TabBtn(
0, 0,
tabController, tabController,
iconImg: 'editorial', iconImg: 'editorial',
label: $strings.wonderDetailsTabLabelInformation, label: $strings.wonderDetailsTabLabelInformation,
color: iconColor, color: iconColor,
axis: axis, axis: axis,
), mainAxisSize: tabBtnSize,
_TabBtn( ),
1, _TabBtn(
tabController, 1,
iconImg: 'photos', tabController,
label: $strings.wonderDetailsTabLabelImages, iconImg: 'photos',
color: iconColor, label: $strings.wonderDetailsTabLabelImages,
axis: axis, color: iconColor,
), axis: axis,
_TabBtn( mainAxisSize: tabBtnSize,
2, ),
tabController, _TabBtn(
iconImg: 'artifacts', 2,
label: $strings.wonderDetailsTabLabelArtifacts, tabController,
color: iconColor, iconImg: 'artifacts',
axis: axis, label: $strings.wonderDetailsTabLabelArtifacts,
), color: iconColor,
_TabBtn(3, tabController, axis: axis,
mainAxisSize: tabBtnSize,
),
_TabBtn(
3,
tabController,
iconImg: 'timeline', iconImg: 'timeline',
label: $strings.wonderDetailsTabLabelEvents, label: $strings.wonderDetailsTabLabelEvents,
color: iconColor, color: iconColor,
axis: axis), axis: axis,
], mainAxisSize: tabBtnSize,
),
],
),
), ),
), ),
), ],
], ),
), ),
), ],
], ),
); );
} }
} }
@ -123,7 +141,7 @@ class _WonderHomeBtn extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return CircleBtn( return CircleBtn(
onPressed: () => Navigator.of(context).pop(), onPressed: () => Navigator.of(context).pop(),
bgColor: $styles.colors.offWhite, bgColor: $styles.colors.white,
semanticLabel: $strings.wonderDetailsTabSemanticBack, semanticLabel: $strings.wonderDetailsTabSemanticBack,
child: AnimatedContainer( child: AnimatedContainer(
curve: Curves.easeOut, curve: Curves.easeOut,
@ -150,10 +168,9 @@ class _TabBtn extends StatelessWidget {
required this.color, required this.color,
required this.label, required this.label,
required this.axis, required this.axis,
required this.mainAxisSize,
}) : super(key: key); }) : super(key: key);
static const double minSize = 30;
static const double maxSize = 100;
static const double crossBtnSize = 60; static const double crossBtnSize = 60;
final int index; final int index;
@ -162,30 +179,35 @@ class _TabBtn extends StatelessWidget {
final Color color; final Color color;
final String label; final String label;
final Axis axis; final Axis axis;
final double mainAxisSize;
bool get _isVertical => axis == Axis.vertical; bool get _isVertical => axis == Axis.vertical;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return _isVertical
? SizedBox(height: mainAxisSize, width: crossBtnSize, child: Placeholder())
: SizedBox(height: crossBtnSize, width: mainAxisSize, child: Placeholder());
bool selected = tabController.index == index; bool selected = tabController.index == index;
final MaterialLocalizations localizations = MaterialLocalizations.of(context); final MaterialLocalizations localizations = MaterialLocalizations.of(context);
final iconImgPath = '${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png'; final iconImgPath = '${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png';
String tabLabel = localizations.tabLabel(tabIndex: index + 1, tabCount: tabController.length); String tabLabel = localizations.tabLabel(tabIndex: index + 1, tabCount: tabController.length);
tabLabel = '$label: $tabLabel'; tabLabel = '$label: $tabLabel';
final double mainBtnSize = (((_isVertical ? context.heightPx : context.widthPx) - 74) / 5).clamp(minSize, maxSize); final double iconSize = min(mainAxisSize, 32);
final double iconSize = min(mainBtnSize, 32);
print(context.heightPx);
return MergeSemantics( return MergeSemantics(
child: Semantics( child: Semantics(
selected: selected, selected: selected,
label: tabLabel, label: tabLabel,
child: ExcludeSemantics( child: ExcludeSemantics(
child: AppBtn.basic( child: AppBtn.basic(
padding: EdgeInsets.only(top: $styles.insets.md + $styles.insets.xs, bottom: $styles.insets.sm), padding: _isVertical
? EdgeInsets.zero
: EdgeInsets.only(top: $styles.insets.md + $styles.insets.xs, bottom: $styles.insets.sm),
onPressed: () => tabController.index = index, onPressed: () => tabController.index = index,
semanticLabel: label, semanticLabel: label,
minimumSize: _isVertical ? Size(crossBtnSize, mainBtnSize) : Size(mainBtnSize, crossBtnSize), minimumSize: _isVertical ? Size(crossBtnSize, mainAxisSize) : Size(mainAxisSize, crossBtnSize),
// Image icon // Image icon
child: Image.asset(iconImgPath, height: iconSize, width: iconSize, color: selected ? null : color), child: Image.asset(iconImgPath, height: iconSize, width: iconSize, color: selected ? null : color),
), ),

24
lib/ui/screens/wonder_details/wonders_details_screen.dart
View File

@ -25,7 +25,6 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
)..addListener(_handleTabChanged); )..addListener(_handleTabChanged);
AnimationController? _fade; AnimationController? _fade;
final _detailsHasScrolled = ValueNotifier(false);
double? _tabBarSize; double? _tabBarSize;
bool _useNavRail = false; bool _useNavRail = false;
@ -40,8 +39,6 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
setState(() {}); setState(() {});
} }
void _handleDetailsScrolled(double scrollPos) => _detailsHasScrolled.value = scrollPos > 0;
void _handleTabMenuSized(Size size) { void _handleTabMenuSized(Size size) {
setState(() { setState(() {
_tabBarSize = (_useNavRail ? size.width : size.height) - WonderDetailsTabMenu.buttonInset; _tabBarSize = (_useNavRail ? size.width : size.height) - WonderDetailsTabMenu.buttonInset;
@ -50,7 +47,7 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
_useNavRail = context.isLandscape && context.heightPx < 900; _useNavRail = context.isLandscape && context.heightPx > 250;
final wonder = wondersLogic.getData(widget.type); final wonder = wondersLogic.getData(widget.type);
int tabIndex = _tabController.index; int tabIndex = _tabController.index;
@ -65,7 +62,7 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
LazyIndexedStack( LazyIndexedStack(
index: _tabController.index, index: _tabController.index,
children: [ children: [
WonderEditorialScreen(wonder, contentPadding: menuPadding, onScroll: _handleDetailsScrolled), WonderEditorialScreen(wonder, contentPadding: menuPadding),
PhotoGallery(collectionId: wonder.unsplashCollectionId, wonderType: wonder.type), PhotoGallery(collectionId: wonder.unsplashCollectionId, wonderType: wonder.type),
ArtifactCarouselScreen(type: wonder.type, contentPadding: menuPadding), ArtifactCarouselScreen(type: wonder.type, contentPadding: menuPadding),
WonderEvents(type: widget.type, contentPadding: menuPadding), WonderEvents(type: widget.type, contentPadding: menuPadding),
@ -75,16 +72,13 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
/// Tab menu /// Tab menu
Align( Align(
alignment: _useNavRail ? Alignment.centerLeft : Alignment.bottomCenter, alignment: _useNavRail ? Alignment.centerLeft : Alignment.bottomCenter,
child: ValueListenableBuilder<bool>( child: MeasurableWidget(
valueListenable: _detailsHasScrolled, onChange: _handleTabMenuSized,
builder: (_, value, ___) => MeasurableWidget( child: WonderDetailsTabMenu(
onChange: _handleTabMenuSized, tabController: _tabController,
child: WonderDetailsTabMenu( wonderType: wonder.type,
tabController: _tabController, showBg: showTabBarBg,
wonderType: wonder.type, axis: _useNavRail ? Axis.vertical : Axis.horizontal),
showBg: showTabBarBg,
axis: _useNavRail ? Axis.vertical : Axis.horizontal),
),
), ),
), ),
], ],

26
pubspec.lock
View File

@ -125,10 +125,10 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: characters name: characters
sha256: e6a326c8af69605aec75ed6c187d06b349707a27fbff8222ca9cc2cff167975c sha256: "04a925763edad70e8443c99234dc3328f442e811f1d8fd1a72f1c8ad0f69a605"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.2.1" version: "1.3.0"
checked_yaml: checked_yaml:
dependency: transitive dependency: transitive
description: description:
@ -157,10 +157,10 @@ packages:
dependency: "direct main" dependency: "direct main"
description: description:
name: collection name: collection
sha256: cfc915e6923fe5ce6e153b0723c753045de46de1b4d63771530504004a45fae0 sha256: "4a07be6cb69c84d677a6c3096fcf960cc3285a8330b4603e0d463d15d9bd934c"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.17.0" version: "1.17.1"
convert: convert:
dependency: transitive dependency: transitive
description: description:
@ -564,10 +564,10 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: intl name: intl
sha256: "910f85bce16fb5c6f614e117efa303e85a1731bb0081edf3604a2ae6e9a3cc91" sha256: a3715e3bc90294e971cb7dc063fbf3cd9ee0ebf8604ffeafabd9e6f16abbdbe6
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "0.17.0" version: "0.18.0"
io: io:
dependency: transitive dependency: transitive
description: description:
@ -580,10 +580,10 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: js name: js
sha256: "5528c2f391ededb7775ec1daa69e65a2d61276f7552de2b5f7b8d34ee9fd4ab7" sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "0.6.5" version: "0.6.7"
js_wrapping: js_wrapping:
dependency: transitive dependency: transitive
description: description:
@ -644,10 +644,10 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: meta name: meta
sha256: "6c268b42ed578a53088d834796959e4a1814b5e9e164f147f580a386e5decf42" sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.8.0" version: "1.9.1"
mime: mime:
dependency: transitive dependency: transitive
description: description:
@ -700,10 +700,10 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: path name: path
sha256: db9d4f58c908a4ba5953fcee2ae317c94889433e5024c27ce74a37f94267945b sha256: "8829d8a55c13fc0e37127c29fedf290c102f4e40ae94ada574091fe0ff96c917"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.8.2" version: "1.8.3"
path_parsing: path_parsing:
dependency: transitive dependency: transitive
description: description:
@ -1270,5 +1270,5 @@ packages:
source: hosted source: hosted
version: "2.0.2" version: "2.0.2"
sdks: sdks:
dart: ">=2.19.0-0 <3.0.0" dart: ">=3.0.0-0 <4.0.0"
flutter: ">=3.7.0-0" flutter: ">=3.7.0-0"