Home > database >  how to make a button be inactive after being clicked dart flutter
how to make a button be inactive after being clicked dart flutter

Time:12-09

I have this button I want it to be inactive or disappear after being clicked. what should I implement inside the onPressed ?

 const Divider(thickness: 1.5, height: 1),
                  Container(
                      width: 200,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            //alignment: Alignment.bottomCenter,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(100.0),
                            ),
                            //padding: EdgeInsets.all(2),
                            elevation: 0,
                            primary: Color(0xff71B4CC),
                            shadowColor: Colors.transparent),
                        child: Text("Generate",
                            style: GoogleFonts.asap(
                              fontSize: 18,
                              color: const Color(0xffffffff),
                              fontWeight: FontWeight.w700,
                            )),
                        onPressed: () {
                          timeInMin(timeList[selectedIndex ?? 0]);
                        },
                      ))
                ],

CodePudding user response:

You have to go through same approach to get both result

to hide button

class _MyHomePageState extends State<MyHomePage> {

  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Visibility(
            visible: _isVisible,
            child: SizedBox(
              child: ElevatedButton(onPressed: (){
                setState(() {
                  _isVisible = false;
                });
              }, child: Text("Click Me"))
            ),
          ),
        ),
      ),
    );
  }
}

and to disable button

class _MyHomePageState extends State<MyHomePage> {

  bool _isDisabled = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: SizedBox(
            child: ElevatedButton(onPressed: _isDisabled ? null : (){
              setState(() {
                _isDisabled = false;
              });
            }, child: Text("Click Me"))
          ),
        ),
      ),
    );
  }
}

CodePudding user response:

To enable or disable the button, you need a state, so this needs to be a StatefulWidget, where the disabled variable exists in the state class:

onPressed: disabled 
           ? null
           : () => { 
              timeInMin(timeList[selectedIndex ?? 0]); 
              setState(() { disabled = true; });
            },

Setting the onPressed handler to null will disable the button.

  • Related