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