Why does it show Black screen instead of background image after login in flutter app?

Why does it show Black screen instead of background image after login in flutter app?

The reason it shows the black screen is since flutter needs time to load the assets, so it is preferred to pre-Cache the assets. Now this has been a problem for a lot of people when they usually face when they are creating custom splash screens and the asset is heavy

So I followed
this github issue This one
and stack overflow issues One and Two

So in your code convert the
MyApp into the stateful widget

There are two ways you can try both

class _MyAppState extends State<MyApp> {
  var backgroundImage;

  bool init = true;  

  @override
  void didChangeDependencies() {
    if (init) {
      init = false;
      //your code here
      backgroundImage = AssetImage(images/bg.jpg);
      await precacheImage(backgroundImage,context);

    }
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    return Container(); //Will be your MaterialApp here
  }
}

or

class _MyAppState extends State<MyApp> {
  var backgroundImage;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration.zero).then((_) {
      //Your code here
      backgroundImage = AssetImage(images/bg.jpg);
      await precacheImage(backgroundImage,context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container();   //Will be your MaterialApp here
  }
}

And make change here

and change here

BoxDecoration(
                          image: DecorationImage(
                        image: backgroundImage,
                        fit: BoxFit.cover,

Well everything I have mentioned is a workaround as the issue is still open so hope this works well.

Why does it show Black screen instead of background image after login in flutter app?

Leave a Reply

Your email address will not be published.