Itnext. IO /desktop-gui…

Author: achraf-feydi.medium.com/

Published: May 17, 2021-4 minutes to read

Link: www.fluttergui.com/

Making Repo: github.com/achreffaidi…

Why FlutterGUI?

As part of Flutter 2, Flutter announced that The network support for Flutter has reached a milestone of stability.

Not only does this mean I can finally stop writing HTML and CSS code, it also means I can now have an application that runs on almost any popular platform 🤯.

I have no expectations for the stable version of Flutter Web as I have already tried the Beta version and the support for most of the plug-ins is not enough. But I started using it again two weeks ago and was surprised by the number of plugins that support the WEB today.

This prompted me to try something challenging, creating a desktop GUI with Flutter Web as my new portfolio website 😎.

To be frank, the project itself is nothing useful 🤷🏻♂️; It doesn’t solve a problem, and it probably isn’t my next billion dollar idea. However, this is the best way to discover the advantages ✅ and limitations ⚠️ of using Flutter Web in web projects. To be honest, I think it will take me at least two months to release the first version of it.

After two weeks of working around two hours a night, I finally got something really worth publishing.

I was amazed at 😲, how easy and smooth the experience was, even though I didn’t read any documents or Google things like I usually do. It was really easy to go from using Flutter mobile development to web development. I didn’t use any of the web development knowledge I learned in this project.

To see all the features, watch this demo video.

www.youtube.com/watch?v=v6O…

Technology overview

  • The project now has eight applications running in it, and you guessed it. It’s all Widgets.
  • Most of the applications for Flutter are existing FLUTTER plug-ins that are wrapped in the common application widgets I created.
  • The pier was built from scratch because I couldn’t find an existing pier that could meet my needs.

-️ This project has no backend, the Flutter Web application is hosted on a Github page. -️ I use Firebase Analytics to track user interactions with applications.

The application

  • File manager: Is built using the Flutter_TREEView and reorderables plug-ins.

File manager application

  • Video player: Use the video_Player plug-in to build.

Video player

  • Calculator: Created using the Flutter_simple_calculator plug-in.

The calculator

  • Photos: Created using the photo_view plugin.

The picture

  • Game: Built with the Maze plugin.

The game

  • HTML reader: Use the flutter_widget_from_html_core plugin to build.

HTML viewer

  • PDF reader: Use the native_PDF_View plugin to build.

PDF reader

  • Painter: Use the Painter plugin to build.

What’s next?

In this series of articles, I’ll explain how I implemented some of the complex widgets in this project. I hope it helps other developers make cool and useful projects.

You can find all the links below. I will update the articles as soon as they are ready.

  • Implementing a desktop GUI using the Flutter WEB (Part 2: Dock)
  • Desktop GUI implementation using the Flutter WEB (Part 3: Draggable and adjustable Windows)
  • Implementing a desktop GUI using the Flutter WEB (Part 4: Windows XP Crash)
  • Desktop GRAPHICAL User Interface using Flutter WEB (Part 5: Full screen Animation)
  • Desktop GUI implementation using the Flutter WEB (Part 6: Github pages and custom urls)

www.deepl.com translation