Skip to content

Commit

Permalink
Merge pull request #133 from humhub/129-android-need-help-swipe-not-w…
Browse files Browse the repository at this point in the history 
…orking

Add Navigation Swipe Functionality to Help Page.
  • Loading branch information
@luke-
luke- authored Oct 26, 2023
2 parents 07e526c + 1b4918e commit 3efee09
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 108 deletions.
62 changes: 32 additions & 30 deletions lib/components/bottom_navigation_bar.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import 'package:flutter/material.dart';

import 'animated_padding_component.dart';

class BottomNavigation extends StatefulWidget {
Expand All @@ -12,18 +11,17 @@ class BottomNavigation extends StatefulWidget {
}

class BottomNavigationState extends State<BottomNavigation> 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;
},
Expand All @@ -47,16 +45,7 @@ class BottomNavigationState extends State<BottomNavigation> 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),
Expand All @@ -69,7 +58,7 @@ class BottomNavigationState extends State<BottomNavigation> with TickerProviderS
Expanded(
flex: 5,
child: AnimatedPaddingComponent(
padding: getPadding(_selectedIndex),
padding: _getPadding(selectedIndex),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expand All @@ -89,18 +78,9 @@ class BottomNavigationState extends State<BottomNavigation> 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),
),
),
Expand All @@ -113,7 +93,7 @@ class BottomNavigationState extends State<BottomNavigation> with TickerProviderS
);
}

getPadding(int selectedIndex) {
_getPadding(int selectedIndex) {
if (selectedIndex == 0) {
return const EdgeInsets.only(left: 34);
}
Expand All @@ -125,7 +105,7 @@ class BottomNavigationState extends State<BottomNavigation> 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,
Expand All @@ -136,4 +116,26 @@ class BottomNavigationState extends State<BottomNavigation> 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);
});
}
}
}
158 changes: 80 additions & 78 deletions lib/pages/help/help.dart
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -22,85 +22,87 @@ class HelpState extends State<Help> {
final ValueNotifier<bool> fadeInSecond = ValueNotifier<bool>(false);
final ValueNotifier<bool> fadeInThird = ValueNotifier<bool>(false);
final ValueNotifier<int> currentPage = ValueNotifier<int>(0);
GlobalKey<PageAnimationContainerState> statePagesKey = GlobalKey<PageAnimationContainerState>();
GlobalKey<BottomNavigationState> bottomNavigationStateKey = GlobalKey<BottomNavigationState>();

@override
Widget build(BuildContext context) {
GlobalKey<PageAnimationContainerState> statePagesKey =
GlobalKey<PageAnimationContainerState>();
GlobalKey<BottomNavigationState> bottomNavigationStateKey =
GlobalKey<BottomNavigationState>();

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<bool>(
valueListenable: fadeInFirst,
builder: (BuildContext context, value, Widget? child) {
return FirstPage(fadeIn: fadeInFirst.value);
},
),
ValueListenableBuilder<bool>(
valueListenable: fadeInSecond,
builder: (BuildContext context, value, Widget? child) {
return SecondPage(fadeIn: fadeInSecond.value);
},
),
ValueListenableBuilder<bool>(
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<bool>(
valueListenable: fadeInFirst,
builder: (BuildContext context, value, Widget? child) {
return FirstPage(fadeIn: fadeInFirst.value);
},
),
ValueListenableBuilder<bool>(
valueListenable: fadeInSecond,
builder: (BuildContext context, value, Widget? child) {
return SecondPage(fadeIn: fadeInSecond.value);
},
),
ValueListenableBuilder<bool>(
valueListenable: fadeInThird,
builder: (BuildContext context, value, Widget? child) {
return ThirdPage(fadeIn: fadeInThird.value);
},
),
],
),
],
),
),
),
);
Expand Down
8 changes: 8 additions & 0 deletions pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
1 change: 1 addition & 0 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down

0 comments on commit 3efee09

Please sign in to comment.