Skip to content

Add Swipe support between navbar pages #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Add Swipe support between navbar pages #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5b62253
first commit
bebaoboy Jul 16, 2024
e41ae50
finish base feature
bebaoboy Jul 16, 2024
6ff7e3d
Merge branch 'issue-42-swipe' into main
bebaoboy Jul 17, 2024
1116ba7
Merge pull request #1 from bebaoboy/main
bebaoboy Jul 17, 2024
f358ec4
add variables to control swipe + update example app
bebaoboy Jul 17, 2024
2b93618
added tests
bebaoboy Jul 18, 2024
4652402
make docs more clear
bebaoboy Jul 19, 2024
7953798
fix landscape mode
bebaoboy Jul 19, 2024
f55c3e1
update as requested:
bebaoboy Aug 16, 2024
34a1131
minor fix
bebaoboy Aug 16, 2024
74066a9
Merge branch 'main' into issue-42-swipe
bebaoboy Aug 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 127 additions & 30 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,13 +102,14 @@ class HomePage extends ConsumerStatefulWidget {
}

class _HomePageState extends ConsumerState<HomePage> {
bool swipeable = false;
final Map<int, Map<String, Widget>> _routes = const {
0: {
'/': HomeFeeds(),
FeedDetail.route: FeedDetail(),
},
1: {
'/': ProductList(),
'/': ProductPage(),
ProductDetail.route: ProductDetail(),
ProductComments.route: ProductComments(),
},
Expand Down Expand Up @@ -193,6 +194,9 @@ class _HomePageState extends ConsumerState<HomePage> {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const SizedBox(



width: 60,
),
FloatingActionButton.extended(
Expand All @@ -205,6 +209,7 @@ class _HomePageState extends ConsumerState<HomePage> {
),
const SizedBox(
width: 20,

),
FloatingActionButton.extended(
heroTag: 'showSnackBar',
Expand Down Expand Up @@ -234,6 +239,15 @@ class _HomePageState extends ConsumerState<HomePage> {
setState(() {});
},
),
FloatingActionButton(
heroTag: 'swipe',
child: Icon(
swipeable ? Icons.swipe : Icons.touch_app_outlined),
onPressed: () {
swipeable = !swipeable;
setState(() {});
},
),
FloatingActionButton(
heroTag: 'darkmode',
child: Icon(appSetting.isDarkMode
Expand All @@ -252,6 +266,14 @@ class _HomePageState extends ConsumerState<HomePage> {
}),
body: Builder(builder: (context) {
return NavbarRouter(
swipeable: swipeable,
// swipeableLeftArea: Rect.fromLTWH(
// 0, 50, 50, MediaQuery.of(context).size.height * 0.9),
// swipeableRightArea: Rect.fromLTWH(
// MediaQuery.of(context).size.width - 50,
// 50,
// 50,
// MediaQuery.of(context).size.height * 0.9),
Comment on lines +270 to +276
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove this comment and add

Suggested change
// swipeableLeftArea: Rect.fromLTWH(
// 0, 50, 50, MediaQuery.of(context).size.height * 0.9),
// swipeableRightArea: Rect.fromLTWH(
// MediaQuery.of(context).size.width - 50,
// 50,
// 50,
// MediaQuery.of(context).size.height * 0.9),
swipeableArea: Rect.fromLTWH(0, 0, MediaQuery.of(context).size.width,

Even without specifying swipeableArea whole width should be swipeable

errorBuilder: (context) {
return const Center(child: Text('Error 404'));
},
Expand Down Expand Up @@ -408,7 +430,7 @@ class FeedTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 300,
height: 400,
margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8),
color: Theme.of(context).colorScheme.surface,
child: Card(
Expand Down Expand Up @@ -468,6 +490,86 @@ class FeedDetail extends StatelessWidget {
}
}

class ProductPage extends ConsumerStatefulWidget {
const ProductPage({super.key});
static const String route = '/';

@override
ConsumerState<ConsumerStatefulWidget> createState() => _ProductPageState();
}

class _ProductPageState extends ConsumerState<ProductPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Products'),
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 5,
// controller: _scrollController,
itemBuilder: (context, index) {
return Container(
height: 60,
color: Colors.redAccent.shade100,
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
if (index == 0) {
NavbarNotifier.pushNamed(FeedDetail.route, 0);
NavbarNotifier.showSnackBar(
context, 'switching to Home', onClosed: () {
NavbarNotifier.index = 0;
});
} else {
NavbarNotifier.hideBottomNavBar = false;
Navigate.pushNamed(context, ProductDetail.route,
transitionType: TransitionType.scale,
arguments: {'id': index.toString()});
}
},
child: Card(
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 12),
height: 60,
width: 120,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: const EdgeInsets.all(8),
height: 15,
width: 15,
color: Theme.of(context)
.colorScheme
.secondary,
),
Flexible(
child: Text(
index != 0
? 'Product $index'
: 'Tap to push a route on HomePage Programmatically',
textAlign: TextAlign.end,
),
),
],
)),
)),
);
}),
),
const Expanded(flex: 2, child: ProductList()),
],
));
}
}

class ProductList extends ConsumerStatefulWidget {
const ProductList({super.key});
static const String route = '/';
Expand Down Expand Up @@ -521,34 +623,29 @@ class _ProductListState extends ConsumerState<ProductList> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Products'),
),
body: ListView.builder(
controller: _scrollController,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
if (index == 0) {
NavbarNotifier.pushNamed(FeedDetail.route, 0);
NavbarNotifier.showSnackBar(context, 'switching to Home',
onClosed: () {
NavbarNotifier.index = 0;
});
} else {
NavbarNotifier.hideBottomNavBar = false;
Navigate.pushNamed(context, ProductDetail.route,
transitionType: TransitionType.scale,
arguments: {'id': index.toString()});
}
},
child: ProductTile(index: index)),
);
}),
);
return ListView.builder(
controller: _scrollController,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
if (index == 0) {
NavbarNotifier.pushNamed(FeedDetail.route, 0);
NavbarNotifier.showSnackBar(context, 'switching to Home',
onClosed: () {
NavbarNotifier.index = 0;
});
} else {
NavbarNotifier.hideBottomNavBar = false;
Navigate.pushNamed(context, ProductDetail.route,
transitionType: TransitionType.scale,
arguments: {'id': index.toString()});
}
},
child: ProductTile(index: index)),
);
});
}
}

Expand Down
96 changes: 96 additions & 0 deletions lib/src/gestures.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
// ignore_for_file: public_member_api_docs, sort_constructors_first, avoid_print
import 'package:flutter/material.dart';
import 'package:navbar_router/navbar_router.dart';
import 'package:navbar_router/src/navbar_swipeable_utls.dart';

class Gesture {
bool dragging = false;
int pageViewIndex = 0;
late PageController pageController;
double Function() getPadding;
BuildContext context;
Gesture({
required this.getPadding,
required this.context,
});

/// Swipeable functions below
// convert scrollable pixels to current index
double getPageFromPixels(context) {
return pageController.offset /
(MediaQuery.of(context).size.width - getPadding());
}

double getPixelsFromPage(int page) {
return (MediaQuery.of(context).size.width - getPadding()) * page;
}

// control when user can swipe to other page
bool handleOverscroll(OverscrollNotification value) {
if (!dragging) return false;
print(value.overscroll);
if (value.overscroll < 0 && pageController.offset + value.overscroll <= 0) {
if (pageController.offset != 0) {
pageController.jumpTo(0);
}
return true;
}
if (pageController.offset + value.overscroll >=
pageController.position.maxScrollExtent) {
if (pageController.offset != pageController.position.maxScrollExtent) {
pageController.jumpTo(pageController.position.maxScrollExtent);
}
return true;
}
pageController.jumpTo(pageController.offset + value.overscroll);

return true;
}

void onDragStart(details) {
if (dragging) return;
if (details.localPosition.dx <= kDragAreaWidth ||
details.localPosition.dx >=
MediaQuery.of(context).size.width - kDragAreaWidth) {
dragging = true;
}
}

double? onDragUpdate(DragUpdateDetails details) {
// print(details.delta);
double? newOffset;
if (dragging) {
var page = getPageFromPixels(context);
// print(page);
if ((page == 0 && details.delta.dx > 0.1) ||
(page >= NavbarNotifier.length - 1 && details.delta.dx < -0.1)) {
return null;
}
double newOffset = pageController.offset - details.delta.dx;
print(newOffset / getPixelsFromPage(NavbarNotifier.currentIndex));

// handle fade animation when swiping

pageController.jumpTo(newOffset);
}
return newOffset;
}

int onDragEnd(details) {
print(pageController.offset);
// when user release the drag, we calculate which page they're on
var page = getPageFromPixels(context);
print(page);
int value = page.round();
if (value < 0) {
pageController.animateTo(pageController.position.minScrollExtent,
duration: Durations.long1, curve: Curves.ease);
} else if (value >= NavbarNotifier.length) {
pageController.animateTo(pageController.position.maxScrollExtent,
duration: Durations.long1, curve: Curves.ease);
} else {}

dragging = false;
return value;
}
}
Loading
Loading