两个图标的渐隐渐显切换效果:
AnimatedCrossFade(
duration: Duration(milliseconds: 400),
firstChild: GestureDetector(
onTap: () {
controller.changeLoginPage(1);
},
child: Icon(Icons.label, size: 40, color: Colors.grey),
),
secondChild: GestureDetector(
onTap: () {
controller.changeLoginPage(0);
},
child: Icon(Icons.favorite, size: 40, color: Colors.red),
),
crossFadeState: controller.isPhoneLogin.value
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
),
两个图标的弹动切换效果(需要key):
AnimatedSwitcher(
duration: Duration(milliseconds: 300),
switchInCurve: Curves.easeIn,
switchOutCurve: Curves.easeOut,
transitionBuilder:
(Widget child, Animation<double> animation) {
return ScaleTransition(scale: animation, child: child);
},
child: controller.isPhoneLogin.value
? Icon(
Icons.bookmark,
key: ValueKey('bookmarked'),
size: 40,
color: Colors.blue,
)
: Icon(
Icons.bookmark_border,
key: ValueKey('not_bookmarked'),
size: 40,
color: Colors.grey,
),
),