raised - flutter raise button

¿Cómo deshabilito un botón en Flutter?

Question

Estoy empezando a familiarizarme con Flutter, pero tengo problemas para averiguar cómo configurar el estado habilitado de un botón.

En los documentos, dice que se debe establecer onPressed en nulo para deshabilitar un botón y asignarle un valor para habilitarlo. Esto está bien si el botón continúa en el mismo estado para el ciclo de vida.

Me da la impresión de que necesito crear un widget de estado personalizado que me permita actualizar el estado habilitado del botón (o la devolución de llamada en curso) de alguna manera.

Entonces mi pregunta es ¿cómo haría eso? Esto parece un requisito bastante sencillo, pero no puedo encontrar nada en la documentación sobre cómo hacerlo.

Gracias.

Answer 1

Creo que es posible que desee introducir algunas funciones de ayuda para build su botón, así como un widget de estado junto con algunas propiedades para desactivar.

• Use un StatefulWidget / State y cree una variable para mantener su condición (por ejemplo, isButtonDisabled )
• Establece esto en verdadero inicialmente (si eso es lo que deseas)
• Al representar el botón, no establezca directamente el valor onPressed en null o alguna función onPressed: () {}
• En su lugar , configúralo condicionalmente mediante una función ternaria o auxiliar (ejemplo a continuación)
• Verifique que isButtonDisabled sea ​​parte de este condicional y devuelva null o alguna función.
• Cuando se presiona el botón (o cuando quiera deshabilitarlo) use setState(() => isButtonDisabled = true) para setState(() => isButtonDisabled = true) la variable condicional.
• Flutter volverá a llamar al método build() con el nuevo estado y el botón se procesará con un controlador de presión null y se desactivará.

Aquí hay un poco más de contexto usando el proyecto de contador Flutter.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool _isButtonDisabled;

  @override
  void initState() {
    _isButtonDisabled = false;
  }

  void _incrementCounter() {
    setState(() {
      _isButtonDisabled = true;
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("The App"),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              ''You have pushed the button this many times:'',
            ),
            new Text(
              ''$_counter'',
              style: Theme.of(context).textTheme.display1,
            ),
            _buildCounterButton(),
          ],
        ),
      ),
    );
  }

  Widget _buildCounterButton() {
    return new RaisedButton(
      child: new Text(
        _isButtonDisabled ? "Hold on..." : "Increment"
      ),
      onPressed: _isButtonDisabled ? null : _incrementCounter,
    );
  }
}

En este ejemplo, estoy usando un ternario en línea para configurar condicionalmente el Text y onPressed , pero puede ser más apropiado que extraigas esto en una función (puedes usar este mismo método para cambiar el texto del botón):

Widget _buildCounterButton() {
    return new RaisedButton(
      child: new Text(
        _isButtonDisabled ? "Hold on..." : "Increment"
      ),
      onPressed: _counterButtonPress(),
    );
  }

  Function _counterButtonPress() {
    if (_isButtonDisabled) {
      return null;
    } else {
      return () {
        // do anything else you may want to here
        _incrementCounter();
      };
    }
  }

Answer 2

La respuesta simple es onPressed : null da un botón deshabilitado.

Answer 3

Para un número específico y limitado de widgets, envolviéndolos en un widget IgnorePointer hace exactamente esto: cuando su propiedad de ignoring se establece en verdadero, el sub-widget (en realidad, todo el subárbol) no se puede hacer clic.

IgnorePointer(
    ignoring: true, // or false
    child: RaisedButton(
        onPressed: _logInWithFacebook,
        child: Text("Facebook sign-in"),
        ),
),

De lo contrario, si pretende deshabilitar un subárbol completo, busque en AbsorbPointer ().

Answer 4

Puede habilitar o deshabilitar botones como este

RaisedButton(onPressed: () => isEnabled ? _handleClick : null) 

Answer 5

Según los documentos:

"Si la devolución de llamada onPressed es nula, entonces el botón se desactivará y, por defecto, se parecerá a un botón plano en el color deshabilitado".

https://docs.flutter.io/flutter/material/RaisedButton-class.html

Entonces, podrías hacer algo como esto:

    RaisedButton(
      onPressed: calculateWhetherDisabledReturnsBool() ? null : () => whatToDoOnPressed,
      child: Text(''Button text'')
    );

Answer 6

También puede usar AbsorbPointer, y puede usarlo de la siguiente manera:

AbsorbPointer(
      absorbing: true, // by default is true
      child: RaisedButton(
        onPressed: (){
          print(''pending to implement onPressed function'');
        },
        child: Text("Button Click!!!"),
      ),
    ),

Si desea saber más sobre este widget, puede consultar el siguiente enlace Flutter Docs