[shutter] shutter gesture interaction (small ball following the movement of fingers)

One 、Flutter gesture - A small ball that moves with your fingers

---

Set the spherical coordinate variable : among currentX Is the distance from the left boundary , currentY Is the distance from the right boundary ;

  ///  Current ball  x  coordinate   double currentX = 0;  ///  Current ball  y  coordinate   double currentY = 0;

The position of the ball : The ball is in Stack In the frame layout Positioned Components , Its left and top The field value sets its coordinates , They correspond to each other currentX and currentY value ;

//  Pellet Positioned(  ///  The current position   left: currentX,  top: currentY,)

Monitoring events : monitor GestureDetector Component's onPanUpdate event , The callback method is void Function(DragUpdateDetails details) Type of Method , It can be downloaded from DragUpdateDetails Get the current x , y The moving distance of , This distance needs to be accumulated with the previous distance , To get accurate coordinate values ;

Call... In the callback method setState Method , Modify member variables currentX and currentY , To modify Positioned Location of components , In order to achieve the goal of small ball movement ;

///  Gesture detection component child: GestureDetector(  ///  Mobile operating   onPanUpdate: (e){ 
        setState(() { 
          // e  You can only get  delta  value  ,  Need to accumulate step by step       currentX += e.delta.dx;      currentY += e.delta.dy;    });  },)

Code example :

//  Pellet Positioned(  ///  The current position   left: currentX,  top: currentY,  ///  Gesture detection component   child: GestureDetector(    ///  Mobile operating     onPanUpdate: (e){ 
          setState(() { 
            // e  You can only get  delta  value  ,  Need to accumulate step by step         currentX += e.delta.dx;        currentY += e.delta.dy;      });    },    //  Black ball     child: Container(      width: 40,      height: 40,      decoration: BoxDecoration(        color: Colors.black,        borderRadius: BorderRadius.circular(20),      ),    ),  ),),

3、 ... and 、 Complete code example

---

Complete code example :

import 'package:flutter/material.dart';class GesturePage extends StatefulWidget { 
      @override  _GesturePageState createState() => _GesturePageState();}class _GesturePageState extends State<GesturePage> { 
      ///  Current ball  x  coordinate   double currentX = 0;  ///  Current ball  y  coordinate   double currentY = 0;  @override  Widget build(BuildContext context) { 
        return MaterialApp(      //  Set the theme       theme: ThemeData(        primarySwatch: Colors.amber,      ),      //  Set the body component       home: Scaffold(        //  Set the title bar         appBar: AppBar(          title: Text(" Gesture detection "),          //  Back to button settings           leading: GestureDetector(            //  Click the event callback function             onTap: (){ 
                  //  Exit the current interface               Navigator.pop(context);            },            //  Back button icon             child: Icon(Icons.arrow_back),          ),        ),        //  level / Tile components vertically         body: FractionallySizedBox(          //  Tile horizontally           widthFactor: 1,          //  Frame layout           child: Stack(            children: <Widget>[              //  Vertical linear layout               Column(                children: <Widget>[                  //  Gesture detection component                   GestureDetector(                    //  Click event                     onTap: (){ 
                          print(" double-click ");                    },                    //  Double-click the event                     onDoubleTap: (){ 
                          print(" double-click ");                    },                    //  Long press event  , ()=> Method name ( parameter list )  You can call back an existing method                     onLongPress: () => _longPress(),                    //  Click Cancel                     onTapCancel: (){ 
                          print(" Click Cancel ");                    },                    //  Click to press                     onTapDown: (e){ 
                          print(" Click to press ");                    },                    //  Click to lift                     onTapUp: (e){ 
                          print(" Click to lift ");                    },                    //  Action component of gesture detection  ,  Monitor various gestures on the component                     child: Container(                      //  The sub components are centered                       alignment: Alignment.center,                      //  padding                       padding: EdgeInsets.all(100),                      //  Background decoration                       decoration: BoxDecoration(                        color: Colors.green,                      ),                      child: Text(                        " Gesture detection ",                        style: TextStyle(                          fontSize: 50,                          color: Colors.red,                        ),                      ),                    ),                  )                ],              ),              //  Pellet               Positioned(                ///  The current position                 left: currentX,                top: currentY,                ///  Gesture detection component                 child: GestureDetector(                  ///  Mobile operating                   onPanUpdate: (e){ 
                        setState(() { 
                          // e  You can only get  delta  value  ,  Need to accumulate step by step                       currentX += e.delta.dx;                      currentY += e.delta.dy;                    });                  },                  //  Black ball                   child: Container(                    width: 40,                    height: 40,                    decoration: BoxDecoration(                      color: Colors.black,                      borderRadius: BorderRadius.circular(20),                    ),                  ),                ),),            ],          ),        ),      ),    );  }  ///  Long press event   void _longPress(){ 
        print(" Long press ");  }}

Running effect :

3、 ... and 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net ( unofficial , The translation is very good ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_cmd ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/15484718 ( The source code snapshot of this blog , You can find the source code of this blog )