flutter - 火种上的动画就像图像滑动颤动

Question

我正在开发像 Muzlock 和 Bumble 这样的约会应用程序的 UI。我已经开发了一个像 tinder 一样的滑动图像屏幕，但是在滑动过程中只是 muzlock 或 bumble 按钮应该在屏幕上动画，并且当取消或完成滑动时按钮应该消失。我已经为 onswipe 功能上的按钮设置了动画，但是当我重置动画时，滑动不起作用，并且我收到此错误“在构建期间调用 setState() 或 markNeedsBuild()。”。有什么帮助吗？

I'm developing the UI of a dating app like Muzlock and Bumble. I have developed a swipe images screen like tinder on it but just muzlock or bumble during swipe a button should animated on the screen and the button should disappear when swipe is cancelled or completed. I have animated the button on the onswipe function but when I reset the animation the swipe doesn' work and I get this error "setState called during debug".
Any Help?

        enter code here
    import 'dart:async';
    
    import 'package:flutter/material.dart';
    import 'package:MuzMatch/EditProfile/Filters.dart'; 
    import 'package:MuzMatch/PremiumMatch.dart'; 
    import 'package:swipe_stack/swipe_stack.dart';
     
    class Home4 extends StatefulWidget {
      @override
      _Home4State createState() => _Home4State();
    }
    
    class _Home4State extends State<Home4> with TickerProviderStateMixin  {
      final GlobalKey<SwipeStackState> _swipeKey = GlobalKey<SwipeStackState>();
      List<String> images=[
        
        "assets/images/girl1.jpg",
         "assets/images/girl2.jpg",
          "assets/images/girl3.jpg",
          "assets/images/girl1.jpg",
         "assets/images/girl2.jpg",
          "assets/images/girl3.jpg"
      
      ];
      List<String> left=[];
      List<String> right=[];
     
    
       
       Animation<double> animation,animation2;            
                                   AnimationController controller,controller2;            
                                  
                                   @override            
                                    void initState() {            
                                        super.initState(); 
                                               
    for(int i=0; i<images.length;i++){
      left.add('assets/images/left.png');
      right.add('assets/images/right.png');
    }
    
                                        controller =            
                                            AnimationController(duration: const Duration(seconds: 1), vsync: this); 
                                             controller2 =            
                                            AnimationController(duration: const Duration(seconds: 2), vsync: this);            
                                       animation = Tween<double>(begin: 0, end: 350).animate(controller)            
                                         ..addListener(() {            
                                           setState(() {     
                                            
                                            // The state that has changed here is the animation object’s value.            
                                           });            
                                          });        
                                           animation2 = Tween<double>(begin: 0, end: 350).animate(controller2)            
                                         ..addListener(() {            
                                           setState(() {   
                                                   
                                            // The state that has changed here is the animation object’s value.            
                                           });            
                                          });      
                                        
                                    }
       
     
     
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body:   
                               getStack()
                            
      
          
        );
      }
      Widget getStack(){
     return Stack(children: [
       
            Positioned.fill(
                 
                //  bottom: 100,
                child: Align(
                    alignment: Alignment.topCenter,
                    child: Padding(
                        padding: EdgeInsets.all(10),
                        child: Container(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              InkWell(
                                onTap: (){
                                   Navigator.of(context).push(
                                MaterialPageRoute(builder: (_) => PremiumMatch()),
                              );
                                },
                                                        child: ImageIcon(
                                  AssetImage(
                                    'assets/images/match 1111.png',
                                  ),
                                  size: 50,
                                  color: Colors.grey[400],
                                ),
                              ),
                              Image.asset(
                                "assets/images/logo.png",
                                height: 80,
                                width: 80,
                              ),
                              InkWell(
                                onTap: (){
                                   Navigator.of(context).push(
                                MaterialPageRoute(builder: (_) => Filters()),
                              );
                                },
                                                        child: ImageIcon(
                                  AssetImage('assets/images/Filter final.png'),
                                  size: 40,
                                  color: Colors.grey[400],
                                ),
                              )
                            ],
                          ),
                        )))),
            Positioned.fill(
                top: 80,
                child: Align(
                    alignment: Alignment.center,
                    child: 
                          Container(
                               
                               color: Colors.grey[200],
                               height: MediaQuery.of(context).size.height * 0.85,
                              child:  SwipeStack(
                                    key: _swipeKey,
        children: [0, 1, 2, 3, 4,5].map((int index) {
          
            
            return SwiperItem(
            
                builder: (SwiperPosition position, double progress) {
                
                
                    return Container(
                         color: Colors.grey[200],
                        child: SingleChildScrollView(
                                
                           child: Column(
                             children: [
                                 Stack(
                                   children: [
                                     Container(
                                   height: MediaQuery.of(context).size.height * 0.73,
                                     
                                     child: ClipRRect(
                                          borderRadius: BorderRadius.circular(16.0),
                                         child: 
                                             Image.asset(
                                             images[index],
                                             width: double.infinity,
                                             fit: BoxFit.cover,
                                           )
    
                                     )
                                       
           
            
                                       ),
                                      
                        ),
                      
                    );
                }
            );
        }).toList(),
         
        
        stackFrom: StackFrom.None,
        translationInterval: 6,
        scaleInterval: 0.03,
        
        
        
        onSwipe: (int index, SwiperPosition position) => {
           if(position==SwiperPosition.Right)
          {
             controller.forward().then(v=> controller.reset());
    
          }
    else{
    
           controller2.forward().then(v=> controller.reset());
        },
         
    ),
                            )
                        )),
                    
      
                 Positioned.fill(
                 // bottom: 20,
                 top: 10,
                 // right: 20,
                 child: Align(
                     alignment: Alignment.center,
                     child: Padding(
                         padding: EdgeInsets.only(right: 30, left: 30),
                         child: Row(
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
                           children: [
              AnimatedContainer(
             
       height: animation.value,
         duration:Duration(milliseconds:2) ,
         curve: Curves.bounceInOut,
      
           child:  Container(
                               height: 50,
                               width: 50,
                              
                               color: Colors.transparent,
                              
                             child:Image.asset(left[0])
                             )
                           ),
      SizedBox(height: 10),
                            AnimatedContainer(
               
     height: animation2.value,
      duration:Duration(milliseconds:2) ,
         curve: Curves.bounceInOut,
      
           child:  Container(
                               height: 50,
                               width: 50,
                               color: Colors.transparent,
                               child:Image.asset(right[0],
                              
                             )
                             )
                            )
                          ],
                         )))),
      
           
           
          ]);
      }
     
      void visible(){
        setState(() {
          _visible=true;
        });
      }
       void hide(){
        setState(() {
          _visible=false;
        });
      }
      }



 

标签： fluttersetstateflutter-animationflutter-test