Quiero mostrar un cargador circular cuando el usuario va al botón de alternar, luego, después de unos segundos, el botón de alternar se activará.
aquí está mi código
InkWell( onTap: () { Navigator.of(context).push(MaterialPageRoute( builder: (context) => ProductProfile(), )); }, child: Container( decoration: BoxDecoration( color: _selectedProducts.contains(book.id) ? Colors.grey[200] :Colors.white, borderRadius: BorderRadius.all( Radius.circular(10), ), ), child: ListTile( dense: true, trailing: Switch( value: _selectedProducts.contains(book.id), onChanged: (bool? selected) { if (selected != null) { setState(() { _onProductSelected(selected, book.id); }); } }, activeTrackColor: HexColor("#b8c2cc"), activeColor: HexColor("#7367f0"), ), title: Text( book.title,), Divider() ), ), ), SizedBox10(), ], );por favor ayuda como hacer esto
Para lograrlo, necesita bool _isLoading y un timer . Pasos que haría:
Declare _isLoading: bool _isLoading = false;
Cambie el valor de _isLoading usando un temporizador:
void timer() { int _time = 10; Timer timer = new Timer.periodic( Duration(seconds: 1), (Timer timer) async { if (_time == 0) { _isLoading = true; timer.cancel(); } else { setState(() { _time--; }); } }, ); }Use _isLoading en su método de compilación (por ejemplo):
@override Widget build(BuildContext context) { return _isLoading ? CircularProgressIndicator() : Container(); }O para ocultar su botón:
@override Widget build(BuildContext context) { return _isLoading ? Container() : YourToggleButton; }¡Recuerde también desechar su temporizador!
@override void dispose() { timer.cancel(); }Entonces, si está en Flutter web, hay un widget llamado MouseRegion que tiene onHover , onEnter y onExit .
Puede asignar un bool nuevo, por ejemplo, bool showLoader=false , que cambiará a verdadero con setState (dentro de onHover , donde también podría iniciar el Timer y, cuando termine, restablecer el showLoader a falso).
Ahora puede mostrar su botón con un operador ternario: showLoader ? CircularProgressIndicator() : YourButton()