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

How to disable elevated button for a certain amount of time? – Flutter

I want to disable a button for 900ms(using flutter). How can I do that?

                                 if (isButtonDisabled == false) {
                                    incrementCounter();
                                    AudioPlayer().play(
                                        AssetSource(
                                            Assets.correct_answer_audio),
                                        volume: 1.0);
                                    _onTyping();
                                  
                                    await Future.delayed(
                                        const Duration(milliseconds: 900));
                                    Navigator.of(context).pop();
                                    );
                                  }
Tags:

2

Answers


  1. 0

    to disable an ElevatedButton, you need to set null as onPressed when it is supposed to be disabled. Then enable it through either a Future.delayed or Timer by setting your enabled variable to true and calling setState. You can check this code snippet in Dartpad.

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool enabled = false;

  @override
  initState() {
    super.initState();
    Timer(
        const Duration(seconds: 3),
        () => setState(() {
              enabled = true;
            }));
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: ElevatedButton(
            onPressed: enabled ? () {} : null,
            child: Text('Button is ${enabled ? 'enabled' : 'disabled'}')));
  }
}
    Login or Signup to reply.
  2. 0

    • For Disabled Button => onPressed : null

    • For Active Button => onPressed : (){}

    Use Timer after certain interval set the isDisabledButton to false which would be by default true

    Example:

      class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool isButtonDisabled = true;
  @override
  void initState() {
    Timer(
        const Duration(seconds: 2),
        () => setState(() {
              isButtonDisabled = false;
            }));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: const Text(
          "Home Page",
        ),
        backgroundColor: Colors.transparent,
      ),
      body: Center(
          child: FilledButton(
              onPressed: isButtonDisabled ? null : () {},
              child: const Text("Disable Button"))),
    );
  }
}

    For first 2 seconds:

    enter image description here

    For After 2 seconds:

    enter image description here

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

Back To Top
Search