CODEWITHSUNDEEP
flutterdartandroid-animationsplash-screennull-check
JerZaw
JerZaw

Reputation: 625

AnimatedSplashScreen PageTransitionType error

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

Upvotes: 6

Views: 3570

Answers (6)

Taher Salah
Taher Salah

Reputation: 427

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

Upvotes: 0

JerZaw
JerZaw

Reputation: 625

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

Upvotes: 0

MDias
MDias

Reputation: 59

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.

Upvotes: -1

Md. Abdur Rouf
Md. Abdur Rouf

Reputation: 11

import 'package:page_transition/page_transition.dart';

Upvotes: -1

Nadav Holtzman
Nadav Holtzman

Reputation: 298

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

pageTransitionType: PageTransitionType.fade

Upvotes: -1

Mauley
Mauley

Reputation: 37

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

Upvotes: 0

Related Questions