I'm using animated icon for open and closing side menu into my app. I need to change the closing icon color Red and opening icon color will be white.
AnimatedIcon(
progress: _animationController.view,
icon: menuClose,
color: menuIconColor, >need to apply condition here
size: 25.sp,
)
Full code of the button are given below
Align(
alignment: Alignment(0, .99),
child: GestureDetector(
onTap: () {
onIconPressed();
},
child: ClipRRect(
borderRadius: BorderRadius.circular(80),
child: Container(
width: 50.w,
height: 45.h,
color: colorAnimatedButton,
alignment: Alignment.center,
child: AnimatedIcon(
progress: _animationController.view,
icon: menuClose,
color: iconColor,
size: 25.sp,
),
),
),
),
)
CodePudding user response:
Try with this code i used null safety sdk.
class AnimIconTest extends StatefulWidget {
const AnimIconTest({Key? key}) : super(key: key);
@override
_AnimIconTestState createState() => _AnimIconTestState();
}
class _AnimIconTestState extends State<AnimIconTest>
with TickerProviderStateMixin {
late AnimationController _animationController;
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 400),
);
}
Color iconColor = Colors.white;
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.blueAccent,
body: Center(
child: InkWell(
onTap: () {
if (_animationController.status == AnimationStatus.completed) {
_animationController.reverse();
setState(() {
iconColor = Colors.white;
});
} else {
_animationController.animateTo(1.0);
setState(() {
iconColor = Colors.red;
});
}
},
child: AnimatedIcon(
progress: _animationController,
icon: AnimatedIcons.menu_close,
color: iconColor,
),
),
),
),
);
}
}
