How can i design my splash screen in dart flutter

Question

This is how my splash screen appears, so how can I make it that the logo is filling up the rounded circle shape, and how can i make it that so I can add a background image

Answer 1

If you want feedback based on the code you wrote, you must attach that part of the code.

Or, if you can apply a completely new method, use flutter_native_splash in the link below.

https://pub.dev/packages/flutter_native_splash

Answer 2

Either you can use flutter_native_splash plugin for this operation or make a splash screen full manually from scratch. I have given an example here. ClipOval will make the image fully rounded and as we need background image I have set everything in a Stack widget. in initState I have called the navigation function which handles the navigation.

navigation() async {
Timer(const Duration(milliseconds: 3000), () {
   Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (context) => MyHomePage(), ///navigate to your 
                                                 ///desired 
                                                 ///screen after 3 
                                                 ///seconds
             ),
           );
       }
        )
      }

    @override
    void initState() {
    // TODO: implement initState
     super.initState();
     navigation();
     }

   @override
   Widget build(BuildContext context) {
     mq = MediaQuery.of(context).size;
    return Scaffold(
   body: Container(
     height: mq.height, ///full screen height
     width: mq.width, ///full screen width
     child: Stack(
      children: [
        Align(
          alignment: const Alignment(0.0, 0.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: mq.height,
                width: mq.width,
                child: Image.asset(
                  "your background image path",
                ),
              ),
              ClipOval(
                child: Image.asset(
                "Your Image path",
                width: "how much you need",
                fit: BoxFit.cover,
              ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
  );
}

Answer 3

Try to write Code by yourself I will give you a basic idea about how this type of SplashScreens can be built.

First Take Scaffold Make the Scaffold background color to the background color of your SplashScreen. Then add a Center Widget in the body of the Scaffold After that specify Container as a child of Center Widget Now Decorate the Container by specifying background color, BorderRadius etc Then place an image in the child of the Container.

Safearea ->
Scaffold ->
Center ->
Container ->
AssetImage or NetworkImage