How can I create a complex Splashscreen with Flutter?

Question

I'm searching for a way to create a more complex splashscreen than just a icon and a backgroundcolor (for android). I how you can achieve that for iOS by editing the LaunchScreen.storyboard file, but how would you do that for android?

I'm looking for something like that:

As you see there isn't only a background and one image, there is also text at the bottom. Thanks in advance.

Answer 1

UI Design for your splash screen. you can change image and icon as your need... if you need to implement splash screen on your app add this code in your main.dart file with future.delayed and mention time period to display

class StackOverFlow extends StatefulWidget {
  const StackOverFlow({Key? key}) : super(key: key);

  @override
  State<StackOverFlow> createState() => StackOverFlowState();
}

class StackOverFlowState extends State<StackOverFlow> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromRGBO(206,37,37,1),
      body: bodyWidget(),
      bottomSheet: bottomSheetWidget(),
    );
  }

 Widget bodyWidget() {
    return Column(
      children: [
        SizedBox(height: MediaQuery.of(context).size.height/5),
        Center(
          child: Container(
            constraints: const BoxConstraints(
              minHeight: 200.0,
              maxHeight: 200.0,
              minWidth: 200.0,
              maxWidth: 300.0,
            ),
            decoration: const BoxDecoration(
              color: Colors.transparent,
              image: DecorationImage(
                image: AssetImage('assets/eagle.png'),
                fit: BoxFit.fill,
              ),
            ),
          ),
        ),
      ],
    );
 }

  Widget bottomSheetWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Padding(
          padding: EdgeInsets.only(bottom: 30.0),
          child: Text.rich(
            TextSpan(
              children: [
                TextSpan(
                  text: 'powered by  ',
                  style: TextStyle(
                    color: Color.fromRGBO(215, 215, 215, 1.0),
                    fontStyle: FontStyle.normal,
                    fontWeight: FontWeight.w100,
                    fontSize: 9.0,
                  ),
                ),
                TextSpan(
                  text: '? ',
                  style: TextStyle(
                    color: Color.fromRGBO(255, 255, 255, 1.0),
                    fontStyle: FontStyle.normal,
                    fontWeight: FontWeight.w500,
                    fontSize: 20.0,
                  ),
                ),
                TextSpan(
                  text: 'MEO ',
                  style: TextStyle(
                    color: Color.fromRGBO(255, 255, 255, 1.0),
                    fontStyle: FontStyle.normal,
                    fontWeight: FontWeight.w500,
                    fontSize: 17.0,
                  ),
                ),
                TextSpan(
                  text: 'Wallet',
                  style: TextStyle(
                    color: Color.fromRGBO(215, 215, 215, 1.0),
                    fontStyle: FontStyle.normal,
                    fontWeight: FontWeight.w500,
                    fontSize: 13.0,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}