how to add an full screen image as splash screen on flutter

1,382
    import 'package:flutter/material.dart';

class Splash extends StatefulWidget {
  @override
  _SplashState createState() => _SplashState();
}

class _SplashState extends State<Splash> {
  @override
  void initState() {
    Future.delayed(Duration(seconds: 3), () {
      Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => CalendarWidget(title: 'Calendar')));
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Image.network(
          'https://images.pexels.com/photos/1987301/pexels-photo-1987301.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}
Share:
1,382
MuhammadOsamaQureshi
Author by

MuhammadOsamaQureshi

Updated on January 01, 2023

Comments

  • MuhammadOsamaQureshi
    MuhammadOsamaQureshi 10 months

    **Hi there everyone I am quite new to flutter and have used it for 1 or 2 months my question is that is there is any possible way that I can add the full-screen image as a splash screen for my application? I am stuck here I tried so many methods they are not working as a I want **

    • princesanjivy
      princesanjivy about 2 years
      Use this package flutter_native_splash
    • MuhammadOsamaQureshi
      MuhammadOsamaQureshi about 2 years
      yes i tried it bro but i won't allow me to use full screen
    • princesanjivy
      princesanjivy about 2 years
      Have a look at this solution might help you out
    • MuhammadOsamaQureshi
      MuhammadOsamaQureshi about 2 years
      i've found a way using the flutter_splash_native package we can place an image as a background image as a splash screen image
  • Afaq Ahmed
    Afaq Ahmed about 2 years
    Use the image asset by yourself like if you want to use a url or Asset Image. And replace the Navigator next screen to your required Class.
  • MuhammadOsamaQureshi
    MuhammadOsamaQureshi about 2 years
    is that really a splash screen cuz it won't load at the initialization of the application i guess
  • Admin
    Admin about 2 years
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
  • Afaq Ahmed
    Afaq Ahmed about 2 years
    Start your Application with this screen , from 'main.dart' and it'll load on the start. After this screen , you can wait at take the user to any screen you wanted.
  • PJP
    PJP about 2 years
    It helps more if you supply an explanation why this is the preferred solution and explain how it works. We want to educate, not just provide code.
  • Afaq Ahmed
    Afaq Ahmed about 2 years
    Actually , It is better in the sense that we use Firebase notifications , so we initiate our notifications related stuff in splash for generating tokens and also some other initializing services , we keep this screen in the stack for receiving notifications from FCM and other stuff. It's a good techique.