Click Drag - Arrow Example

clickDragExample.dart

import 'package:flutter/material.dart';

void main() => runApp(Sys());

class Sys extends StatelessWidget {
  const Sys({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Main(),);
  }
}

enum UserDrag{
  UP,
  Down,
  Left,
  Right,
  None
}

class Main extends StatefulWidget {
  const Main({Key? key}) : super(key: key);

  @override
  _MainState createState() => _MainState();
}

class _MainState extends State<Main> {

  UserDrag check = UserDrag.None;
  bool uiCheck = false;

  void _change() => setState((){
    this.uiCheck = !this.uiCheck;
    this.check = UserDrag.None;
  });

  void _update(DragUpdateDetails details){
    if(details.delta.dy < 0) return setState(() => this.check = UserDrag.UP);
    if(details.delta.dy > 0) return setState(() => this.check = UserDrag.Down);
    if(details.delta.dx < 0) return setState(() => this.check = UserDrag.Left);
    if(details.delta.dx > 0) return setState(() => this.check = UserDrag.Right);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.check.toString()),
        centerTitle: true,
        backgroundColor: Colors.red,
      ),
      body: Stack(
        alignment: Alignment.center,
        children: [
          GestureDetector(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10.0),
              margin: EdgeInsets.all(60.0),
              decoration: BoxDecoration(
                color: this.uiCheck ? Colors.grey : Colors.red,
                borderRadius: BorderRadius.circular(30.0)
              ),
              child: Text("Click & Drag", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 24.0),),
            ),
            onPanStart: (DragStartDetails startDetails) => _change(),
            onPanEnd: (DragEndDetails d) => _change(),
            onPanUpdate: _update,
          ),
          !this.uiCheck
            ? Container()
            : Positioned(
                top: 10,
                child: Container(
                  child: Icon(
                    Icons.arrow_upward_rounded,
                    color: this.check == UserDrag.UP ? Colors.red : Colors.grey,
                  ),
                ),
              ),
          !this.uiCheck
            ? Container()
            : Positioned(
                bottom: 10,
                child: Container(
                  child: Icon(
                    Icons.arrow_downward_rounded,
                    color: this.check == UserDrag.Down ? Colors.red : Colors.grey,
                  ),
                ),
              ),
          !this.uiCheck
            ? Container()
            : Positioned(
                left: 10,
                child: Container(
                  child: Icon(
                    Icons.arrow_back_rounded,
                    color: this.check == UserDrag.Left ? Colors.red : Colors.grey,
                  ),
                ),
              ),
          !this.uiCheck
            ? Container()
            : Positioned(
                right: 10,
                child: Container(
                  child: Icon(
                    Icons.arrow_forward_rounded,
                    color: this.check == UserDrag.Right ? Colors.red : Colors.grey,
                  ),
                ),
              )
        ],
      )
    );
  }
}