The is a delay in showing the secondPage after the animation

[JosueMCapita]

Hi there!

I think that the current readme of the package is not set according the last update.

After running the animation the first page remains for some seconds and then the second page shows.

Sorry for my English.
Thanks in advance.

[ericdallo]

Hey @JosueMCapita, thanks for the feedback but that was just an example, you can customize the delay passing a delay to the RippleEffect widget.

RippleEffect(
  pageKey: pageKey,
  effectKey: effectKey,
  delay: const Duration(milliseconds: 500)
  child: ...
)

[JosueMCapita]

Hey! Thanks for the quick answer @ericdallo. You have there a great package by the way!!
Even when i set the delay, still works the same way.

My problem is that after running the animation, the first page remains for some seconds and then the second page shows. Its a bit different from the example that you have shown in .gif.

My second page must have the RipplePage widget too ?

Thanks in advance.

[ericdallo]

Thank you :)
Do you have a gif of your problem?

There are 3 properties that may achieve what you are looking for:

• animationDelay: the time of the animation since its starts and fills the screen.
• delay: the time to keep the animation after it fulfilled the screen.
• inflateMultiplier: The size of the filled animation, the default is 1.3 decreasing it to 1.2 or .1.1 may reduce waiting time of the end animation.

[JosueMCapita]

Yes I have!

The first screen has an illustration of a boy in the rain (it doesn't show at the beginning of the .gif, because it took a little bit to fully load), a text and a CircularProgressIndicator widget.

After the animation, it goes to a second screen but with a small delay.

And here is the code:

RipplePage(
    pageKey: pageKey,

    ...

    RippleEffect(
        pageKey: pageKey,
        effectKey: effectKey,
        animationDuration: const Duration(seconds: 2),
        delay: const Duration(milliseconds: 450),
        color: ColorGreen,
        child: const CircularProgressIndicator(),
      ),

     ...
);

And I start the RippleEffect using RippleEffect.start, triggered after a response from an API request:

RippleEffect.start(effectKey, () {
    Navigator.of(context).pushReplacement(
        FadeRouteBuilder(
            page: MainHome(),
        ),
    );
});

[ericdallo]

Nice!
@JosueMCapita could you try setting inflateMultiplier to 1.1 or 1.2 or something like that to check if the delay is decreased?
Did you try to decrease the delay from 450ms for a lower value?

[JosueMCapita]

@ericdallo yes I've tried, but I got the same result!
I even tried to set the delay to Duration(milliseconds: 0)

I will try setting inflateMultiplier to 1.1 or 1.2.

[JosueMCapita]

Hi @ericdallo !

Still working the same way.
After the animation, the first screen keeps there, for a few milliseconds,
and then goes to the other screen.

[ericdallo]

I'll take a look on it later today and try to reproduce this behavior @JosueMCapita

[JosueMCapita]

Thank you very much @ericdallo.
I'll be waiting for your feedback.

[ericdallo]

@JosueMCapita, I just tested with the example app from this project using the following config:

animationDuration: const Duration(seconds: 2),
delay: Duration.zero,
inflateMultiplier: 1.0,

and it seems to work:

I achieved what you want after adding the inflateMultiplier property.

[JosueMCapita]

Thanks for your help, @ericdallo

Can you show me all of the code that you used for this test, please ?

Maybe the problem was the way I implemented!

Because it still working the same way!

Here is my full code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
                   .......
import 'package:ripple_effect/ripple_effect.dart';

class InitApp extends StatefulWidget {
  @override
  _InitAppState createState() => _InitAppState();
}

class _InitAppState extends State<InitApp> {
  final pageKey = RipplePage.createGlobalKey();
  final effectKey = RippleEffect.createGlobalKey();

  bool _showWhiteLogo = false;

  @override
  void initState() {
    SystemChrome.setEnabledSystemUIOverlays([]);

    _initUserData();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return RipplePage(
      pageKey: pageKey,
      child: Scaffold(
        backgroundColor: ColorWhite2,
        body: Stack(
          fit: StackFit.expand,
          alignment: Alignment.center,
          children: [
            Positioned(
              top: 40,
              left: 0,
              right: 0,
              child: AppLogo.aspectRatio(
                aspectRatio: 3 / 0.3,
                logoAssetPath: (_showWhiteLogo) ? "assets/images/logo-white.png" : "assets/images/logo-colored.png",
              ),
            ),
            Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                AspectRatio(
                  aspectRatio: 3 / 2,
                  child: Image.asset("assets/images/express_rain.png"),
                ),
                const SizedBox(
                  height: 30,
                ),
                Text(
                  "Preparando o ambiente",
                  style: Theme.of(context).textTheme.headline3.copyWith(
                    fontSize: 15
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 40,
                  ),
                  child: Text(
                    "Estamos buscando todos os dados e preparando\no ambiente para si",
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.headline3.copyWith(
                      fontSize: 13,
                      color: Colors.grey[400]
                    ),
                  ),
                ),
                const SizedBox(
                  height: 40,
                ),
                RippleEffect(
                  pageKey: pageKey,
                  effectKey: effectKey,
                  animationDuration: Duration(seconds: 2),
                  delay: Duration.zero,
                  color: ColorGreen,
                  inflateMultiplier: 1.0,
                  child: CustomCircularProgressIndicatorWidget(),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  void _initUserData() async {
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    
    final String jwt = await SharedPreferencesService.getUserData(context);

    if (jwt != null) {
      var reponse = await getUserData(jwt);
      if (reponse != null) {
        if (reponse.status == 200) {
          if (reponse.code == "000") {

            AuthenticationService.initializeAppData(context, reponse, jwt: jwt);

            RippleEffect.start(effectKey, () {
              Navigator.of(context).pushReplacement(
                FadeRouteBuilder(
                  page: MainHome(),
                ),
              );
            });
            return;
            
          } else if (reponse.code == "004") {
            RippleEffect.start(effectKey, () {
              insertOverlay(context, message: "Sessão inválida, volte a iniciar a sessão", success: false);
              Navigator.of(context).pushReplacement(
                FadeRouteBuilder(
                  page: LoginPage(),
                ),
              );
            });
          }
        }
      }
    }

    RippleEffect.start(effectKey, () {
      Navigator.of(context).pushReplacement(
        FadeRouteBuilder(
          page: WelcomePage(),
        ),
      );
    });
    
  }
}

[ericdallo]

I updated the example of the repo with that code

[ericdallo]

@JosueMCapita Can you confirm what version of the lib are you using? I released a new version today 0.1.2 bumping flutter version

[JosueMCapita]

@ericdallo I am using version 0.1.1

[ericdallo]

Odd...
Can you please test the above to help us find the problem?

• Using latest 0.1.2 version
• Changing the child from CustomCircularProgressIndicatorWidget to a FloatingActionButton
• Lower inflateMultiplier to 0.9 or 0.8

And record a gif if does not work

[JosueMCapita]

OK @ericdallo I will test that!