How to detect swipe in flutter
I've tried using the swipe detector plugin for flutter to achieve navigating to a new screen on swipe right but it's not working, no errors are thrown and the breakpoint is never hit when I debug it. I looked into the GestureDector but I wasn't sure it would work for a swipe right scenario, we want it to navigate to a screen when anywhere on the screen is swiped right.
Here's my code using the plugin
@override
Widget build(BuildContext context){
return new Scaffold(
appBar : LBAppBar().getAppBar(),
//drawer: new LBDrawer().getDrawer(),
body: Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [Color.fromRGBO(1,89,99, 1.0), Colors.grey],
begin: Alignment.bottomLeft,
end: Alignment.topRight
)
),
child:
SwipeDetector(
onSwipeRight: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new WidgetsPage())
); },
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:[
Row(
children: [
Container(
margin: EdgeInsets.only(left: 20.0,top: 10.0, bottom: 10.0, right:30.0),
child: Column(
children: <Widget>[
Text("Hi ${user.firstName}, Today is " + formatDate(), style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 19.0
)),
],
),
),
]
),
Row(
//ROW 1
children: [
Container(
margin: EdgeInsets.only(left: 30.0,top: 60.0, bottom: 30.0, right:30.0),
child: Column(
children: <Widget>[
GestureDetector(
child: Icon(
FontAwesomeIcons.checkSquare,
size: 50.0,
color: Colors.white70,
),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new CheckIn()));
}),
Text("Check In", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.normal ))
],
),
),
Container(
margin: EdgeInsets.only(left: 50.0,top: 60.0, bottom: 30.0, right:30.0),
child: Column(
children: <Widget>[
GestureDetector(
child: Icon(
FontAwesomeIcons.list,
size: 50.0,
color: Colors.white70,
),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new DayAtAGlance()));
}),
Text("My Day", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.normal ))
],
),
),
Container(
margin: EdgeInsets.only(left: 30.0,top: 60.0, bottom: 30.0, right:30.0),
child: Column(
children: <Widget>[
GestureDetector(
child: Icon(
FontAwesomeIcons.phone,
size: 45.0,
color: Colors.white70,
),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new CommunicationLinks()));
}),
Text("Communication", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.normal ))
],
),
),
]
),
Row(//ROW 2
children: [
Container(
margin: EdgeInsets.only(left: 32.0,top: 50.0, bottom: 30.0),
child: Column(
children: <Widget>[
GestureDetector(
child: Icon(
FontAwesomeIcons.dollarSign,
size: 50.0,
color: Colors.white70,
),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new Budget()));
}),
Text("Budget", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.normal ))
],
),
),
Container(
margin: EdgeInsets.only(left: 75.0, top: 50.0, bottom: 30.0, right: 30.0),
child: Column(
children: <Widget>[
GestureDetector(
child: Icon(
FontAwesomeIcons.trophy,
size: 50.0,
color: Colors.white70,
),
onTap: () {
print("Pressed");
}),
Text("Goals", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.normal ))
],
),
),
Container(
margin: EdgeInsets.only(left: 50.0, top: 50.0, bottom: 30.0, right: 20.0),
child: Column(
children: <Widget>[
GestureDetector(
child: Icon(
FontAwesomeIcons.calendar,
size: 50.0,
color: Colors.white70,
),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new CalendarsPage()));
}),
Text("Calendar", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.normal ))
],
),
)
]),
Row(// ROW 3
children: [
Container(
margin: EdgeInsets.only(left: 30.0, top: 50.0, bottom: 30.0, right: 30.0),
child: Column(
children: <Widget>[
GestureDetector(
child: Icon(
FontAwesomeIcons.comments,
size: 50.0,
color: Colors.white70,
),
onTap: () {
print("Pressed");
}),
Text("Community", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.normal ))
],
),
),
Container(
margin: EdgeInsets.only(left: 20.0, top: 50.0, bottom: 30.0, right: 20.0),
child: Column(
children: <Widget>[
GestureDetector(
child: Icon(
FontAwesomeIcons.shoppingCart,
size: 50.0,
color: Colors.white70,
),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ShoppingList()));
}),
Text("Shopping", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.normal ))
],
),
),
Container(
margin: EdgeInsets.only(left: 50.0, top: 50.0, bottom: 30.0, right: 40.0),
child: Column(
children: <Widget>[
GestureDetector(
child: Icon(
FontAwesomeIcons.solidCheckSquare,
size: 50.0,
color: Colors.white70,
),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new CheckOut()));
}),
Text("Check Out", style: new TextStyle( color: Colors.white70, fontWeight: FontWeight.bold ))
],
),
),
]),
],
),
)
)
);
Answer
Wrap your Widget in GestureDetector and use onPanUpdate like this:
GestureDetector(onPanUpdate: (details) {
if (details.delta.dx > 0) {
// swiping in right direction
}
});