Splash Screen (Flutter)

Issue

I want to upload the splash image in its original quality instead of the white background color. How is it?

I tried to do that but the white background appears.

I injected the image before building:

The Splash Screen:

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

  @override
  State<StatefulWidget> createState() => _SplashScreenState();
}
    class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(seconds: 3), () => Navigator.push(context, MaterialPageRoute(builder: (context) => const LoginScreen(),)));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/background_image.png'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(Colors.black26, BlendMode.darken),
          ),
        ),
        child: Center(
          child: Container(
            padding: const EdgeInsetsDirectional.all(50),
            decoration: const BoxDecoration(
              color: Colors.white,
              shape: BoxShape.circle,
              boxShadow: AppColors.boxShadow,
            ),
            child: const Text('Logo'),
          ),
        ),
      ),
    );
  }
}

Solution

Setting a launch image in Android

Setting a launch image in Android Studio: navigate in the Project browser to android/app/src/main/res/drawable/ and open launch_background.xml.
Add the following code inside the layer-list node, after the first item:

<item>
  <bitmap
    android:gravity="fill"
    android:src="@drawable/splash_image" />
</item>

Copy splash_image.png to android/app/src/main/res/drawable.

Setting a launch image in iOS

In Xcode, open ios/Runner.xcworkspace, select Assets.xcassets, and select LaunchImage. You’ll see three boxes to represent the image at 1x, 2x and 3x resolution. Drag images onto the boxes. If you have one image, select from the Scales drop-down: Single Scale.
You can create even more sophisticated launch screen: adding constraints, label e.t.c.

Answered By – tmp

Answer Checked By – Marilyn (FlutterFixes Volunteer)