Question 78012 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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();

       },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search