简体   繁体   English

Flutter-更改打开(白色)和关闭(红色)的动画图标颜色

[英]Flutter- Change animated icon color for opening(white) and closing(red)

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,
          ),
        ),
      ),
    ),
  )

Try with this code i used null safety sdk.尝试使用此代码,我使用了 null 安全 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,
            ),
          ),
        ),
      ),
    );
  }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Android将图表颜色从白色更改为红色,但只有30% - Android change chart color from white to red but just 30% Flutter 动画图标AnimationController - Flutter animated icon AnimationController Osmdroid - 更改方向箭头的默认(白色)颜色(或如何自定义图标) - Osmdroid - change the default (white) color of the direction arrow (or how to customize the icon) 如何自定义状态栏图标和文字颜色? 例如状态栏背景:白色,状态栏图标颜色,文字:红色 - How to customize status bar icons and text color? E.g. status bar background: white, status bar icon color, and text: red 我想更改菜单导航栏中的一项(颜色和图标)或添加文本(新的红色) - I want to change one item(color & icon) in menu navigation bar or add text (New with red color) 我想从Java代码动态地将TextInputLayout的提示颜色从白色更改为红色。 - I want to change the hint color of TextInputLayout from white to red dynamically from java code. 如何将android状态栏颜色更改为白色,状态栏图标颜色更改为灰色 - How to change android status bar color to white and status bar icon color to grey 如何在 flutter 的 if-else 条件下更改图标值颜色? - How to give icon value color change in if-else condition in flutter? 颤动- !_debugLocked 不正确 - flutter- !_debugLocked is not true 如何将抽屉连接到flutter中的动画图标按钮? - How to connect drawer to animated icon button in flutter?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM