Question 177147 in Flutter Question posted in
The official Flutter documentation can be found here.

How can i design my splash screen in dart flutter

enter image description here

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

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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,
              ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
  );
}
    Login or Signup to reply.
  3. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search