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

Flutter – Disable / change the color of a button for a certain seconds if it was clicked

I have a problem. I want to disable the button for 3 seconds if the user clicked on it. After 3 seconds the user should be able to click the button agian.
I created a variable _hasBeenPressed. But the problem is that my output is not what I wished.
It does nothing happend. If I click the button the color of the button did not changed.

So how could I change the color of the button for 3 seconds if the button is pressed and disable the onTap also for the peroid of time?

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../utils/definitions.dart';
import 'icons.dart';
import '../model/label.dart';

class LabelButton extends StatefulWidget {
  final Label? label;
  final VoidStringCallback? process;


  LabelButton({required this.label, required this.process, Key? key})
      : super(key: key);

  @override
  State<LabelButton> createState() => _LabelButtonState();

  const LabelButton._(this.label, this.process, {Key? key})
      : super(key: key);

  static LabelButton createBlank() {
    return const LabelButton._(null, null);
  }
}

class _LabelButtonState extends State<LabelButton> {
  bool _hasBeenPressed = false;

  @override
  Widget build(BuildContext context) {



    if (widget.label != null) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(12),
          child: Material(
            child: InkWell(
              highlightColor: Color(0xFF00D3F8).withOpacity(0.3),
              splashColor: Color(0xFFB20DD3).withOpacity(0.3),

              onTap: () {
                setState(() async {
                  /*Timer(Duration(seconds: 3), (){
                    _hasBeenPressed = !_hasBeenPressed;
                    print("inside" + _hasBeenPressed.toString()); //prints true
                     });
                  _hasBeenPressed = !_hasBeenPressed;
                  print(_hasBeenPressed); // prints false
                  */
                  _hasBeenPressed = true;
                  print("CLICKED");
                  await Future.delayed(const Duration(seconds: 3), () {
                    print("nach");
                    _hasBeenPressed = false;
                  });
                  print(_hasBeenPressed);
                });

                widget.process!(widget.label!.identifier, widget.label!.category, widget.label!.id);
                HapticFeedback.lightImpact();
              },
              child: Ink(
                width: 100, // Breite anpassen
                height: 120, // Höhe anpassen
                //padding: const EdgeInsets.all(10.0),
                decoration: BoxDecoration(
                  color: _hasBeenPressed ? const Color(0xFFB6B6B6) : Colors.green
                  /*border: Border.all(
                color: Colors.black, // Rahmenfarbe anpassen
                width: 2, // Rahmendicke anpassen
              ),*/

                  //borderRadius: BorderRadius.circular(12), // Eckradius anpassen
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(iconList
                        .firstWhere((element) => element.name == widget.label!.uiIcon)
                        .icon,
                      size: 80,),
                    /*const Icon(CustomIcons.construction,
                      size: 80,),*/
                    Text(widget.label!.categoryName,
                          style: const TextStyle(
                            color: Color(0xFF696969),
                            //fontWeight: FontWeight.bold,
                          )),
                    Text(widget.label!.name,
                        style: const TextStyle(
                        fontWeight: FontWeight.bold,
                      )), // Text unter dem Icon
                  ],
                ),
              ),
            ),
          )

        )

      );
    }
    else {
      return Container();
    }


  }
}
Tags:

2

Answers


  1. 0

    i don’t what you are trying to do.

    but you need to correct few thing i.e, setState(() async { setState can not be done async. you can do as below.

    import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool hasclicked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: InkWell(
              onTap: () async {
                if (hasclicked) {
                  setState(() {
                    hasclicked = !hasclicked;
                  });
                } else {
                  await Future.delayed(const Duration(seconds: 3), () {
                    setState(() {
                      hasclicked = !hasclicked;
                    });
                  });
                }
              },
              child: Container(
                  decoration: BoxDecoration(
                    color: hasclicked ? Colors.red : Colors.green,
                  ),
                  child: Text(
                    'Hello, World!',
                    style: Theme.of(context).textTheme.headlineMedium,
                  ))),
        ),
      ),
    );
  }
}

    if you want

    Login or Signup to reply.
  2. 0

    You are awaiting for few seconds before firing setState((){});. That’s causing the issue.

    ....
onTap: () async {
   ........

   _hasBeenPressed = true;
   setState(() {});
   await Future.delayed(const Duration(seconds: 3), () {
        print("nach");
        _hasBeenPressed = false;
        setState(() {});
   });

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

Back To Top
Search