Flutter 颤振所有动画在单击后向前开始

我试图通过学习新的小部件来提高自己，当我在使用动画和动画时，我遇到了一个问题，在为每个小部件添加了两个动画图标和InkWell小部件后，当我按下其中一个图标时，另一个也开始动画，我如何防止这种情况发生

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyFirstWidget(),
    );
  }
}

class MyFirstWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyFirstWidgetState();
}

class MyFirstWidgetState extends State<MyFirstWidget>
    with SingleTickerProviderStateMixin {
  bool reverse = false, reverse1 = false;
  Animation animation;
  AnimationController animationController, animationController1;
  @override
  void initState() {
    super.initState();
    animationController =
        new AnimationController(vsync: this, duration: Duration(seconds: 1));
    animation = Tween<double>(begin: 0, end: 2).animate(animationController);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage("assets/mathware.jpg"),fit: BoxFit.cover)),
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    InkWell(
                      onTap: () {
                        if (reverse == false) {
                          animationController.forward();
                        } else
                          animationController.reverse();
                        reverse = !reverse;
                      },
                      child: AnimatedIcon(
                        icon: AnimatedIcons.home_menu,
                        progress: animation,
                        size: 50,
                        color: Colors.black,
                      ),
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    InkWell(
                      onTap: () {
                        if (reverse1 == false) {
                          animationController1.forward();
                        } else
                          animationController1.reverse();
                        reverse1 = !reverse1;
                      },
                      child: AnimatedIcon(
                        icon: AnimatedIcons.event_add,
                        progress: animation,
                        size: 50,
                        color: Colors.black,
                      ),
                    ),
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
debugShowCheckedModeBanner:false，
主页：MyFirstWidget（），
);
}
}
类MyFirstWidget扩展了StatefulWidget{
@凌驾
State createState（）=>MyFirstWidgetState（）；
}
类MyFirstWidgetState扩展了状态
使用SingleTickerProviderStateMixin{
bool reverse=false，reverse1=false；
动画；
AnimationController AnimationController，AnimationController 1；
@凌驾
void initState（）{
super.initState（）；
动画控制器=
新的AnimationController（vsync:this，duration:duration（秒数：1））；
animation=Tween（开始：0，结束：2）。设置动画（animationController）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
背景颜色：Colors.green，
主体：容器(
装饰：盒子装饰(
图片：DecorationImage（图片：AssetImage（“assets/mathware.jpg”），fit:BoxFit.cover），
子：堆栈(
fit:StackFit.expand，
儿童：[
纵队(
mainAxisAlignment:mainAxisAlignment.end，
儿童：[
划船(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
墨水池(
onTap:（）{
如果（反向==假）{
animationController.forward（）；
}否则
animationController.reverse（）；
反向=！反向；
},
孩子：动画片(
图标：AnimatedIcons.home_菜单，
进展：动画，
尺码：50，
颜色：颜色，黑色，
),
),
],
),
划船(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
墨水池(
onTap:（）{
if（reverse1==false）{
animationController1.forward（）；
}否则
animationController1.reverse（）；
反向1=！反向1；
},
孩子：动画片(
图标：animateDictions.event\u add，
进展：动画，
尺码：50，
颜色：颜色，黑色，
),
),
],
)
],
)
],
),
),
);
}
}

要实现这种行为，你应该这样做

将

SingleTickerProviderStateMixin

更改为

TickerProviderStateMixin

为每种类型的动画创建不同的

AnimationController

在

void initState（）

处使用正确的动画设置每个

AnimationController

为每个动画创建不同的

动画

将正确的

Aniumation

应用于动画小部件

class MyFirstWidget extends StatefulWidget {

@override
State<StatefulWidget> createState() => MyFirstWidgetState();

}

class MyFirstWidgetState extends State<MyFirstWidget> with TickerProviderStateMixin {

  bool reverse = false, reverse1 = false;
  Animation animation;
  Animation animation1;
  AnimationController animationController, animationController1;

  @override
  void initState() {
  super.initState();
      animationController = new AnimationController(vsync: this, duration: Duration(seconds: 1));
      animationController1 = new AnimationController(vsync: this, duration: Duration(seconds: 1));
      animation = Tween<double>(begin: 0, end: 2).animate(animationController);
      animation1 = Tween<double>(begin: 0, end: 2).animate(animationController1);
  }

  @override
  Widget build(BuildContext context) {
       return Scaffold(
              backgroundColor: Colors.green,
              body: Container(
                decoration: BoxDecoration(),
                child: Stack(
                  fit: StackFit.expand,
                  children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            InkWell(
                              onTap: () {
                                if (reverse == false) {
                                  animationController.forward();
                                } else
                                  animationController.reverse();
                                reverse = !reverse;
                              },
                              child: AnimatedIcon(
                                icon: AnimatedIcons.home_menu,
                                progress: animation,
                                size: 50,
                                color: Colors.black,
                              ),
                            ),
                          ],
                        ),
                    Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    InkWell(
                      onTap: () {
                        if (reverse1 == false) {
                          animationController1.forward();
                        } else
                          animationController1.reverse();
                        reverse1 = !reverse1;
                      },
                      child: AnimatedIcon(
                        icon: AnimatedIcons.event_add,
                        progress: animation1,
                        size: 50,
                        color: Colors.black,
                      ),
                    ),
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

类MyFirstWidget扩展了StatefulWidget{
@凌驾
State createState（）=>MyFirstWidgetState（）；
}
类MyFirstWidgetState使用TickerProviderStateMixin扩展状态{
bool reverse=false，reverse1=false；
动画；
动画1；
AnimationController AnimationController，AnimationController 1；
@凌驾
void initState（）{
super.initState（）；
animationController=新的animationController（vsync:this，duration:duration（秒：1））；
animationController1=新的AnimationController（vsync:this，duration:duration（seconds:1））；
animation=Tween（开始：0，结束：2）。设置动画（animationController）；
animation1=Tween（开始：0，结束：2）。设置动画（animationController1）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
背景颜色：Colors.green，
主体：容器(
装饰：BoxDecoration（），
子：堆栈(
fit:StackFit.expand，
儿童：[
纵队(
mainAxisAlignment:mainAxisAlignment.end，
儿童：[
划船(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
墨水池(
onTap:（）{
如果（反向==假）{
animationController.forward（）；
}否则
animationController.reverse（）；
反向=！反向；
},
孩子：动画片(
图标：AnimatedIcons.home_菜单，
进展：动画，
尺码：50，
颜色：颜色，黑色，
),
),
],
),
划船(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
墨水池(
onTap:（）{
if（reverse1==false）{
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyFirstWidget(),
    );
  }
}

class MyFirstWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyFirstWidgetState();
}

class MyFirstWidgetState extends State<MyFirstWidget>
  with TickerProviderStateMixin {
  bool reverse = false, reverse1 = false;
  Animation animation1,animation2;
  AnimationController animationController1, animationController2;
  @override
  void initState() {
    super.initState();
    animationController1 = new AnimationController(vsync: this, duration: Duration(seconds: 1));
    animationController2 = new AnimationController(vsync: this, duration: Duration(seconds: 1));
    animation1 = Tween<double>(begin: 0, end: 2).animate(animationController1);
    animation2 = Tween<double>(begin: 0, end: 2).animate(animationController2);

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.green,
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          InkWell(
            onTap: () {
              if (reverse == false) {
                animationController1.forward();
              } else
                animationController1.reverse();
              reverse = !reverse;
            },
            child: AnimatedIcon(
              icon: AnimatedIcons.home_menu,
              progress: animation1,
              size: 50,
              color: Colors.black,
            ),
          ),
          InkWell(
            onTap: () {
              if (reverse1 == false) {
                animationController2.forward();
              } else
                animationController2.reverse();
              reverse1 = !reverse1;
            },
            child: AnimatedIcon(
              icon: AnimatedIcons.event_add,
              progress: animation2,
              size: 50,
              color: Colors.black,
            ),
          ),
        ],
      ),
    );
  }
}