将按钮动画化为进度指示器

Question

我有一个按钮，单击该按钮可显示进度指示器，我需要为进度指示器中的按钮设置动画，例如从按钮到进度指示器的转换

showProgressIndicator ? FloatingActionButton(
  elevation: 5.0,
  child: CircularProgressIndicator(),
  backgroundColor: Colors.white,
  onPressed: (){}
) : Padding(
  padding: const EdgeInsets.only(left: 20.0, right: 20.0),
  child: ButtonTheme(
    height: 40.0,
    child: RaisedButton(
      color: Color(0xFFFD6600),
      child: Text("Login", style: TextStyle(fontSize: 16.0),),
      textColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      onPressed: () {
        setState(() {
          showProgressIndicator = true;
        });
      },
    ),
  ),
),

Answer 1

也许像这样使用AnimatedContainer：

InkWell(
                borderRadius: BorderRadius.circular(20),
                onTap: isLoading ? null : () => buttonPressed(),
                child: AnimatedContainer(
                    curve: Curves.easeInOutCubic,
                    padding: (isLoading)
                        ? EdgeInsets.fromLTRB(10, 10, 10, 10)
                        : EdgeInsets.fromLTRB(40, 10, 40, 10),
                    decoration: BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: BorderRadius.circular(20),
                    ),
                    duration: Duration(milliseconds: 400),
                    child: isLoading
                        ? CircularProgressIndicator(
                            valueColor: new AlwaysStoppedAnimation<Color>(
                                Colors.white),
                          )
                        : Text(
                            "LOGIN",
                            style: TextStyle(
                              fontSize: 18,
                              color: Colors.white,
                            ),
                          )),
              ),

Answer 2

您可以使用类似的方法，使用变量来保持按钮状态。

return _isLoading
                  ? Center(
                      child: CircularProgressIndicator(),
                    )
                  : RaisedButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(30)),
                      color: .green,
                      child: Text(
                        'Continue',
                        style: TextStyle(
                            fontSize: 17.0,
                            fontFamily: 'SFUIDisplay-Bold',
                            color: .white),
                      ),
                      onPressed: () => _submitForm(),
                    );