How to add onTap on card with clock pause,resume and reset by DoubleTap flutter?-CodePudding

this includes lib can neon_circular_countdown_timer which has the .pause() and .resume() with .reset() function for the state and also the card only allows on child it kinda wired mess the clock is like 2 at each side on card where i want to onTap and onDoubleTap detection with pause and resume with reset call. but due to child limited with card is different. all it takes it some call it pause but can get resume ? because it return null

//import 'package:circular_countdown_timer/circular_countdown_timer.dart';
import 'package:flutter/material.dart';
import 'package:neon_circular_timer/neon_circular_timer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});
  final CountDownController controller = CountDownController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const Pads(),
    );
  }
}

class Pads extends StatelessWidget {
  const Pads({super.key});

  // ignore: non_constant_identifier_names
  get your_controller => 00;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('CHESS APP'),
          leading: const Icon(Icons.image_aspect_ratio),
          toolbarHeight: 50,
        ),
        body: Column(children: <Widget>[
          SizedBox(
            height: 360,
            width: 500,
            child: InkWell(
              onTap: () {
                if (your_controller) {
                  your_controller.pause();
                }
              },
              child: Card(
                // ignore: sort_child_properties_last
                child: NeonCircularTimer(
                  width: 200,
                  duration: 300,
                  isReverse: true,
                  isReverseAnimation: true,
                  controller: your_controller,
                  isTimerTextShown: true,
                  neumorphicEffect: true,
                  innerFillColor: Colors.black12,
                  backgroudColor: Colors.blueAccent,
                  innerFillGradient: LinearGradient(colors: [
                    Colors.greenAccent.shade200,
                    Colors.blueAccent.shade400
                  ]),
                  neonGradient: LinearGradient(colors: [
                    Colors.greenAccent.shade200,
                    Colors.blueAccent.shade400
                  ]),
                ),
                elevation: 20,
                shadowColor: Colors.blueGrey,
                color: Colors.blueAccent,
                margin: const EdgeInsets.all(10),
                shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10))),
                clipBehavior: Clip.hardEdge,
              ),
            ),
          ),
          SizedBox(
            height: 360,
            width: 500,
            child: Card(
              // ignore: sort_child_properties_last
              child: NeonCircularTimer(
                width: 200,
                duration: 300,
                isReverse: true,
                isReverseAnimation: true,
                controller: your_controller,
                isTimerTextShown: true,
                neumorphicEffect: true,
                innerFillColor: Colors.black12,
                backgroudColor: Colors.green,
                innerFillGradient: LinearGradient(colors: [
                  Colors.greenAccent.shade200,
                  Colors.blueAccent.shade400
                ]),
                neonGradient: LinearGradient(colors: [
                  Colors.greenAccent.shade200,
                  Colors.blueAccent.shade400
                ]),
              ),
              elevation: 20,
              shadowColor: Colors.blueGrey,
              color: Colors.green,
              margin: const EdgeInsets.all(10),
              shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10))),
              clipBehavior: Clip.hardEdge,
            ),
          )
        ]));
  }
}

just gesturecontroll over the clock by tap on it just like we play video and the double tab gesture will reset it

CodePudding user response：

I think you might be looking for the GestureDetector widget https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

You can wrap your Card with it, it allows you to handle event like onTap, onDoubleTap, onLongPress etc.

SizedBox(
width: ...,
height: ..., 
child: GestureDetector(
  onTap : () => doSomething(),
  onDoubleTap : () => doSomethingElse(),
  child : Card(...)
  ),
)

But i don't really understand your question to be honest.

CodePudding user response：

You have to wrap your main widget with GestureDetector -GestureDetector can detect your onTap behavior like opaque.

For onTap -> detect a single tap on the widget.

For onDoubleTap -> detect a double tap on the widget.

   GestureDetector(
       onTap: (){
            controller.pause();

       },
       onDoubleTap: (){
             controller.reset();

       },