How to detect swipe in flutter

Question

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 1

Use GestureDetector.onPanUpdate:

GestureDetector(   onPanUpdate: (details) {     // Swiping in right direction.     if (details.delta.dx > 0) {}        // Swiping in left direction.     if (details.delta.dx < 0) {}   },   child: YourWidget(), ) 

---

To cover all the area (passing the parent constraints to the widget), you can include SizedBox.expand.

SizedBox.expand(   child: GestureDetector(     onPanUpdate: (details) {       // Swiping in right direction.       if (details.delta.dx > 0) {}        // Swiping in left direction.       if (details.delta.dx < 0) {}     },     child: YourWidget(),   ), ) 

Answer 2

Wrap your Widget in GestureDetector and use onHorizontalDragUpdate as,

GestureDetector(     onHorizontalDragUpdate: (details) {           // Note: Sensitivity is integer used when you don't want to mess up vertical drag         int sensitivity = 8;         if (details.delta.dx > sensitivity) {             // Right Swipe         } else if(details.delta.dx < -sensitivity){             //Left Swipe         }     } ); 

Or if you're looking for a vertical swipe, you can use this code:

GestureDetector(     onVerticalDragUpdate: (details) {         int sensitivity = 8;         if (details.delta.dy > sensitivity) {             // Down Swipe         } else if(details.delta.dy < -sensitivity){             // Up Swipe         }     } )