Question 248735 in Flutter Question posted in
The official Flutter documentation can be found here.

Why is my flutter_animate transition not hapenning?

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(),
    );
  }
}
Tags:

2

Answers


  1. 0

    If you want to run both animations at once, you can declare a new bool in your code, for example:

    bool isButtonPressed=false;

    Then, in your onTap handler, you add this at the beginning:

    setState(() {
              isButtonPressed = true;
            });

    After your showGeneralDialog you add this:

    .then((value) {
                  setState(() {
                    isButtonPressed = false;
                  });
                })

    And this is the code for your Animate Widget with the authbox inside:

    isButtonPressed
          ? Animate(
              effects: [
                SlideEffect(
                  end: Offset(0, 1),
                  delay: Duration(milliseconds: 400),
                  duration: Duration(milliseconds: 800),
                  curve: Curves.ease,
                ),
              ],
              child: authbox(),
            )
          : authbox()

    Simple solution, but it works.
    If you have any more questions, you can ask them in the comments.

    Login or Signup to reply.
  2. 0

    Add a callback to AuthBox to toggle the animation state:

    AuthBox(onDismiss: () => setState(() => authBoxTarget = !authBoxTarget))

    Receive the callback in AuthBox:

    class AuthBox extends StatelessWidget {
  final VoidCallback onDismiss;
  ...
}

    Use WillPopScope in the dialog to handle dismisses(and remove your .then() on the dialog):

    onPressed: () async {
            onDismiss();
            await Future.delayed(
              const Duration(milliseconds: 300),
              () => showGeneralDialog(
                context: context,
                pageBuilder: (BuildContext buildContext, Animation animation, Animation secondaryAnimation) {
                  return WillPopScope(
                    onWillPop: () async {
                      onDismiss();
                      return true;
                    },
                    child: /*your dialog content */
)}));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search