Using Flutter WEB to Implement Desktop GUI Part 1 Introduction

Old iron remember to forward, Brother Mao will present more Flutter good articles~~~~

WeChat flutter training group ducafecat

original

https://achraf-feydi.medium.com/desktop-gui-implementation-using-flutter-web-part-1-introduction-42d21a6e7937

Demo

https://www.fluttergui.com/

Code

https://github.com/achreffaidi/FlutterGUI

reference

• https://pub.dev/packages/flutter_treeview
• https://pub.dev/packages/reorderables
• https://pub.dev/packages/video_player
• https://pub.dev/packages/flutter_simple_calculator
• https://pub.dev/packages/photo_view
• https://pub.dev/packages/maze
• https://pub.dev/packages/flutter_widget_from_html_core
• https://pub.dev/packages/native_pdf_view
• https://pub.dev/packages/painter

text

Why FlutterGUI?

As part of flutter2, flutter has announced that flutter's network support has reached a stable milestone.

This not only means that I can finally stop writing HTML and CSS code, but I can now have an application that can run on almost all popular platforms.

I don't have much expectations for the stable version of Flutter Web, because I have tried the Beta version, and most plugins do not have enough support. But back to two weeks ago, I was surprised by the number of plug-ins currently supporting the WEB.

This prompted me to try something challenging and create a desktop graphical user interface using Flutter Network as my new portfolio website.

Frankly speaking, this project itself is not a useful thing, it is not solving a problem, and it is probably not my next billion dollar idea. But this is the best way to discover the advantages and limitations of using flutter network in a network project. To be honest, I think it will take me at least two months to release the first version.

After spending two weeks on this project and working about two hours a night, I finally got something really worth publishing.

Although I did not read any documents, nor did I search things on Google as often as usual, I was still surprised by this simple and smooth experience. The transition from using Flutter mobile phone development to the web is really simple, and the knowledge I learned about web development in this project does not require any use.

Technical overview

• Project now has 8 applications running in it, as you have already guessed: it is all the widgets.
• Most applications are existing flutter plug-ins, packaged inside common application parts I created.
• This wharf was built from scratch because I couldn't find an existing wharf that could meet my needs.
• The project has no backend, and the Flutter web application is hosted on a Github page.
• I am using Firebase Analytics to track user interaction with the application.

Apps

• File manager: flutter_treeview flutter tree view and reorderables adjustable plugins. Plugin

https://pub.dev/packages/flutter_treeview

https://pub.dev/packages/reorderables

• Video player: use video_player video player plugin. Plugin

https://pub.dev/packages/video_player

• Calculator: Use flutter_simple_calculator simple calculator plugin. Plugin

https://pub.dev/packages/flutter_simple_calculator

• Photo: Use photo_view to view the plugin. Plugin

https://pub.dev/packages/photo_view

• Game: Use Maze plugin. Plugin

https://pub.dev/packages/maze

• Reader: Use flutter_widget_from_html_core from html core plugin. Plugin

https://pub.dev/packages/flutter_widget_from_html_core

• PDF Reader: Use native_pdf_view local pdf to view plugin. Plugin

https://pub.dev/packages/native_pdf_view

• Painter: Use painter plugin. Plugin

https://pub.dev/packages/painter

---

© Cat brother

https://ducafecat.tech/

https://github.com/ducafecat

Past

Open source

GetX Quick Start

https://github.com/ducafecat/getx_quick_start

News client

https://github.com/ducafecat/flutter_learn_news

strapi manual translation

https://getstrapi.cn

WeChat discussion group ducafecat

Series collection

Translation

https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/

Open source project

https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/

Dart programming language basics

https://space.bilibili.com/404904528/channel/detail?cid=111585

Getting started with Flutter zero foundation

https://space.bilibili.com/404904528/channel/detail?cid=123470

Flutter actual combat from scratch news client

https://space.bilibili.com/404904528/channel/detail?cid=106755

Flutter component development

https://space.bilibili.com/404904528/channel/detail?cid=144262

Flutter Bloc

https://space.bilibili.com/404904528/channel/detail?cid=177519

Flutter Getx4

https://space.bilibili.com/404904528/channel/detail?cid=177514

Docker Yapi

https://space.bilibili.com/404904528/channel/detail?cid=130578