{"id":9635,"date":"2024-02-20T11:59:41","date_gmt":"2024-02-20T11:59:41","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9635"},"modified":"2024-11-13T09:19:16","modified_gmt":"2024-11-13T09:19:16","slug":"flutter-flame-viewport","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/flutter\/flutter-flame-viewport","title":{"rendered":"Flutter Flame: Proper Viewport to Match the Screen Size"},"content":{"rendered":"<p>In Flutter Flame, you can get the screen resolution using the gameSize property provided by the <strong>FlameGame<\/strong> class. gameSize represents the size of the game in logical pixels.<\/p>\n<p><strong>Here&#8217;s an example of how you can get the screen resolution using Flutter Flame:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\">import 'package:flame\/game.dart';\r\nimport 'package:flutter\/material.dart';\r\nimport 'package:flame\/flame.dart';\r\n\r\nvoid main() async {\r\n WidgetsFlutterBinding.ensureInitialized();\r\n await Flame.util.fullScreen();\r\n await Flame.util.setLandscape();\r\n runApp(MyGame().widget);\r\n}\r\nclass MyGame extends FlameGame {\r\n @override\r\n Future&lt;void&gt; onLoad() async {\r\n   \/\/ Get the screen resolution\r\n   Size screenSize = gameSize;\r\n   print('Screen Resolution: ${screenSize.width} x ${screenSize.height}');\r\n }\r\n\r\n\r\n @override\r\n void update(double dt) {\r\n   \/\/ Your game logic goes here\r\n }\r\n @override\r\n void render(Canvas canvas) {\r\n   \/\/ Your rendering code goes here\r\n }\r\n}<\/pre>\n<p>In this example, <strong>gameSize<\/strong> is accessed in the <strong>onLoad<\/strong> method, which is called when the game is loaded. The <strong>Flame.util.fullScreen()<\/strong> and <strong>Flame.util.setLandscape()<\/strong> methods are used to set the game to full screen and landscape mode, respectively.<\/p>\n<p>To add the necessary dependencies in your pubspec.yaml file:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\">\r\nYaml:\r\n\r\ndependencies:\r\n flame: ^1.0.0\r\n<\/pre>\n<p>FlameGame class is part of the Flame package, and you need to import it to use its features. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Flutter Flame, you can get the screen resolution using the gameSize property provided by the FlameGame class. gameSize represents the size of the game in logical pixels. Here&#8217;s an example of how you can get the screen resolution using Flutter Flame: import &#8216;package:flame\/game.dart&#8217;; import &#8216;package:flutter\/material.dart&#8217;; import &#8216;package:flame\/flame.dart&#8217;; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Flame.util.fullScreen(); [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9636,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-9635","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9635"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9635"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9635\/revisions"}],"predecessor-version":[{"id":9638,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9635\/revisions\/9638"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9636"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}