Flutter loading_animations 没有停留在 Position

Question

我想让我的浮动按钮有自己的加载动画。但是，在我为该按钮提供动画之后，动画会转到屏幕中心而不是停留在他的位置。但不是所有的动画都那样做。

这是我的pubspec.yaml我用过

loading_animations: ^2.2.0

这是我的代码

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

但这就是我得到的

enter image description here

这是我的按钮浮动看起来像

enter image description here

但如果我使用另一个动画，它就像我想要的那样

enter image description here

我的代码错了吗？或者我只是逻辑错误？

Answer 1

用 FloatingActionButton() 包装你的 LoadingDoubleFlipping.circle() 动画，然后将 Colors.transparent 给你的 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,
          ),

Flutter loading_animations 没有停留在 Position

Flutter loading_animations not stay in Position

flutter

floating-action-button

loading-animation