Recently, when reviewing the knowledge related to Flutter GestureDetector, I thought of the exhibition project implemented with Android before. This time, I completely implemented Flutter, which really felt that the code was much simpler.

Overall project requirements

  1. Exhibits rotate clockwise automatically when entering app
  2. Stop rotation when touching exhibits
  3. When the gesture touches and slides left and right on the exhibition, the exhibition follows the rotation
  4. Record the touch direction as you leave the touch and continue the rotation automatically
  5. It can be rotated clockwise or counterclockwise

Principle of rotation

First of all, we know how to show spin, exhibition is a display at the museum of cultural relics, 72 were taken and a shooting Angle every 5 degree, so the overall count up to 72 times 5, total is 360 degrees is a circle, then write the code inside is from 1 picture, and then every 90 milliseconds to replace a piece, Keep adding up until you get to 72, and then you start from the first, and you’re going all the way around. Now that you understand the idea, the code for the Flutter is transformed as follows:

Image.asset(
    'images/product00${index}.png',
    fit: BoxFit.cover,
    width: width,
    height: height,
),
Copy the code

Then, we change the image value by replacing index every 100 seconds with Timer, as follows:

Timer.periodic(new Duration(milliseconds: 90), (timer) {
    setState(() {});
    if (index < count) {
      index++;
      return; } // return to index = 1; });Copy the code

Remember that the Timer needs to cancel after it runs out, and you should have some idea of the state, so this is how you replace the image by changing the index value.

The problem with this is that the images are replaced too quickly, and each Image is around 40K in size. The white screen flickers during the replacement because the images need to be loaded into memory and displayed through image.asset. Fortunately, there is a property that can solve this problem. Set gaplessPlayback to True and the code looks like this:

Image.asset(
    'images/product00${index}.png', fit: boxfit. cover, width: width, height: height, // This property prevents a white screen from happening when images are quickly toggled, and keeps old images gaplessPlayback until new images appear:true,
    excludeFromSemantics: true,),Copy the code

Setting gaplessPlayback to True ensures that old images are rendered before new ones appear so that white screen flashes do not occur.

GestureDetector basic use

Here is how to combine GestureDetector with gestures. Through an example, we will first understand the basic usage of GestureDetector. The code is as follows:

import 'package:flutter/material.dart';

class GestureDetectorPage extends StatefulWidget {
  @override
  _GestureDetectorState createState() => new _GestureDetectorState();
}

class _GestureDetectorState extends State<GestureDetectorPage> {
  String _opName = "No operation detected";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GestureDetector Gesture Recognition"), ), body: Center( child: GestureDetector( child: Container( alignment: Alignment.center, color: Colors.blue, width: 240.0, height: 120.0, child: Text(_opName, style: TextStyle(color: color.white),), onTap: () => _showEventText()"Tap"),
          onTapUp: (e) => _showEventText("TapUp"),
          onTapDown: (e) => _showEventText("TapDown"),
          onTapCancel: () => _showEventText("TapCancel"),
          onDoubleTap: () => _showEventText("DoubleTap"),
          onLongPress: () => _showEventText("LongPress"),
          onVerticalDragDown: (e) => _showEventText("onVerticalDragDown"),
          onVerticalDragStart: (e) => _showEventText("onVerticalDragStart"),
          onVerticalDragUpdate: (e) => _showEventText("onVerticalDragUpdate"),
          onVerticalDragEnd: (e) => _showEventText("onVerticalDragEnd"),
          onVerticalDragCancel: () => _showEventText("onVerticalDragCancel"),
          onHorizontalDragDown: (e) => _showEventText("onHorizontalDragDown"),
          onHorizontalDragStart: (e) => _showEventText("onHorizontalDragStart"),
          onHorizontalDragUpdate: (e) => _showEventText("onHorizontalDragUpdate"),
          onHorizontalDragEnd: (e) => _showEventText("onHorizontalDragEnd"),
          onHorizontalDragCancel: () => _showEventText("onHorizontalDragCancel"),
//          onPanDown: (e) => _showEventText("onPanDown"),
//          onPanStart: (e) => _showEventText("onPanStart"),
//          onPanUpdate: (e) => _showEventText("onPanUpdate"),
//          onPanEnd: (e) => _showEventText("onPanEnd"),
//          onScaleStart: (e) => _showEventText("onScaleStart"),
//          onScaleUpdate: (e) => _showEventText("onScaleUpdate"),
//          onScaleEnd: (e) => _showEventText("onScaleEnd"),),),); } void _showEventText(String text) {setState(() {
      _opName = text;
    });
    print(_opName); }}Copy the code

Using this example, we can record and display gesture events through the GestureDetector in the Text area of the screen to help us understand.

In this example, we need to use the onTap, onPanStart, onPanUpdate, onPanEnd callback methods, after practice and add gesture events to the code, the code is as follows:

GestureDetector( onTap: () => _cancelTimer(), onPanStart: (e) => _cancelTimer(), onPanUpdate: OnPanEnd: (e) => _startTimer(), child: image.asset ()'images/product00${index}.png', fit: boxfit. cover, width: width, height: height, // This property prevents a white screen from happening when images are quickly toggled and keeps old images gaplessPlayback until new images are created.true,
    excludeFromSemantics: true,),)Copy the code

OnTap, onPanStart, onPanEnd: onPanUpdate: _onTouchImage(e);

void _onTouchImage(e) {
    setState(() { index -= e.delta.dx.toInt(); }); // Prevent an error when retrieving a nonexistent imageif (index < 1) index = 1;
    if (index > count) index = count;
}
Copy the code

In the above code, when touching the screen, the index value is changed to replace the picture, so that the picture can replace the following gesture. Then, the finger can continue to rotate after leaving the screen. At this time, we can add the direction judgment when touching.

if(e.delta.dx < 0) {// Clockwise direction = DIRECTION_CLOCKWISE; }if(e.delta.dx > 0) {// Anticlockwise = DIRECTION_ANTICLOCKWISE; }Copy the code

In this way, a simple 360 display is realized. You can control the display by any touch on the screen. It’s amazing! Take a look at the final result:

Github address: github.com/heruijun/fl…

Book recommendation

Build a Big Front-end application with Flutter from 0 to 1

Starting from the basics of Flutter, combining with practical cases, readers will gradually master the core content of Flutter. The chapter also introduces Node, Mongo and Vue through two practical projects, in addition to grasping the relevant knowledge of Flutter, so that more readers can embrace the hottest big front-end technology at present.

Jingdong purchase link: Click to buy