How to set default size of macos app in flutter?

Question

I am trying to build a macOS desktop app with flutter. I want the app to be full-width, edge-to-edge. However, when I run the app via the simulator, or after the build, it always launches the app with size 800x600.

I have set the height and width of the root container to double.infinity. In fact, even if I set the height and width to 10.0, it always launches the app with 800x600. I am new to flutter, so probably missing some fundamentals. Most tutorials I have come across talk about building a mobile app where this is never a problem because the app always launches to its full width.

Here is my entire test app code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      height: double.infinity,
      width: double.infinity,
      child: Center(
        child: Text(
          'Hello World',
          textDirection: TextDirection.ltr,
          style: TextStyle(
              fontSize: 32, fontWeight: FontWeight.bold, color: Colors.black),
        ),
      ),
    );
  }
}

Deprived

Answer 1

Currently the only way to control the initial size is in native code (follow these issues: 1 and 2 to find out when that changes). You'd most likely want to set it in macos/Runner/MainFlutterWindow.swift.

It's not clear from your description whether you want to launch into full-screen mode, or just have a standard window the size of the client area of the screen; the code involved would be different depending on which you are trying to accomplish.

Kinematics

Answer 2

There's now a plugin to do this, which is not a permanent thing as it is described as preliminary functionality before eventually being folded into the core libraries.

Using the plugin for now is still likely to be better than hard-coding directly modifying the native code, especially if you have multiple platforms you want to work on.

First add to the pubspec.yaml something like:

dependencies:
  ...
  window_size:
    git:
      url: git://github.com/google/flutter-desktop-embedding.git
      path: plugins/window_size
      ref: 927f8cbc09b35d85245c095f2db8df9b186f6618

Using the specific Git reference to include this, as shown above, will give you good control over when you choose to pull updated code and make any changes this might entail.

You can then access various functions to set min/max window sizes, or frame, or get the current values, e.g.:

...
import 'dart:io'
import 'package:window_size/window_size.dart';
...
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  if (Platform.isWindows || Platform.isLinux || Platform.isMacOS) {
    setWindowTitle("My Desktop App");
    setWindowMinSize(Size(375, 750));
    setWindowMaxSize(Size(600, 1000));
  }
  runApp(MyApp());
}

I hope this helps someone. I'll try and update this post when the real answer comes out. It seems likely that the interface will approximate what is presented in this library, but the feature set is likely to undergo some change.

Amuse

Expected to find similar solution without such hard-coded window_size dependencies :) Thank you, a wizard. – Jerusalem

I decided to hard-code the explicit revision as when someone reads this the actual code for the plugin version at that time could vary from what I have documented here. Absolutely people should read the documentation for the plugin, reference the current version and use the current syntax. In my own code I explicitly ref: the revision, and at some point I'll re-read the docs and update what needs to be updated, but it'll be a controlled change :-) – Amuse

Answer 3

I am not sure if this 100% valid, but I was looking for possibility to set window size. I have found package as @karora mentioned, but I wanted to only set window size and move on. So we can make it using xcode.

In project folder open Runner.xcodeproj:

macos -> Runner.xcodeproj

Then in Xcode project find MainMenu.xib then you can resize your flutter window.

Assiut

BTW, Default view in xcode does not show the UI as you have displayed above. You need click on the "Hide Document Outline" icon to see the window as shown. – Jocasta

Answer 4

To set the default window size for macOS you neither need a plugin nor do you have to use XCode.

Just open macos/Runner/Base.lproj/MainMenu.xib in your IDE. There's a <window> tag at the end of the file. Look for the one or two size definitions in the <rect> sub tags and change them to your preferred initial size.

<window title="APP_NAME" ...>
    <windowStyleMask .../>
    <rect key="contentRect" x="335" y="390" width="800" height="600"/>
    <rect key="screenRect" x="0.0" y="0.0" width="2560" height="1577"/>
    <view key="contentView" wantsLayer="YES">
        <rect key="frame" x="0.0" y="0.0" width="800" height="600"/>
        <autoresizingMask key="autoresizingMask"/>
    </view>
</window>

Gandhiism

This is the best answer: easiest, requires no plugins, and actually works! – Masturbate

1 Minute to setup and works great!!! Many thanks. – Aerography

the "contentRect" – Holstein

It does not work anymore in 2024 – Apothegm

@Apothegm It still works perfectly with my apps on current Flutter versions. Perhaps you have some additional code changing the window size afterwards? – Gandhiism

Works perfectly. Need to change only contentRect width and height, divide by 2 for retina display – Hallowed

@Apothegm hot reload/restart isn't enough because it applies dart changes but you're modifying platform code. Make sure to stop the app and run again, making platform code actually rebuild – Hallowed

Answer 5

This package can help with it.

    Size size = await DesktopWindow.getWindowSize();
    print(size);
    await DesktopWindow.setWindowSize(Size(500,500));

    await DesktopWindow.setMinWindowSize(Size(400,400));
    await DesktopWindow.setMaxWindowSize(Size(800,800));

    await DesktopWindow.resetMaxWindowSize();
    await DesktopWindow.toggleFullScreen();
    bool isFullScreen = await DesktopWindow.getFullScreen();
    await DesktopWindow.setFullScreen(true);
    await DesktopWindow.setFullScreen(false);

Knothole

I extracted a one liner from the source to set the minimim window size: await MethodChannel('desktop_window').invokeMethod('setMinWindowSize', {'width': 500, 'height': 800}); – Melchior

Answer 6

i need set default size for windows desktop app & this solution worked for me and cover the ios and linux platforms.

import 'package:desktop_window/desktop_window.dart'as window_size;
import 'dart:io';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (Platform.isWindows || Platform.isLinux || Platform.isMacOS) {
    window_size.DesktopWindow.setMinWindowSize(Size(375, 750));
    window_size.DesktopWindow.setMaxWindowSize(Size(600, 1000));
  }
  runApp(MyApp());
}

Ambagious

import 'package:desktop_window/desktop_window.dart' and DesktopWindow.setWindowSize(const Size(700,1060)); worked for me. – Dynel

Answer 7

You should be able to achieve this now within Dart code by using the window_size plugin.

The code to set initial window size could be something like:

 @override
  void initState() {
    super.initState();
    setWindowFrame(Rect.fromLTRB(1200.0, 500.0, 1800.0, 1125.0));
  }

somewhere like your top-level stateful widget. Though I should note that at the moment for me on Linux, the window frame sizing works, but positioning doesn't.

Faulty

Works for me on Windows – Arminius

Answer 8

You can go to macos/Runner/MainFlutterWindow.swift and add the following:

import Cocoa
import FlutterMacOS

class MainFlutterWindow: NSWindow {
  override func awakeFromNib() {
    let flutterViewController = FlutterViewController()
    let windowFrame = self.frame
    self.contentViewController = flutterViewController
    self.setFrame(windowFrame, display: true)

    // Add this line
    self.minSize = NSSize(width: yourWidth, height: yourHeight)

    RegisterGeneratedPlugins(registry: flutterViewController)

    super.awakeFromNib()
  }
}

And that's it!

Polydeuces