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

Why does it show Black screen instead of background image – Flutter

I’m new to flutter and i’ve a issue.Thinking that I did all the steps correctly, I added a background image, but the emulator shows a black screen instead of the image.

black screen

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage('/assets/images/login_bg.png'),
              fit:BoxFit.cover))
      ,
    );
  }
}

My code is also very simple. Is it trying to load but taking a long time?

Tags:

3

Answers


  1. 0

    The path to the asset should be without the first slash. So like

    AssetImage('assets/images/login_bg.png')
    Login or Signup to reply.
  2. 0

    Please improve your image path:

    AssetImage('/assets/images/login_bg.png')

    to

    AssetImage('assets/images/login_bg.png')
    Login or Signup to reply.
  3. 0

    The path for image should not start with "/"

    AssetImage('assets/images/login_bg.png')

    and also please try to return Scaffold and not container when building a widget

    So Your code should be Like

    import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Container(
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage('assets/images/login_bg.png'),
              fit:BoxFit.cover)),
      )
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search