Rocio  O'Keefe

Rocio O'Keefe

1626410100

Desktop GUI Implementation using Flutter WEB (Part 3: Draggable & Resizable windows)

Hello again, and welcome to the third installment of my guide to desktop GUI implementation using Flutter WEB!

If you didn’t catch Parts 1 & 2 yet, I invite you to read:

  • Part 1: Introduction
  • Part 2: Dock

In this step, we will discuss a simpler implementation of the MDI system that I’ve implemented on the  FlutterGUI project.

By the end of this tutorial, you will be able to implement a simple MDI system that covers some basic functionalities like dragging and resizing.

Table of contents:

  1. What is an MDI?
  2. Set up a simple testing UI
  3. Make widgets draggable
  4. Fix the superposition of widgets
  5. Calculator example
  6. Make widgets resizable

What is an MDI?

When I was working on this project, I wasn’t even aware of what an MDI system is. Luckily, jrheisler let me know on my Reddit post that what I am working on is, in fact, an MDI (Multi-Document Interface).

#flutter-web #flutter #ui

Desktop GUI Implementation using Flutter WEB (Part 3: Draggable & Resizable windows)