A Splash Screen ui design using Flutter source code

Splash Screen View with Flutter – A Splash Screen ui design using Flutter source code

This is a Splash Screen Package

Features

SplashScreen({
    super.key,
    this.duration = const Duration(seconds: 5),
    required this.nextPage,
    this.circleHeight = 0,
    this.iconBackgroundColor,
    this.backgroundColor,
    this.timer,
    this.child,
    this.text,
  });

SplashScreen with Gradient

  SplashScreen.gradient({
    super.key,
    this.duration = const Duration(seconds: 5),
    this.gradient,
    required this.nextPage,
    this.circleHeight = 0,
    this.iconBackgroundColor,
    this.timer,
    this.child,
    this.text,
  });

Using Code

SplashScreen(
        backgroundColor: Colors.purple,
        duration: const Duration(minutes: 1),
        nextPage: const WelcomePage(),
        iconBackgroundColor: Colors.white,
        circleHeight: 60,
        child: Icon(
          Icons.ac_unit_outlined,
          size: 50,
        ),
        text: const Text(
          "ImCoderAditya",
          style: TextStyle(
            color: Colors.white,
            fontSize: 30,
            fontWeight: FontWeight.bold,
          ),
        ),
    ),

Using Code

 SplashScreen.gradient(
      gradient: const LinearGradient(
          begin: Alignment.topCenter,
          colors: [
            Colors.red,
            Colors.pink,
            Colors.purpleAccent,
          ],
        ),
        duration: const Duration(minutes: 1),
        nextPage: const WelcomePage(),
        iconBackgroundColor: Colors.white,
        circleHeight: 60,
        child: Icon(
          Icons.code,
          size: 50,
        ),
        text: const Text(
          "ImCoderAditya",
          style: TextStyle(
            color: Colors.white,
            fontSize: 30,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),

(Optional) Using Code .

SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
    ),
  );

ScreenShot

loading...
loading...
loading...
loading...
loading...

Resources Used:

You can check out the entire code of this App here:

Get Full Source Code

View Github

Conclusion

This was all about a quick go through the basic flutter App UI Screen. If you need any assistance regarding flutter app development, you can consult a flutter developer from FlutterDesk. We would love to be of help. Still, if you feel any difficult while dealing with Flutter app development projects, you can reach out to us or hire Flutter developers to outsource any of your app development project.

Do like & share my Facebook page. if you find this post helpful. Thank you!!

Happy coding! 😉

Related Articles:

READ MORE

Scroll to Top