flutter - 有没有更简单的方法可以在提交按钮后添加加载动画？

Question

我在 UI 中创建了一个提交按钮。点击提交按钮后，我想放置圆形进度指示器，最后按钮显示完成。有没有更简单的方法来做到这一点？我附上了代码和输出图像。

class _AnimatedButtonState extends State<AnimatedButton>
  with TickerProviderStateMixin {
  AnimationController loadcontroller;
  AnimationController _controller;
  ButtonState _currentState;

 @override
   void initState(){

   _currentState = ButtonState.SHOW_ONLY_TEXT;
   _controller = AnimationController(vsync: this); 
    loadcontroller = AnimationController(
      vsync: this,
     duration: const Duration(seconds: 2),
      )..addListener(() {
     setState(() {});
    });
   loadcontroller.repeat(reverse: false);
   super.initState();
 }
 void dispose(){
  _controller.dispose();
  loadcontroller.dispose();
  super.dispose();
}
Widget build(BuildContext context) {
return Material(
  //border: Border.all(color: (_currentState == ButtonState.SHOW_ONLY_ICON) ? 
  widget.buttonStyle.secondaryColor : Colors.transparent ) ,
  borderRadius: BorderRadius.all(Radius.circular(widget.buttonStyle.borderRadius)) ,
  elevation: widget.buttonStyle.elevation,
  child: InkWell(
    onTap: (){
      loadcontroller.forward();
      //setState(() {
         _currentState = ButtonState.SHOW_ONLY_ICON;
          return Scaffold(
           body: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             children: <Widget>[
          
             CircularProgressIndicator(
              value: loadcontroller.value,
              semanticsLabel: 'Linear progress indicator',
             ),
           ],
         ),
       ),
    );
  //});
    },

标签： flutteruser-interface

Answer 1

有一个非常有用的包：flutter_progress_button