Flame.util.initialDimensions() getting wrong size of the screen

[d-apps]

Flame version: 0.24.0

Flutter doctor -v

[√] Flutter (Channel master, 1.22.0-2.0.pre.36, on Microsoft Windows [versão 10.0.19041.450], locale pt-BR) • Flutter version 1.22.0-2.0.pre.36 at C:\src\flutter • Framework revision d30e36ba8c (6 days ago), 2020-08-21 22:36:03 -0400 • Engine revision d495da20d0 • Dart version 2.10.0 (build 2.10.0-49.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.1) [√] Chrome - develop for the web [√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.6.5) [√] Android Studio (version 4.0) [√] Connected device (4 available)

After every first flutter run, the method Flame.util.initialDimensions() is returning a Size with wrong dimensions, in my case the width, it happens running on debug or release mode.

void main() async{

  WidgetsFlutterBinding.ensureInitialized();

  Size size = await Flame.util.initialDimensions();

  print("SIZE: $size");

}

flutter run it prints:

SIZE: Size(598.0, 360.0)

After hot restart it prints (The right dimensions):

SIZE: Size(640.0, 360.0)

[erickzanardo]

@d-apps Thanks for filling this, we usually don't support the master channel, could you confirm if this behaviour happens on stable/beta?

[d-apps]

@d-apps Thanks for filling this, we usually don't support the master channel, could you confirm if this behaviour happens on stable/beta?

I just tested and it happens on beta too. Exactly the same behavior.

Channel beta, 1.21.0-9.1.pre

Plus, master channel is on version 1.22.0-2.0.pre.36 and beta is on 1.21.0-9.1.pre, the range is very short, I am not sure but it might be related...

[erickzanardo]

@d-apps I have tried your code, and it always returns the correct dimension, are you testing on the device? Emulator? can you share additional information?

[aeb-dev]

I came across this problem 1 week ago, I solved it with resize functionality. My main was like the following:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Flame.util.fullScreen();
  await Flame.util.setLandscapeLeftOnly();
  Size size = await Flame.util.initialDimensions();

  Game game = Game(initialSize: size);
  runApp(game.widget);
}

and Game class was like this:

class Game extends BaseGame with HasTapableComponents, HasWidgetsOverlay {
  Game({@required Size initialSize}) {
    super.size = initialSize;
    this.tileSize = initialSize.height / 9.0;

    this.spawnManager = SpawnManager(this);
  }

  SpawnManager spawnManager;
  double tileSize;
}

and SpawnManager was using tileSize of the Game instance to spawn things.

I was using emulator the cold start was getting wrong size, not every time but most of the time. When I hot reload everything works as it should. BTW, even though the debugger was showing the correct size, the game was not working properly. Two things come to my mind, either landscape mode of emulator is being realized after first initialization or there is a race condition for setting the size on BaseGame.

[d-apps]

I changed the order of methods on main.dart and the behavior is a little different now. If I flutter run in debug mode, the game gets only half of the screen on the width, the first screen of my game is the main menu screen , an Overlay Widget, and I get an overflow error, but if I stop the flutter run and open my game directly from the launcher on the device, everything works fine and I don't have this issue.

This error of getting half of the screen, if I hot restart it fixes the problem.

Changed the main.dart to:

void main() async{

  WidgetsFlutterBinding.ensureInitialized();

  await Flame.util.fullScreen();
  await Flame.util.setOrientations(
      [
        DeviceOrientation.landscapeRight,
        DeviceOrientation.landscapeLeft
      ]
  );
  Size size = await Flame.util.initialDimensions();
...

}

Error:

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 73 pixels on the bottom.

The relevant error-causing widget was: 
  Column file:///D:/Documentos/FlutterProjects/???/lib/src/menus/main_menu.dart:50:13
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#6e1cd relayoutBoundary=up1 OVERFLOWING
...  parentData: not positioned; offset=Offset(0.0, 0.0) (can use size)
...  constraints: BoxConstraints(0.0<=w<=324.0, 0.0<=h<=324.0)
...  size: Size(324.0, 324.0)
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: start
...  textDirection: ltr
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════

[d-apps]

I just realized that starting the game from the launcher it still doesn't gets the correct dimesions, same problem.

[d-apps]

This project has the problem, sometimes it retrieves the correct Size but most of times it doesn't, I think you'll be able to reproduce.

https://github.com/d-apps/dont_starve_pumbaa

[d-apps]

It seems it was fixed now using flame: ^0.27.0, plus I am using Flame's init method now, I am closing this issue.

void main() async{

    await Flame.init(
        fullScreen: true,
        orientation: DeviceOrientation.landscapeLeft,
    );

    Size size = await Flame.util.initialDimensions();
    var config = Config();
    config.size = size;

    runApp(MyGame());

}