how to add loader when on the toggle button-CodePudding

I want to display a circular loader when user is going to on the toggle button, then after few secs toggle button will active.

here is my code


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(),
                  ],
                );

please help how to do this

CodePudding user response：

To achieve that, you need bool _isLoading and a timer. Steps I would do:

Declare _isLoading: bool _isLoading = false;

Change _isLoading value using a timer:

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 on your build method (for example):

@override
Widget build(BuildContext context) {
  return _isLoading ? CircularProgressIndicator() : Container();
}

Or to hide your button:

@override
Widget build(BuildContext context) {
  return _isLoading ? Container() : YourToggleButton;
}

Also remember to dispose your timer!

@override
void dispose() {
  timer.cancel();
}

CodePudding user response：

So, If you are on Flutter web, there is a widget called MouseRegion which has onHover, onEnter & onExit.

You can assign a new bool for instance bool showLoader=false which you will toggle to true with setState (inside the onHover, where you could also start the Timer and when finished reset the showLoader to false).

Now you can show your button with a ternary operator : showLoader ? CircularProgressIndicator() : YourButton()