how to fix inverted 'ok' text in flatbutton? - flutter

Question

I'm beginner in flutter. trying to design login page. when user clicks on 'ok' button then 'ok' button gets invisible and 'approved' named button gets visible using some animation. problem is that 'ok' displayed in inverted form as shown in pic. how dI correct this issue?
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Animation class',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
State<StatefulWidget> createState() => stateClass();
}
class stateClass extends State<HomePage> with SingleTickerProviderStateMixin {
AnimationController animationController;
Animation<double> animation;
Animation<double> sizeAnimation;
int currentState = 0;
#override
void initState() {
super.initState();
animationController = AnimationController(
duration: Duration(milliseconds: 1000), vsync: this);
animation = Tween<double>(begin: 0, end: 60).animate(animationController)
..addListener(() {
setState(() {});
});
sizeAnimation = Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(
parent: animationController, curve: Curves.fastOutSlowIn))
..addListener(() {
setState(() {});
});
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('Animation login'),
),
body: Container(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 100,
//color: Colors.black,
child: Center(
child: Image.asset('assets/fluttericon.png'),
)),
Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
child: TextFormField(
decoration: InputDecoration(
labelText: 'enter your email id',
),
),
),
Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
child: TextFormField(
obscureText: true,
decoration: InputDecoration(
labelText: 'enter your password',
),
),
),
Container(
// color: Colors.teal,
// height: 0,
child: Center(
child: Transform.scale(
scale: sizeAnimation.value - 1,
child: FlatButton(
onPressed: animationController.forward,
color: Colors.redAccent[200],
child: Text(
'ok',
style: TextStyle(fontSize: 17, color: Colors.black),
),
),
)),
),
Container(
//color: Colors.teal,
height: 80,
child: Center(
child: Transform.scale(
scale: sizeAnimation.value,
child: FlatButton(
onPressed: animationController.reverse,
color: Colors.redAccent[200],
child: Text(
'approved',
style: TextStyle(fontSize: 17, color: Colors.black),
),
),
)),
),
],
),
)
)
);
}
}
Text container
Container(
// color: Colors.teal,
// height: 0,
child: Center(
child: Transform.scale(
scale: sizeAnimation.value-1 ,
child: FlatButton(
onPressed: animationController.forward,
color: Colors.redAccent[200],
child: Text(
'ok',
style: TextStyle(fontSize: 17, color: Colors.black),
),
),
)),
),
When I change sizeAnimation.value-1 to sizeAnimation. then 'ok' word is in erect form. but ok button is not invisible.
Screenshot preview

Answer 1

A possible solution for what you are trying to do is to use Fade and Rotate transitions with separate controllers for each Text widget. Here's an example of that:
class ButtonTextFadeRotation extends StatefulWidget {
#override
_ButtonTextFadeRotationState createState() => _ButtonTextFadeRotationState();
}
class _ButtonTextFadeRotationState extends State<ButtonTextFadeRotation> with TickerProviderStateMixin {
AnimationController _okAnimationController;
AnimationController _approvedAnimationController;
#override
void initState() {
_okAnimationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 200),
value: 1
);
_approvedAnimationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 200),
value: 0
);
super.initState();
}
#override
Widget build(BuildContext context) {
return Center(
child: ClipRect(
child: RaisedButton(
onPressed: () {
_okAnimationController.reverse();
_approvedAnimationController.forward();
},
child: Stack(
alignment: Alignment.center,
children: <Widget>[
FadeTransition(
opacity: _okAnimationController,
child: RotationTransition(
turns: _okAnimationController,
alignment: Alignment.center,
child: Text('Ok'),
),
),
FadeTransition(
opacity: _approvedAnimationController,
child: RotationTransition(
turns: _approvedAnimationController,
alignment: Alignment.center,
child: Text('Approved'),
),
),
],
),
),
),
);
}
}