How to fix orientation of asset in Flutter?

Question

Hi I'm trying to do a simple game in Flutter with Flame and Tiled. Below is my code:

main.dart

import 'package:demo/dungeons_tale.dart';
import 'package:flame/flame.dart';
import 'package:flame/game.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Flame.device.fullScreen();
  Flame.device.setLandscape();
  DungeonsTale game = DungeonsTale();
  runApp(GameWidget(game: kDebugMode ? DungeonsTale() : game),
  );
}

level.dart

import 'dart:async';

import 'package:flame/components.dart';
import 'package:flame_tiled/flame_tiled.dart';

class Level extends World{

  late TiledComponent level;

  @override
  FutureOr<void> onLoad() async{

    level = await TiledComponent.load('Level-01v3.tmx', Vector2.all(16));

    add(level);

    return super.onLoad();
  }
}

and dungeon_tale.dart

import 'dart:async';
import 'dart:ui';

import 'package:demo/levels/level.dart';
import 'package:flame/camera.dart';
import 'package:flame/components.dart';
import 'package:flame/game.dart';

class DungeonsTale extends FlameGame{

  @override
  Color backgroundColor() => const Color(-12441547);

  late final CameraComponent cam;

  final world = Level();

  @override
  FutureOr<void> onLoad(){

    cam= CameraComponent.withFixedResolution(world: world, width: 380, height: 800);
    cam.viewfinder.anchor = Anchor.topLeft;

    addAll([cam, world]);
    return super.onLoad();
  }
}

Everything works and running but in emulator (Pixel_3a_API_34_extension_level_7_x86_64) my asset level has diffrent orientation than I expect (picture below)

Emulator dp 393x808

Tiled level design 384x800

Have someone solution to this problem? Sorry I'm new into Flutter and I'm doing it as a hobby. Thanks for help!

I tried changing the resolution in the code and in the map but it didn't help.

Answer 1

I'm not familiar with flame, but it looks like you set your device to landscape

  Flame.device.setLandscape();

What happens if you remove it? It should be in portrait on default.