Why is my flutter_animate transition not hapenning?

Question

So basically I have been trying to achieve an animation. Also using flutter_animate 4.2.0+1 package. First let me show you the code:

in auth_page.dart file:

class AuthPage extends StatefulWidget {
  const AuthPage({super.key});

  @override
  State<AuthPage> createState() => _AuthPageState();
}

class _AuthPageState extends State<AuthPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
         ...
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
           ////SEE HERE////
              AuthBox().animate(target: authBoxTarget ? 1 : 0).slideY(
                    delay: Duration(milliseconds: 500),
                    duration: Duration(milliseconds: 500),
                    begin: 0,
                    end: 1,
                  ),
             ///////////
                ],
              ),
            ),
          ),
        );
      }
    }

In the authbox.dart file for the button: the onTap function:

      onTap: () {
    setState(() {
      authBoxTarget = true;
    });
    Future.delayed(
      Duration(milliseconds: 100),
      () {
        showGeneralDialog(
                 ...
            transitionBuilder: ... );
            return SlideTransition(
              position: tween.animate(...),
              child: child,
            );
          },
          pageBuilder: (context, _, __) {
            return Center(
              child: Container(...
                child: Center(
                  child: Text(
                    'Login',
                    style: TextStyle(...),
                  ),
                ),
              ),
            );
          },
        ).then((_) {
          setState(() {
            authBoxTarget = false;
          });
        });
      },
    );
  },

This should work right? -when the dialogue appears the authbox should slide down and on dismissed the authbox should come back up. But this is not hapenning the dialogue is coming but authbox is not going down...why??? give me solution.

mail.dart file:

void main() {
  runApp(
    MyApp(),
  );
  Animate.restartOnHotReload = true;
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const AuthPage(),
    );
  }
}

Answer 1

Okay so after a lot of research this is finally how to do it.

authbox.dart:

class AuthBox extends StatefulWidget {

  final void Function(bool) callback; //add this line here
  const AuthBox({super.key, required this.callback}); //update this line
.
.
.

class _AuthBoxState extends State<AuthBox> {
 @override
 Widget build(BuildContext context) {
  return ... (
.
.
.

onTap: (){ //inside onTap function

  widget.callback(true); //add this line

  Future.delayed(
    Duration (milliseconds: 100)

    showGeneratDiatog(...

          //at the end of showGeneratDiatog add the following then function
     ...).then((_) {
            widget.callback(false);
          });
  

auth_page.dart:

class _AuthPageState extends State<AuthPage> {

  bool authBoxTarget = false; //add the following boolean 

  //define the following function
  void triggerAuthBoxAnimation(bool showAuthBox) {
    setState(() {
      authBoxTarget = showAuthBox;
    });
  }
.
.
.   

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(...
    ... AuthBox(
                callback: triggerAuthBoxAnimation, //add the required callback function
              )
                  .animate(target: authBoxTarget ? 1 : 0) //add the target to animate
                  .slideY(
                      delay: Duration(milliseconds: 100),
                      duration: Duration(milliseconds: 400),
                      begin: 0,
                      end: 1,
                  )

That's it. Now it should work as desired. When the button in authbox is clicked it will notify in authpage through the void Function(bool) callback; and it will change the authBoxTarget value to true through the void triggerAuthBoxAnimation function and thus target value will be 1 and both the animation will take place together.