Cover image for Multiple Window Connection

Multiple Window Connection

Flutter WebJavaScriptMethod ChannelLocal Storage

Multiple Window Connection

Multiple Window Connection is a service that continuously displays connecting lines between multiple web browser windows in real time.

Rather than building this service with complex technology, I implemented it by storing the center-point position of each window via local storage and connecting each of those center points using Canvas.

I built it after being inspired by this post.

Features

  • Real-time data synchronization between windows
  • Implemented so that the connections appear to remain continuous when a window is moved by dragging

Tech Stack

  • Flutter Web: Web application development
  • JavaScript: Communication between browser windows
  • Method Channel: Communication between Flutter and JavaScript
  • Local Storage: Storing window position data