AnimatedSplashScreen PageTransitionType error

Question

I have a problem using AnimatedSplashScreen, everything works fine to the moment I add a pageTransitionType. Then I get an error:

The following _CastError was thrown building AnimatedBuilder(animation: Listenable.merge([kAlwaysCompleteAnimation➩ProxyAnimation, kAlwaysDismissedAnimation➩ProxyAnimation]), dirty, state: _AnimatedState#bd6f7): Null check operator used on a null value

This is a simple app which generates that problem:

import 'package:animated_splash_screen/animated_splash_screen.dart';
import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedSplashScreen(
        splash: Icon(Icons.person),
        pageTransitionType: PageTransitionType.scale, //with that line commented there is no error
        nextScreen: HomePage()
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

I have tried running many commands like flutter pub get etc.

Also, dependencies in pubspec.yaml are running smoothly:

animated_splash_screen: ^1.1.0
page_transition: ^2.0.1-nullsafety.0

Scorpion

Answer 1

Actually after all these years, I have found the answer myself.

The problem was, that the Animated Splash Screen Widget actually has two different parameters. One for the transition of the Splash animation splashTransition, and one for the next screen transition pageTransistionType.

So The simple app, that solved the question asked and allows for using a scale transition would look like this:

import 'package:animated_splash_screen/animated_splash_screen.dart';
import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedSplashScreen(
          splash: const Icon(Icons.person),
          splashTransition: SplashTransition.scaleTransition,
          pageTransitionType: PageTransitionType.fade, //with that line commented there is no error
          nextScreen: HomePage()
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Scorpion

Answer 2

I had the same problem and could recreate it. As I understood, you are trying to use the Property 'scale' for the pageTransitionType, like:

pageTransitionType: PageTransitionType.scale,

If you want to use scale, you will have to use (for example) a Navigator.push() within a PageTransition like this:

ElevatedButton(
    child: Text('Scale Transition Second Page'),
        onPressed: () {
        Navigator.push(
            context,
            PageTransition(
            curve: Curves.linear,
            type: PageTransitionType.scale,
            alignment: Alignment.topCenter,
            child: SecondPage(),
            ),
        );
    },
),

For using .scale as TransitionType you'll need an 'alignment' like it's shown in my example.

Further information:
https://github.com/kalismeras61/flutter_page_transition/issues/53#issuecomment-983511302
https://pub.dev/packages/page_transition/example

Efficient

thank you for your answer. Unfortunately this still doesn;t explain how to use pageTransitionType with AnimatedSplashScreen. My main problem is that AnimatedSplashScreen only fades in, and then goes straight to the main page instead of fading out smoothly – Scorpion

Answer 3

you can try this when import this package import'package:page_transition/page_transition.dart';

import 'package:animated_splash_screen/animated_splash_screen.dart';
import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';


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

  @override
  Widget build(BuildContext context) {
    return AnimatedSplashScreen(
      splash: 'images/splash.png',
      pageTransitionType: PageTransitionType.fade,
      animationDuration: const Duration(seconds: 6),
      splashTransition: SplashTransition.slideTransition,
      nextScreen: const MainView(),
    );
  }
}

Jerriejerrilee

I don't know if you saw, but I have actually solved it myself and accepted it as an answer. But thanks for trying to help. – Scorpion

Answer 4

Not sure how to solve the scale problem specifically, but you can change the transition type to another kind, for instance,

pageTransitionType: PageTransitionType.fade

Conger

yeah i did that to finish my project, but still i would like to make a scaled transition :/ – Scorpion

Answer 5

import 'package:page_transition/page_transition.dart';

Fare

Please read How to Answer and edit your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post. – Erving

Answer 6

Apparently, we must add the page_transition as a dependency.

There's a youtube video https://www.youtube.com/watch?v=q-e5t3qnB_M&t=1s

Here's the GitHub with the documentation https://github.com/kalismeras61/flutter_page_transition

I hope this helps you.

Subalternate

Unfortunately, as I stated in my question I have the page_transition already in my dependencies. Also because I am using an animated_splash_screen I cannot follow directly the tutorial and can't come up with a solution myself – Scorpion