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

CodePudding user response：

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'}')));
  }
}

CodePudding user response：

• 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:

For After 2 seconds: