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