# Change window size on Flutter programmatically

This article will show you how to create a simple [Flutter](https://flutter.dev/) Desktop App with the ability to quickly change the size of the window, which is useful in cases where you need to test different graphic layouts and don't want to change the size of the window by hand by doing the resize with the mouse, doing it automatically allows you to define predefined window sizes and conveniently switch between them with one click.

This article is in the series [Simple Flutter Apps](https://blog.albertobonacina.com/series/simple-flutter-apps) where I want to show how to code some simple apps in Flutter to help you get started.

### What we will build

We are going to create a simple application using the very useful [window\_manager](https://pub.dev/packages/window_manager) package with which we can act on the window in which the app is running to do resizing and repositioning. The package supports Windows, macOS and Linux and in this simple example no special control codes have been created, in case we develop the app for other platforms, Android, iOS and Web, it is a good idea to add controls on the execution of the resize code only if the app is running on Desktop.

The dependencies that will help us in the development of the application, are found in the file `pubspec.yaml`, are:

```yaml
dependencies:
  ...
  flutter_riverpod: ^2.1.1
  window_manager: ^0.2.8
```

* [flutter\_riverpod](https://pub.dev/packages/flutter_riverpod): library with which the state of the application is maintained, which in this case is the size of the window;
    
* [window\_manager](https://pub.dev/packages/window_manager): a library that takes care of the window resize through a `Size()` class to pass the `width` and `height` to;
    

The result looks similar to this:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671834630384/b6fbc221-77cf-4cd3-b480-e445dd7d0ee5.png align="center")

### Let's code

You can find all the code in this GitHub repo [simple-flutter-resizewindow](https://github.com/polilluminato/simple-flutter-resizewindow) and these are the main parts.

#### `enums/windowsize_enum.dart`

Enum in its **Enhanced** version available from Dart 2.7 with which it is possible to assign multiple properties, named or positional arguments and define custom methods and getters. Specifically, within the enum, I defined keys with which to identify the screen size I want to support by specifying the width and height of the window as well as a description. In this way it is possible to find all the necessary information with the use of only this enum:

```dart
enum WindowSizeEnum {
  mobilePortrait(400, 890, "Mobile Portrait"),
  mobileLandscape(890, 400, "Mobile Landscape"),
  tabletPortrait(607, 874, "Tablet Portrait"),
  tabletLandscape(874, 607, "Tablet Landscape"),
  desktop(1440, 900, "Desktop");

  const WindowSizeEnum(this.width, this.height, this.description);
  final double width;
  final double height;
  final String description;
}
```

The article I relied on is [How to Use Enhanced Enums with Members in Dart 2.17](https://codewithandrea.com/tips/enums-with-members-dart-2.17) on [CodeWithAndrea](https://codewithandrea.com/).

#### `provider/windowsize_provider.dart`

In this file was defined the class that manages the application state, which is the window size, the provider and the notifier that allows this state to be exposed and modified to the main view from the `home_page.dart`. The state of the application is based on the `WindowSize` class, which has a `width` and a `height`:

```dart
@immutable
class WindowSize {
  const WindowSize({required this.width, required this.height});

  final double width;
  final double height;

  WindowSize copyWith({double? width, double? height}) {
    return WindowSize(
      width: width ?? this.width,
      height: height ?? this.height,
    );
  }
}
```

this class is then used by a `StateNotifier` to keep track of the state and change it, with the `changeSize` method, and then expose it via the `state` to all widgets that need it:

```dart
class WindowSizeNotifier extends StateNotifier<WindowSize> {
  WindowSizeNotifier() : super(const WindowSize(width: 400, height: 890));

  void changeSize(WindowSize windowSize) {
    state = windowSize;
  }
}
```

finally through a `StateNotifierProvider` we allow the UI to interact with the `WindowSizeNotifier`:

```dart
final windowSizeProvider =
    StateNotifierProvider<WindowSizeNotifier, WindowSize>((ref) {
  return WindowSizeNotifier();
});
```

#### `pages/home_page.dart`

A `PopupMenuButton` has been added to the home page to allow the user to quickly change from one window size to another. When one of the options is chosen, the `actionChangeWindowSize` method is called, which takes care of calling `windowManager` to change the window size and update the application state:

```dart
void actionChangeWindowSize(WindowSizeEnum windowSizeEnum) {
      //Update window size
      windowManager.setSize(
        Size(
          windowSizeEnum.width,
          windowSizeEnum.height,
        ),
      );
      //Read provider and change status
      ref.read(windowSizeProvider.notifier).changeSize(
            WindowSize(
              width: windowSizeEnum.width,
              height: windowSizeEnum.height,
            ),
          );
}
```

### How to improve it

As always there are so many ways to improve a demo application like this, the first ones that come to mind are definitely:

* add control code to check which platform the application is running on and then disable the window resize feature because it could not be executed;
    
* in the case of a much more complex application with several pages and sections, it might be useful to move the editing part of the window to a settings-related section, which should only be displayed in development and not in production.
    

You can find all the app code in this GitHub repo: [simple-flutter-resizewindow](https://github.com/polilluminato/simple-flutter-resizewindow), you can fork, use and modify it as you want, the app uses thein latest Flutter 3.3.10 you can build it on Windows, macOS and Linux.

Code strong, Alberto

Foto di [USGS](https://unsplash.com/@usgs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) su [Unsplash](https://unsplash.com/it/s/foto/change?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)