CODEWITHSUNDEEP
fluttersplash-screenflutter-navigation
pratik97179
pratik97179

Reputation: 183

Splash screen to Home screen navigation - Flutter

I'm working on a Flutter app and have decided to introduce a splash screen in the same. To navigate to the home screen from the splash screen, normally we use Navigator. But there is one issue that I find in the Navigator method. Whenever i'm popping or pushing a screen, there is a visible navigation, i.e. I can see the screen moving left, right, up or down. What I want to achieve, is that the splash screen should disappear instead of sliding away from the screen. How can I achieve this?

Upvotes: 0

Views: 1781

Answers (2)

Anandh Krishnan
Anandh Krishnan

Reputation: 5984

You can use this package flutter_native_splash: ^2.0.5

This package will provide you native splash screen for your apps.

But if you want to disappear your current screen and go to next screen you can use this class custom_route.dart. This class provide you an animation like disappear.

    import 'package:flutter/material.dart';
    
    class FadePageRoute<T> extends MaterialPageRoute<T> {
      FadePageRoute({
        required WidgetBuilder builder,
        RouteSettings? settings,
      }) : super(
              builder: builder,
              settings: settings,
            );
    
      @override
      Duration get transitionDuration => const Duration(milliseconds: 600);
    
      @override
      Widget buildTransitions(
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        Widget child,
      ) {
        if (settings.name == "/auth") {
          return child;
        }
    
        return FadeTransition(
          opacity: animation,
          child: child,
        );
      }
    }

and finally

 onPressed: () {                
               Navigator.of(context).push(FadePageRoute(
                            builder: (context) => YourScreen(),
                        ));
                    },

Upvotes: 0

Md. Kamrul Amin
Md. Kamrul Amin

Reputation: 2435

You have to add native splash screen, if you don't want that visible navigation. To add splash screen in your app properly. Please follow the guide: Creating native splash screen

If you are feeling lazy, you can just use the following package : Splash Screen Package. This package is easy to use just read the documentation before installing.

Upvotes: 1

Related Questions