Splash Screen

[exerlog]

Splash Screen

[KalleHallden]

I believe #85 now closes this issue right?

[ramsy0dev]

this a function i use for the splash screen

import 'package:flutter/material.dart';

class SplashScreen extends StatefulWidget {
  Widget whatToReturn;  // we are gonna get a widget to return in these case it will be the HomePage
  SplashScreen({Key? key, required Widget this.whatToReturn}) : super(key: key);

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    _navigateToTheMainPage();
  }

  _navigateToTheMainPage() async {
      // we are making a delay for 3 seconds then navigating to the widget that got pass to the whatToReturn variable
    await Future.delayed(Duration(seconds: 3), () {
      Navigator.pushReplacement(
          context, MaterialPageRoute(builder: (context) => widget.whatToReturn));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // your spalsh screen content 
    );
  }
}

this is how i use it in my project
the ShowPage widget is what i call as the home in the MaterialApp btw

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

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return SplashScreen(whatToReturn: HomePage()); //return the splash screen that make a delay for 3 seconds then return the HomePage() in case of been login in
          } else {
            return LoginPage(); // return the login screen in case of not been login in
          }
        });
  }
}

pls if i have a mistake or something that well help emprove this then tell me i'am still a beginner at flutter,

[momshaddinury]

@0RaMsY0 This is mostly similar to what I have in mind. But instead of stream builder, we will rely on providers from riverpod. I will work on this today. You can check my implementation and let me know if you have suggestions.

[suzanpradhan]

I guess it's better to stick with native splash rather than making our own in flutter. The native splash will be displayed from start app until calling the runApp() and you can initialize Firebase part before runApp.

[ramsy0dev]

@dinurymomshad ok

[momshaddinury]

@suzanpradhan but we need to customize the UI. Are you suggesting we customize the native UI?

[suzanpradhan]

There are already many packages that will do it for us. Popular one might be: https://pub.dev/packages/flutter_native_splash

[ramsy0dev]

@suzanpradhan i think it better to hardcode it then using a third-party package

[suzanpradhan]

Yeah, you are right and you will have more customization too like adding animations in splash screen. But, since we are having only logo and name, it's fine to let package do it instead of doing manual work.

[ramsy0dev]

@suzanpradhan Ok i see what you mean

[jorre127]

Personally I would actually use the splashscreen in flutter. This would give us more flexibility in customising the splash screen (adding animations and such). It would also allow us to be able to put all the initialization logic (firebase, getting data from database/api, etc.) there, instead of putting all this before the runApp, which isn't really desirable imo. If we make the flutter splash look the same as the native one, the users wouldn't even notice the transition.

[suzanpradhan]

Hmm, putting all the initializations before runApp() could be tedious. Then, lets create the same splash screen as native one. Native splash will be displayed on app bootup then flutter one is shown during initialization.

[momshaddinury]

I believe #85 now closes this issue right?

Yes. I am not able to link issues to PR for some reason. Is that normal? I think only people with write-access can do that.

[Ki-er]

I believe #85 now closes this issue right?

Yes. I am not able to link issues to PR for some reason. Is that normal? I think only people with write-access can do that.

https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/autolinked-references-and-urls

#85

Anyone can link issues by doing #

If you just want to reference it then you can do Ref #85, or if it closes it then you can do Closes #85

[momshaddinury]

Nah that is not working. I will close this now.