Трепетать все анимации запускаются вперед на клике

Question

Я пытался улучшить себя, изучая новые виджеты, когда я работал с AnimatedIcons и Animations, у меня возникла проблема, после добавления двух анимированных значков и виджета 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,
                      ),
                    ),
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

Эй, просто измените SingleTickerProviderStateMixin на TickerProviderStateMixin и создайте 2 разные анимации для обоих ... Вы можете получить ссылку из прикрепленного

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,
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

Для достижения этого поведения вы должны сделать.

1. Изменить SingleTickerProviderStateMixin на TickerProviderStateMixin.
2. Создать разные AnimationController для каждого типа анимации.
3. Настройте каждый AnimationController с правильной анимацией на void initState().
4. Создайте разные Animation для каждой анимации.

5. Примените правильные 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,
                         ),
                       ),
                     ],
                   )
                 ],
               )
             ],
           ),
         ),
       );
     }
   }