Adding background in flutter

Question

What should I do to apply my background image in my project? Did I miss something? My background image found under lib/assets/background.jpg

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  Util flameUtil = Util();
  await flameUtil.fullScreen();
  await flameUtil.setOrientation(DeviceOrientation.portraitUp);

  LangawGame game = LangawGame();
  runApp(game.widget);
}

langaw-game.dart

class LangawGame extends Game {
  Size screenSize;
  double tileSize;
  @override
  void render(Canvas canvas) {
    body:
    Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/background.jpg"),
          fit: BoxFit.cover,
        ),
      ),

    );
  }

  @override
  void update(double t) {}
  @override
  void resize(Size size) {
    super.resize(size);
    screenSize = size;
    tileSize = screenSize.width / 9;
  }
}

This is the result

This is the background

i dont have error receive but the image didnt refect

Akif · Accepted Answer · 2021-02-12T08:29:37.377

1

Your image path is not correct. Now your image is under lib/assets folder, but you are trying to access assets/background.jpg. You need to edit with a full path like following:

AssetImage("lib/assets/background.jpg"),

Note: Also, check your pubspec.yaml file.

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add Flutter specific assets to your application, add an assets section,
  # like this:
  assets:
    - lib/assets/background.jpg

Read more from the official document.

edited Feb 12 '21 at 08:29

answered Feb 12 '21 at 07:49

Akif

7,098
7
27
53

`pubspec.yaml` why? – Feb 12 '21 at 08:14
To be sure the given path is set correctly under the `assets:` section. – Akif Feb 12 '21 at 08:16
i dont have assets section in `pubspec.yaml` how? – Feb 12 '21 at 08:17
I updated the answer. Please check the latest part. – Akif Feb 12 '21 at 08:30
i followed your instruction but the image still doesnt apply – Feb 12 '21 at 09:34

score 0 · Answer 2 · answered May 31 '22 at 11:10

0

make sure in pubspec.yaml indention is correct.

flutter 1 tab for assets: 2 tabs for -assets/

Hope this helps

answered May 31 '22 at 11:10

God's Glory

1

Adding background in flutter

2 Answers2