Home > Mobile >  Flutter- Change animated icon color for opening(white) and closing(red)
Flutter- Change animated icon color for opening(white) and closing(red)

Time:01-09

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,
            ),
          ),
        ),
      ),
    );
  }
}
  •  Tags:  
  • Related