diff --git a/lib/components/bottom_navigation_bar.dart b/lib/components/bottom_navigation_bar.dart index 29e2a97..523af71 100644 --- a/lib/components/bottom_navigation_bar.dart +++ b/lib/components/bottom_navigation_bar.dart @@ -1,5 +1,4 @@ import 'package:flutter/material.dart'; - import 'animated_padding_component.dart'; class BottomNavigation extends StatefulWidget { @@ -12,18 +11,17 @@ class BottomNavigation extends StatefulWidget { } class BottomNavigationState extends State with TickerProviderStateMixin { - int _selectedIndex = 0; - + int selectedIndex = 0; @override Widget build(BuildContext context) { return WillPopScope( onWillPop: () async { - if (_selectedIndex == 0) { + if (selectedIndex == 0) { return true; } setState(() { - _selectedIndex--; - widget.onPageChange(_selectedIndex); + selectedIndex--; + widget.onPageChange(selectedIndex); }); return false; }, @@ -47,16 +45,7 @@ class BottomNavigationState extends State with TickerProviderS child: Padding( padding: const EdgeInsets.only(left: 6), child: TextButton( - onPressed: _selectedIndex == 0 - ? () { - Navigator.pop(context); - } - : () { - setState(() { - _selectedIndex--; - widget.onPageChange(_selectedIndex); - }); - }, + onPressed: () => navigateBack(), child: const Text( "Back", style: TextStyle(color: Colors.grey), @@ -69,7 +58,7 @@ class BottomNavigationState extends State with TickerProviderS Expanded( flex: 5, child: AnimatedPaddingComponent( - padding: getPadding(_selectedIndex), + padding: _getPadding(selectedIndex), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ @@ -89,18 +78,9 @@ class BottomNavigationState extends State with TickerProviderS child: Padding( padding: const EdgeInsets.only(right: 6), child: TextButton( - onPressed: _selectedIndex == widget.pageCount - 1 - ? () { - Navigator.pop(context); - } - : () { - setState(() { - _selectedIndex++; - widget.onPageChange(_selectedIndex); - }); - }, + onPressed: () => navigateForth(), child: Text( - _selectedIndex != 2 ? "Next" : "Connect now", + selectedIndex != 2 ? "Next" : "Connect now", style: const TextStyle(color: Colors.grey), ), ), @@ -113,7 +93,7 @@ class BottomNavigationState extends State with TickerProviderS ); } - getPadding(int selectedIndex) { + _getPadding(int selectedIndex) { if (selectedIndex == 0) { return const EdgeInsets.only(left: 34); } @@ -125,7 +105,7 @@ class BottomNavigationState extends State with TickerProviderS } Widget _buildPageIndicator(int index) { - bool isActive = index == _selectedIndex; + bool isActive = index == selectedIndex; return AnimatedContainer( duration: const Duration(milliseconds: 300), width: isActive ? 13.0 : 8.0, @@ -136,4 +116,26 @@ class BottomNavigationState extends State with TickerProviderS ), ); } + + navigateBack() { + if (selectedIndex == 0) { + Navigator.pop(context); + } else { + setState(() { + selectedIndex--; + widget.onPageChange(selectedIndex); + }); + } + } + + navigateForth() { + if (selectedIndex == widget.pageCount - 1) { + Navigator.pop(context); + } else { + setState(() { + selectedIndex++; + widget.onPageChange(selectedIndex); + }); + } + } } diff --git a/lib/pages/help/help.dart b/lib/pages/help/help.dart index a8f7687..7600490 100644 --- a/lib/pages/help/help.dart +++ b/lib/pages/help/help.dart @@ -1,12 +1,12 @@ import 'dart:io'; - import 'package:flutter/material.dart'; +import 'package:humhub/components/bottom_navigation_bar.dart'; +import 'package:humhub/components/ease_out_container.dart'; import 'package:humhub/components/help_safe_area.dart'; +import 'package:humhub/components/page_animation_container.dart'; import 'package:humhub/pages/help/components/first_page.dart'; import 'package:humhub/pages/help/components/third_page.dart'; -import '../../components/page_animation_container.dart'; -import '../../components/bottom_navigation_bar.dart'; -import '../../components/ease_out_container.dart'; +import 'package:swipe_to/swipe_to.dart'; import 'components/second_page.dart'; class Help extends StatefulWidget { @@ -22,85 +22,87 @@ class HelpState extends State { final ValueNotifier fadeInSecond = ValueNotifier(false); final ValueNotifier fadeInThird = ValueNotifier(false); final ValueNotifier currentPage = ValueNotifier(0); + GlobalKey statePagesKey = GlobalKey(); + GlobalKey bottomNavigationStateKey = GlobalKey(); + @override Widget build(BuildContext context) { - GlobalKey statePagesKey = - GlobalKey(); - GlobalKey bottomNavigationStateKey = - GlobalKey(); - - return Scaffold( - backgroundColor: Colors.white, - extendBody: true, - bottomNavigationBar: Container( - padding: Platform.isIOS - ? const EdgeInsets.only(bottom: 20) - : const EdgeInsets.only(bottom: 5), - margin: const EdgeInsets.symmetric(horizontal: 10), - child: BottomNavigation( - key: bottomNavigationStateKey, - pageCount: 3, - onPageChange: (index) { - currentPage.value = index; - statePagesKey.currentState?.navigateTo(index); - }, + return SwipeTo( + offsetDx: 0, + animationDuration: const Duration(milliseconds: 100), + onRightSwipe: () => bottomNavigationStateKey.currentState?.navigateBack(), + onLeftSwipe: () => bottomNavigationStateKey.currentState?.navigateForth(), + child: Scaffold( + backgroundColor: Colors.white, + extendBody: true, + bottomNavigationBar: Container( + padding: Platform.isIOS ? const EdgeInsets.only(bottom: 20) : const EdgeInsets.only(bottom: 5), + margin: const EdgeInsets.symmetric(horizontal: 10), + child: BottomNavigation( + key: bottomNavigationStateKey, + pageCount: 3, + onPageChange: (index) { + currentPage.value = index; + statePagesKey.currentState?.navigateTo(index); + }, + ), ), - ), - body: HelpSafeArea( - child: Column( - children: [ - Center( - child: Container( - padding: const EdgeInsets.only(top: 60, bottom: 40), - width: MediaQuery.of(context).size.width * 0.6, - child: EaseOutContainer( - child: Image.asset('assets/images/logo.png'), + body: HelpSafeArea( + child: Column( + children: [ + Center( + child: Container( + padding: const EdgeInsets.only(top: 60, bottom: 40), + width: MediaQuery.of(context).size.width * 0.6, + child: EaseOutContainer( + child: Image.asset('assets/images/logo.png'), + ), ), ), - ), - PageAnimationContainer( - key: statePagesKey, - fadeDuration: const Duration(milliseconds: 500), - fadeCurve: Curves.easeInOut, - navigationCallback: (currentIndex, nextIndex) { - if (currentIndex == 0) { - fadeInFirst.value = true; - } else { - fadeInFirst.value = false; - } - if (currentIndex == 1) { - fadeInSecond.value = true; - } else { - fadeInSecond.value = false; - } - if (currentIndex == 2) { - fadeInThird.value = true; - } else { - fadeInThird.value = false; - } - }, - children: [ - ValueListenableBuilder( - valueListenable: fadeInFirst, - builder: (BuildContext context, value, Widget? child) { - return FirstPage(fadeIn: fadeInFirst.value); - }, - ), - ValueListenableBuilder( - valueListenable: fadeInSecond, - builder: (BuildContext context, value, Widget? child) { - return SecondPage(fadeIn: fadeInSecond.value); - }, - ), - ValueListenableBuilder( - valueListenable: fadeInThird, - builder: (BuildContext context, value, Widget? child) { - return ThirdPage(fadeIn: fadeInThird.value); - }, - ), - ], - ), - ], + PageAnimationContainer( + key: statePagesKey, + fadeDuration: const Duration(milliseconds: 500), + fadeCurve: Curves.easeInOut, + navigationCallback: (currentIndex, nextIndex) { + if (currentIndex == 0) { + fadeInFirst.value = true; + } else { + fadeInFirst.value = false; + } + if (currentIndex == 1) { + fadeInSecond.value = true; + } else { + fadeInSecond.value = false; + } + if (currentIndex == 2) { + fadeInThird.value = true; + } else { + fadeInThird.value = false; + } + }, + children: [ + ValueListenableBuilder( + valueListenable: fadeInFirst, + builder: (BuildContext context, value, Widget? child) { + return FirstPage(fadeIn: fadeInFirst.value); + }, + ), + ValueListenableBuilder( + valueListenable: fadeInSecond, + builder: (BuildContext context, value, Widget? child) { + return SecondPage(fadeIn: fadeInSecond.value); + }, + ), + ValueListenableBuilder( + valueListenable: fadeInThird, + builder: (BuildContext context, value, Widget? child) { + return ThirdPage(fadeIn: fadeInThird.value); + }, + ), + ], + ), + ], + ), ), ), ); diff --git a/pubspec.lock b/pubspec.lock index 5c98335..eb3f50b 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -685,6 +685,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.2.0" + swipe_to: + dependency: "direct main" + description: + name: swipe_to + sha256: "6274e148a02b32dfa8ae8634c9aa6196bf5bc2d88653650abd11d2eb52fc5e29" + url: "https://pub.dev" + source: hosted + version: "1.0.2" term_glyph: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 9b12290..15eb225 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -58,6 +58,7 @@ dependencies: auto_size_text: ^3.0.0 mockito: ^5.4.0 connectivity_plus: ^4.0.1 + swipe_to: ^1.0.2 dev_dependencies: flutter_test: