Closed guyluz11 closed 1 month ago
I noticed that introduction_screen doesn't allow swiping to navigate the intro screens. We might want to consider using a different package that supports swiping gestures for a more intuitive user experience
This package does allow swipe support. I have temporarily disabled it because it requires logic to be written, some pages fields are required and using swipe user can skip the page.
I think the introduction_screen package is fine, might need a pr to allow this more complex option. But if you have something else in mind I am open to hearing it.
I have looked at it and it is pretty easy. When arriving to a page where the next button is disabled just change scrollPhysics: to allow only the left (or right depending on the current phone language).
No need to change the package and it is a small code change.
Feel free to try it out and open a PR.
We can actually achieve this by removing scroll physics: const NeverScrollableScrollPhysics()
and using freezing when swiping needs to be disabled. The logic is similar to how the "Next" button is disabled when the showNextButton
variable is false. However, this approach prevents swiping back while the content is frozen.
That can be fixed, there is an option to enable scrolling only to one direction.
Here is example that chatGPT created
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Scroll Left Only'),
),
body: MyHorizontalScrollView(),
),
);
}
}
class MyHorizontalScrollView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
scrollDirection: Axis.horizontal,
physics: ScrollLeftOnlyPhysics(),
itemCount: 30,
itemBuilder: (context, index) {
return Container(
width: 100,
margin: EdgeInsets.all(10),
color: Colors.blueAccent,
child: Center(
child: Text(
'Item $index',
style: TextStyle(color: Colors.white),
),
),
);
},
);
}
}
class ScrollLeftOnlyPhysics extends ScrollPhysics {
const ScrollLeftOnlyPhysics({ScrollPhysics? parent}) : super(parent: parent);
@override
ScrollPhysics applyTo(ScrollPhysics? ancestor) {
return ScrollLeftOnlyPhysics(parent: buildParent(ancestor));
}
@override
double applyPhysicsToUserOffset(ScrollMetrics position, double offset) {
// Allow scrolling to the left only (negative offset)
if (offset < 0) {
return offset;
}
return 0.0;
}
@override
double applyBoundaryConditions(ScrollMetrics position, double value) {
// Allow scrolling to the left only (negative offset)
if (value < position.pixels) {
return value - position.pixels;
}
return 0.0;
}
}
This gets stuck when I start swiping.
You should play with the code, but this should be the way to do it.
Thanks for the tip. My swipes are definitely not gliding these days. I'll check out your code suggestion and see if it gets things moving smoothly again
Hey, In my PR I used Gesture Detector to implement as required
Done
Make sure to disable swipe forward whenever there is required selection