Animate the button into progressindicator - flutter

Question

I have a button in on clicking the button I show the progress Indicator, what I need is animate the button in progress indicator something like the transformation from button to progress indicator
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

Maybe use AnimatedContainer like this:
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

You can use something like this, use a variable to keep button status.
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(),
);