How to add JSON animation after sign up-CodePudding

I want to add an animation in my app after creating account in signup tab

                   Padding(
              padding: const EdgeInsets.symmetric(horizontal: 25.0),
              child: GestureDetector(
                onTap: signUp,
                child: Container(
                  padding: EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    color: Colors.lightBlueAccent,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Center(
                    child: Text(
                      'Sign Up',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 18,
                      ),
                    ),
                  ),
                ),
              ),
            ),

I just want to add some animation in may mobile app. i just want put some animation like thank you for registered using JSON. Thank you in advance!!

CodePudding user response：

You can create a custom dialog box that will show after clicking the signup button. Something just like this:

        import 'package:flutter/material.dart';
    import 'package:lottie/lottie.dart';

    class CustomDialog extends StatelessWidget {
      const CustomDialog({Key? key}) : super(key: key);

      dialogContent(BuildContext context) {
        return Container(
          decoration: BoxDecoration(
            color: Colors.white,
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(10),
            boxShadow: [
              const BoxShadow(
                color: Colors.black26,
                blurRadius: 10.0,
                offset: Offset(0.0, 10.0),
              ),
            ],
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min, // To make the card compact
            children: <Widget>[
              Align(
                alignment: Alignment.topRight,
                child: IconButton(
                    onPressed: () => Navigator.pop(context, false),
                    icon: const Icon(Icons.cancel)),
              ),
              Lottie.asset('assets/animations/support.json',
                  width: 200, height: 200, fit: BoxFit.cover),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 40.0),
                child: Text(
                  "New user has been successfuly created".toUpperCase(),
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
              SizedBox(height: 24.0),
            ],
          ),
        );
      }

      @override
      Widget build(BuildContext context) {
        return Dialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          elevation: 0.0,
          backgroundColor: Colors.transparent,
          child: dialogContent(context),
        );
      }
    }

and add this inside your signup code.

showDialog(
    context: context,
    builder: (BuildContext context) {
      return CustomDialog();
    });

CodePudding user response：

You can use the lottie package: https://pub.dev/packages/lottie

Just download any animation as JSON-file from the official Lottie Files website: https://lottiefiles.com/ and drag it into your apps assets folder

Add the asset in your pubspec.yaml file:

flutter:
    assets:
      - assets/lottie/

Now display it in your app:

Center(
    child: Lottie.asset('assets/lottie/animation.json'),
);