fix top bar

Crisis2010 · Jan 29, 2022 · a4152b7 · a4152b7
1 parent 335b52f
commit a4152b7
Show file tree

Hide file tree

Showing 12 changed files with 456 additions and 184 deletions.
diff --git a/...ollable_bottom_sheet/lib/widgets/pages_for_pagination_motion/meme_bottom_sheet_pages.dart b/...ollable_bottom_sheet/lib/widgets/pages_for_pagination_motion/meme_bottom_sheet_pages.dart
@@ -50,12 +50,9 @@ ScrollableBottomSheetPage _secondPage(BuildContext context) {
     primaryButtonEnabled.value = !_bothTextFieldsEmpty;
   });
   return ScrollableBottomSheetPage(
-    title: Padding(
-      padding: EdgeInsets.only(top: 16),
-      child: Text(
-        "Add your text",
-        style: _titleTextStyle(context),
-      ),
+    title: Text(
+      "Add your text",
+      style: _titleTextStyle(context),
     ),
     appbarTitle: "Add your text",
     heroImageHeight: 250,

diff --git a/...ttom_sheet/lib/widgets/pages_for_scroll_motion/meme_bottom_sheet_pages_scroll_motion.dart b/...ttom_sheet/lib/widgets/pages_for_scroll_motion/meme_bottom_sheet_pages_scroll_motion.dart
@@ -41,20 +41,13 @@ ScrollableBottomSheetPage _pageWithoutHero(BuildContext context) {
 }
 
 ScrollableBottomSheetPage _pageWithHero(BuildContext context) {
-  final primaryButtonEnabled = ValueNotifier(!_bothTextFieldsEmpty);
-  Listenable.merge([_topText, _bottomText]).addListener(() {
-    primaryButtonEnabled.value = !_bothTextFieldsEmpty;
-  });
   return ScrollableBottomSheetPage(
-    title: Padding(
-      padding: EdgeInsets.only(top: 16),
-      child: Text(
-        "Story of the cat",
-        style: _titleTextStyle(context),
-      ),
+    title: Text(
+      "Story of the meme",
+      style: _titleTextStyle(context),
     ),
     heroImageHeight: 250,
-    appbarTitle: "Story of the cat",
+    appbarTitle: "Story of the meme",
     heroImage: ValueListenableBuilder(
       valueListenable: _selectedMemeIndex,
       builder: (BuildContext context, value, Widget? child) {
@@ -72,10 +65,11 @@ ScrollableBottomSheetPage _pageWithHero(BuildContext context) {
       ),
     ),
     actionListenable: ValueNotifier(() {
-      _pageIndexNotifier.value = 2;
+      _setToDefault();
+      Navigator.maybePop(context);
     }),
-    actionEnabledListenable: primaryButtonEnabled,
-    actionTextListenable: ValueNotifier("Generate"),
+    actionEnabledListenable: ValueNotifier(true),
+    actionTextListenable: ValueNotifier("Done"),
     onClosePressed: () {
       _setToDefault();
       Navigator.maybePop(context);

diff --git a/...heet/lib/widgets/scrollablebottomsheet/current/current_main_content_animated_builder.dart b/...heet/lib/widgets/scrollablebottomsheet/current/current_main_content_animated_builder.dart
@@ -36,15 +36,13 @@ class CurrentMainContentAnimatedBuilder extends StatefulWidget {
 }
 
 class _CurrentMainContentAnimatedBuilderState extends State<CurrentMainContentAnimatedBuilder> {
-  late Animation<double> _sizeFactor;
-  bool firstTick = true;
+  Animation<double>? _sizeFactor;
 
   @override
   void initState() {
     super.initState();
-    _sizeFactor = Tween<double>(begin: 0.0, end: 1.0).animate(widget.controller);
     widget.controller.addListener(() {
-      if (firstTick) {
+      if (_sizeFactor == null) {
         final currentHeight = widget.currentOffstagedMainContentKey.currentContext!.size!.height;
         final outgoingHeight = widget.outgoingOffstagedMainContentKey.currentContext!.size!.height;
         _sizeFactor = Tween<double>(begin: outgoingHeight / currentHeight, end: 1.0).animate(
@@ -53,7 +51,6 @@ class _CurrentMainContentAnimatedBuilderState extends State<CurrentMainContentAn
             curve: const Interval(0 / 350, 300 / 350, curve: Curves.fastOutSlowIn),
           ),
         );
-        firstTick = false;
       }
     });
   }
@@ -66,7 +63,7 @@ class _CurrentMainContentAnimatedBuilderState extends State<CurrentMainContentAn
         return SizeTransition(
           axis: Axis.vertical,
           axisAlignment: -1,
-          sizeFactor: _sizeFactor,
+          sizeFactor: _sizeFactor ?? Tween<double>(begin: 0.0, end: 1.0).animate(widget.controller),
           child: Opacity(
             opacity: widget._opacity.value,
             child: LayoutBuilder(

diff --git a/...et/lib/widgets/scrollablebottomsheet/outgoing/outgoing_main_content_animated_builder.dart b/...et/lib/widgets/scrollablebottomsheet/outgoing/outgoing_main_content_animated_builder.dart
@@ -36,15 +36,13 @@ class OutgoingMainContentAnimatedBuilder extends StatefulWidget {
 }
 
 class _OutgoingMainContentAnimatedBuilderState extends State<OutgoingMainContentAnimatedBuilder> {
-  late Animation<double> _sizeFactor;
-  bool firstTick = true;
+  Animation<double>? _sizeFactor;
 
   @override
   void initState() {
     super.initState();
-    _sizeFactor = Tween<double>(begin: 1.0, end: 0.0).animate(widget.controller);
     widget.controller.addListener(() {
-      if (firstTick) {
+      if (_sizeFactor == null) {
         final currentHeight = widget.currentOffstagedMainContentKey.currentContext!.size!.height;
         final outgoingHeight = widget.outgoingOffstagedMainContentKey.currentContext!.size!.height;
         _sizeFactor = Tween<double>(begin: 1.0, end: currentHeight / outgoingHeight).animate(
@@ -53,7 +51,6 @@ class _OutgoingMainContentAnimatedBuilderState extends State<OutgoingMainContent
             curve: const Interval(0 / 350, 300 / 350, curve: Curves.fastOutSlowIn),
           ),
         );
-        firstTick = false;
       }
     });
   }
@@ -66,7 +63,7 @@ class _OutgoingMainContentAnimatedBuilderState extends State<OutgoingMainContent
         return SizeTransition(
           axis: Axis.vertical,
           axisAlignment: -1,
-          sizeFactor: _sizeFactor,
+          sizeFactor: _sizeFactor ?? Tween<double>(begin: 1.0, end: 0.0).animate(widget.controller),
           child: Opacity(
             opacity: widget._opacity.value,
             child: LayoutBuilder(

diff --git a/...le_bottom_sheet/lib/widgets/scrollablebottomsheet/scrollable_bottom_sheet_hero_image.dart b/...le_bottom_sheet/lib/widgets/scrollablebottomsheet/scrollable_bottom_sheet_hero_image.dart
@@ -1,6 +1,5 @@
-import 'dart:math';
-
 import 'package:flutter/material.dart';
+import 'package:multi_page_scrollable_bottom_sheet/widgets/scrollablebottomsheet/transformation_utils.dart';
 
 class ScrollableBottomSheetHeroImage extends StatelessWidget {
   final Widget heroImage;
@@ -56,25 +55,18 @@ class _HeroImageFlowDelegate extends FlowDelegate {
     final currentScrollPosition = scrollPosition.pixels;
 
     /// Calculate scale
-    final _scaleStart = 1.1;
-    final _scaleEnd = 1.0;
-    double scale = _calculatePropertyValue(
-      currentScrollPosition: currentScrollPosition,
-      startPointInPx: 0,
-      endPointInPx: heroImageHeight - topBarHeight,
-      lowerLimit: min(_scaleStart, _scaleEnd),
-      upperLimit: max(_scaleStart, _scaleEnd),
-    );
+    double scale = calculateTransformationValue(
+        startValue: 1.1,
+        endValue: 1.0,
+        rangeInPx: heroImageHeight - topBarHeight,
+        progressInRangeInPx: currentScrollPosition);
 
     /// Calculate opacity
-    final _opacityStart = 1.0;
-    final _opacityEnd = 0.0;
-    double opacity = _calculatePropertyValue(
-      currentScrollPosition: currentScrollPosition,
-      startPointInPx: (heroImageHeight / 2) - topBarHeight,
-      endPointInPx: heroImageHeight - topBarHeight,
-      lowerLimit: _opacityEnd,
-      upperLimit: _opacityStart,
+    double opacity = calculateTransformationValue(
+      rangeInPx: heroImageHeight / 2,
+      progressInRangeInPx: currentScrollPosition - ((heroImageHeight / 2) - topBarHeight),
+      startValue: 1.0,
+      endValue: 0.0,
     );
 
     flowPaintingContext.paintChild(
@@ -87,21 +79,7 @@ class _HeroImageFlowDelegate extends FlowDelegate {
   @override
   bool shouldRepaint(covariant _HeroImageFlowDelegate oldDelegate) {
     return heroImageHeight != oldDelegate.heroImageHeight ||
+        scrollPosition != oldDelegate.scrollPosition ||
         topBarHeight != oldDelegate.topBarHeight;
   }
-
-  double _calculatePropertyValue({
-    required double currentScrollPosition,
-    required double startPointInPx,
-    required double endPointInPx,
-    required double lowerLimit,
-    required double upperLimit,
-  }) {
-    final distanceInPx = endPointInPx - startPointInPx;
-    final progressInPx = currentScrollPosition - startPointInPx;
-    final progress = progressInPx / distanceInPx;
-
-    final rawValue = upperLimit - (progress * (upperLimit - lowerLimit));
-    return rawValue.clamp(lowerLimit, upperLimit);
-  }
 }
diff --git a/..._bottom_sheet/lib/widgets/scrollablebottomsheet/scrollable_bottom_sheet_main_content.dart b/..._bottom_sheet/lib/widgets/scrollablebottomsheet/scrollable_bottom_sheet_main_content.dart
@@ -1,4 +1,3 @@
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:multi_page_scrollable_bottom_sheet/widgets/buttons/primary_button.dart';
 import 'package:multi_page_scrollable_bottom_sheet/widgets/scrollablebottomsheet/scrollable_bottom_sheet_hero_image.dart';
@@ -13,6 +12,7 @@ class ScrollableBottomSheetMainContent extends StatelessWidget {
   final Widget content;
   final bool hasActionButton;
   final Widget title;
+  final double titleTopPadding;
 
   const ScrollableBottomSheetMainContent({
     Key? key,
@@ -25,6 +25,7 @@ class ScrollableBottomSheetMainContent extends StatelessWidget {
     required this.content,
     required this.hasActionButton,
     required this.title,
+    required this.titleTopPadding,
   }) : super(key: key);
 
   @override
@@ -57,6 +58,7 @@ class ScrollableBottomSheetMainContent extends StatelessWidget {
                 padding: EdgeInsetsDirectional.only(
                   start: edgeInsetsDirectional.start,
                   end: edgeInsetsDirectional.end,
+                  top: titleTopPadding,
                 ),
                 child: KeyedSubtree(
                   key: titleKey,

diff --git a/...able_bottom_sheet/lib/widgets/scrollablebottomsheet/scrollable_bottom_sheet_skeleton.dart b/...able_bottom_sheet/lib/widgets/scrollablebottomsheet/scrollable_bottom_sheet_skeleton.dart
@@ -78,7 +78,9 @@ class _ScrollableBottomSheetSkeletonState extends State<ScrollableBottomSheetSke
 
   int get _index => widget.index;
 
-  final double _topBarHeight = 74;
+  final double _topBarHeight = 72;
+  final double _pageTitleTopPadding = 12;
+  final double _topBarTranslationYAmountInPx = 4;
 
   ScrollableBottomSheetPage get _page => widget.pages[_index];
 
@@ -129,6 +131,7 @@ class _ScrollableBottomSheetSkeletonState extends State<ScrollableBottomSheetSke
     return Stack(
       children: [
         _Skeleton(
+          key: ValueKey("_Skeleton$_index"),
           mainContent: _SwitcherLayout(
             currentPageWidgets: currentWidgets?.mainContentAnimatedBuilder,
             outgoingChild: outgoingWidgets?.mainContentAnimatedBuilder,
@@ -152,12 +155,13 @@ class _ScrollableBottomSheetSkeletonState extends State<ScrollableBottomSheetSke
           ),
           edgeInsetsDirectional: widget.edgeInsetsDirectional,
           topBarHeight: _topBarHeight,
+          topBarTranslationYAmountInPx: _topBarTranslationYAmountInPx,
         ),
         if (currentWidgets != null)
           Offstage(
+            key: ValueKey("CurrentOffstage$_index"),
             offstage: true,
             child: _Skeleton(
-              key: UniqueKey(),
               mainContent: KeyedSubtree(
                 key: _currentOffstagedMainContentKeys[_index],
                 child: currentWidgets.offstagedMainContent,
@@ -169,13 +173,14 @@ class _ScrollableBottomSheetSkeletonState extends State<ScrollableBottomSheetSke
               actionButton: currentWidgets.actionButtonAnimatedBuilder.actionButton,
               edgeInsetsDirectional: widget.edgeInsetsDirectional,
               topBarHeight: _topBarHeight,
+              topBarTranslationYAmountInPx: _topBarTranslationYAmountInPx,
             ),
           ),
         if (outgoingWidgets != null)
           Offstage(
+            key: ValueKey("_OutgoingOffstage$_index"),
             offstage: true,
             child: _Skeleton(
-              key: UniqueKey(),
               mainContent: KeyedSubtree(
                 key: _outgoingOffstagedMainContentKeys[_index],
                 child: outgoingWidgets.offstagedMainContent,
@@ -187,6 +192,7 @@ class _ScrollableBottomSheetSkeletonState extends State<ScrollableBottomSheetSke
               actionButton: outgoingWidgets.actionButtonAnimatedBuilder.actionButton,
               edgeInsetsDirectional: widget.edgeInsetsDirectional,
               topBarHeight: _topBarHeight,
+              topBarTranslationYAmountInPx: _topBarTranslationYAmountInPx,
             ),
           ),
       ],
@@ -209,6 +215,7 @@ class _ScrollableBottomSheetSkeletonState extends State<ScrollableBottomSheetSke
     )..addStatusListener((status) {
         if (status == AnimationStatus.completed) {
           setState(() => _outgoingPageWidgets = null);
+          _animationController!.value = _animationController!.upperBound;
           _animationController?.dispose();
           _animationController = null;
         }
@@ -231,7 +238,6 @@ class _ScrollableBottomSheetSkeletonState extends State<ScrollableBottomSheetSke
   CurrentPageWidgets _createCurrentWidgets(AnimationController animationController) {
     return CurrentPageWidgets(
         mainContentAnimatedBuilder: CurrentMainContentAnimatedBuilder(
-          key: UniqueKey(),
           mainContent: _createMainContent(_titleKeys[_index]),
           controller: animationController,
           currentOffstagedMainContentKey: _currentOffstagedMainContentKeys[_index],
@@ -263,7 +269,6 @@ class _ScrollableBottomSheetSkeletonState extends State<ScrollableBottomSheetSke
   ) {
     return OutgoingPageWidgets(
         mainContentAnimatedBuilder: OutgoingMainContentAnimatedBuilder(
-          key: UniqueKey(),
           controller: animationController,
           mainContent: currentWidgetsToBeOutgoing.mainContentAnimatedBuilder.mainContent,
           currentOffstagedMainContentKey: _currentOffstagedMainContentKeys[_index],
@@ -291,7 +296,6 @@ class _ScrollableBottomSheetSkeletonState extends State<ScrollableBottomSheetSke
 
   ScrollableBottomSheetMainContent _createMainContent(GlobalKey titleKey) =>
       ScrollableBottomSheetMainContent(
-        key: UniqueKey(),
         titleKey: titleKey,
         topBarHeight: _topBarHeight,
         edgeInsetsDirectional: widget.edgeInsetsDirectional,
@@ -301,35 +305,34 @@ class _ScrollableBottomSheetSkeletonState extends State<ScrollableBottomSheetSke
         heroImageHeight: _page.heroImageHeight,
         content: _page.content,
         title: _page.title,
+        titleTopPadding: _pageTitleTopPadding,
       );
 
   ScrollableBottomSheetTopBar _createTopBar() => ScrollableBottomSheetTopBar(
-        key: UniqueKey(),
         topBarHeight: _topBarHeight,
         backgroundColor: _page.backgroundColor,
         currentScrollPositionListenable: _currentScrollPosition,
         topBarTitle: _page.appbarTitle,
         titleKey: _titleKeys[_index],
         heroImageHeight: _page.heroImageHeight,
+        pageTitleTopPadding: _pageTitleTopPadding,
+        topBarTranslationYAmountInPx: _topBarTranslationYAmountInPx,
       );
 
   BottomSheetCloseButton _createCloseButton() => BottomSheetCloseButton(
-        key: UniqueKey(),
         onPressed: _page.onClosePressed,
       );
 
   Widget _createBackButton() => _index == 0
       ? const SizedBox.shrink()
       : BottomSheetBackButton(
-          key: UniqueKey(),
           onPressed: _page.onBackPressed ??
               () => widget.pageIndexListenable.value = widget.pageIndexListenable.value - 1,
         );
 
   Widget _createActionButton() => _page.actionTextListenable == null
       ? const SizedBox.shrink()
       : ScrollableBottomSheetActionButton(
-          key: UniqueKey(),
           edgeInsetsDirectional: widget.edgeInsetsDirectional,
           actionButtonColor: _page.actionButtonColor,
           actionTextListenable: _page.actionTextListenable,
@@ -382,9 +385,11 @@ class _Skeleton extends StatelessWidget {
     required this.actionButton,
     required this.edgeInsetsDirectional,
     required this.topBarHeight,
+    required this.topBarTranslationYAmountInPx,
   }) : super(key: key);
 
   final handlerHeight = 12.0;
+  final double topBarTranslationYAmountInPx;
 
   @override
   Widget build(BuildContext context) {
@@ -394,8 +399,8 @@ class _Skeleton extends StatelessWidget {
         Positioned(
           left: 0,
           right: 0,
-          top: -4,
-          height: topBarHeight,
+          top: -1 * topBarTranslationYAmountInPx,
+          height: topBarHeight + topBarTranslationYAmountInPx,
           child: topBar,
         ),
         Positioned(