FlutterUnit Web edition debuts Flutter Web

The one who came out, still holding the lute and half covering his face:

Mobile: Android/iOS [FlutterUnit Edible Guide] Open source
FlutterUnit for MAC – Flutter Desktop –
FlutterUnit Win – Flutter Desktop –
Now FlutterUnit Web makes its long-awaited debut:

Since my small site is too slow to be deployed on gitee Page, the deployment process will also be described. Website is: http://toly1994328.gitee.io/flutter_web, click here to jump

Take a photo of the Flutter Unit family
【Android FlutterUnit】: toly1994.com/file/Flutte…
【iOS version FlutterUnit – download your own project to run 】: github.com/toly1994328…
【MacOS version FlutterUnit】: toly1994.com/file/flutte…
【 FlutterUnit for Windows 】: toly1994.com/file/Flutte…
The Web edition FlutterUnit 】 : toly1994328. Gitee. IO/flutter_web

I. Functions of FlutterUnit Web

[1] At present, a total of 250+ components are displayed and detailed
[2] Provide sample code, which can be copied
[3] Link to manage component jump
[4] Support search by component English/Chinese name
[5] Support to switch font, theme style, code highlighting style

Web function has been deleted, there may be a lot of small details are not very satisfactory, slot point is still some, but also hope everyone please mercy

I'm glad that I can make FlutterUnit Web version for display and search, after all, 0 to 1 implementation, the rest is not a matter

1. Currently, a total of 250+ components are displayed and detailed

FlutterUnit has been gradually improved from 180+ at the beginning to 250+ now.

My special parsing tool makes it easy to add and modify component information

2. Provide sample code that can be copied

The Web side is easier to access and query. Because of the Implementation of Flutter, there is a lot of flexibility in demonstrating components

This is something you can’t do on the traditional Web, where you used to have giFs, but now you can do it directly

3. Link to Manage component hops

Click related components to switch display, convenient to draw inferences and expand knowledge.

4. Search by English or Chinese name of the component

You can search to see what you want to know about components, and keep star level queries and support Chinese name queries (although many Chinese names are my own, but some is better than none).

5. Support to switch font, theme style, code highlighting style

6. About database

Yesterday I spent more than an hour tweaking the Mac version to adapt to the Web. The biggest obstacle is the database. Without the background data interface, the Web side is tricky. I didn’t have time to do the back-end interface, so I used the dumbest way, using memory data.

The core is node data, through parsing, into JSON string, how to parse rendering.

Using Bloc, all data is accessed through the WidgetRepository interface, which makes it easier to scale up,

We used to use a local SQLite database to provide CategoryDbRepository data. Now we only need to implement a WidgetInnerRepository of data from local memory. In the future, we may use network data. We can implement a WidgetNetRepository. The essential difference is the direction of the data resources, the loading process of the data and the rendering of the data are the same. The code doesn’t need to change.

Package and publish the Flutter Web project

1. How do I download FlutterUnit Web

Flutter SDK version

Flutter 1.20.0, channel master, https://github.com/flutter/flutter.git Framework, revision 77310 c152f (5 weekes line) Dev 69ABa23371 Engine • Tools • Build 2.9.0-20.0.dev 69aba23371Copy the code