Flutter loading_animations not stay in Position

Question

I want to my floating button have their own loading animation. but, after I give animation to that button, animation goes to center of screen and not stay in his position. but not all animation doing like that.

this is my pubspec.yaml i used

loading_animations: ^2.2.0

this my code

bool _isloading = false;

_startLoading() {
setState(() {
  _isloading = true;
});

Timer(Duration(seconds: 3), () {
  setState(() {
    _isloading = false;
  });
});}

floatingActionButton:_isloading?
          LoadingDoubleFlipping.circle(
            borderColor: Colors.deepPurpleAccent,
            borderSize: 0.0,
            size: 50.0,
            backgroundColor: Colors.deepPurpleAccent,
            duration: Duration(seconds: 1),
          ):FloatingActionButton( //Floating action button on Scaffold
            onPressed: (){
              _startLoading();
              CheckOut();
            },
            child: Icon(Icons.check_rounded),
            backgroundColor: Colors.deepPurpleAccent,
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
          bottomNavigationBar: BottomAppBar( //bottom navigation bar on scaffold
            color:Color.fromRGBO(86, 213, 198, 1),
            shape: CircularNotchedRectangle(), //shape of notch
            notchMargin: 5, //notche margin between floating button and bottom appbar
            child: Row( //children inside bottom appbar
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(top: 15,bottom: 15,right: 15,left: 30),
                  child: Text(
                    'Check Out',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  ),
                ),
              ],
            ),
          ),

but this is what I get

enter image description here

and this is my button float looks like

enter image description here

but if I used with another animation, it's like what i want

enter image description here

is my code wrong ? or I'm just wrong logic ?

Answer 1

Wrap your LoadingDoubleFlipping.circle() animation with FloatingActionButton() and give Colors.transparent to your FloatingActionButton()

 floatingActionButton: _isloading
        ? FloatingActionButton(
            onPressed: () {},
            backgroundColor: Colors.transparent,
            child: LoadingDoubleFlipping.circle(
              borderColor: Colors.deepPurpleAccent,
              borderSize: 0.0,
              size: 50.0,
              backgroundColor: Colors.deepPurpleAccent,
              duration: Duration(seconds: 1),
            ),
          )
        : FloatingActionButton(
            //Floating action button on Scaffold
            onPressed: () {
              _startLoading();
            },
            child: Icon(Icons.check_rounded),
            backgroundColor: Colors.deepPurpleAccent,
          ),