
Widget-Maker – A Flutter UI Builder - rohan1024
https://www.widgetmaker.dev/
======
latchkey
I do a lot of flutter development and I never really have understood widget
makers like this because they always end up falling flat on edge cases. Does
it really speed up development time to drag/drop some boxes around? Doing this
is already just a few lines of code in flutter and the hot reload is pretty
amazing fast.

~~~
nexuist
You are approaching this from a developer's perspective, which is fine, but
you fail to consider other skillsets.

For example, if I have a team with designers, they likely know their way
around Sketch and Figma and onboarding them onto something like this wouldn't
be too difficult. At this point they can start contributing real,
demonstrative code that compiles out of the box. Sure it lacks actual
functionality and maybe it's a little rough around the edges, but that's not
the point.

The point is that I, as one of the few developers on the team (or maybe even
the only one) have a greatly reduced workload because now everyone can
contribute to building the UI. With frontend out of the way, I can work on
backend functionality exclusively and marry the two later on. From the year
that I've worked with Flutter, the framework makes it easy to separate those
two which further adds to the efficiency gains. Rough edges can be cleaned up
relatively easily and the time sunk into cleanup probably adds up to less time
than starting from scratch.

As a real world example, I have been building a mobile app for my startup
since this summer. My girlfriend, who wanted to get into UI/UX design, is
learning the ropes with the material widgets and making demo UIs by herself.
With a few more weeks of practice, she will be equipped to start building some
of the views in my app without further guidance. This takes a huge load off of
my shoulders, and it's really where Flutter shines.

~~~
latchkey
I am thinking from the perspective of a user of a product like this. I
personally do both development and design work.

Your example does not convince me that it would save time ('probably' isn't
enough) or be generally useful enough that a designer could be convinced to
drop Sketch for it.

As a designer, I want to use Sketch.

As a developer, I want a Sketch design over generated code.

For sure, it is a neat experiment to create something like this, but time and
time again, people always resort back to tools like Sketch. I think this
developer would be better off spending their time building out a super epic
component widget library than trying to build a visual designer.

~~~
nexuist
>For sure, it is a neat experiment to create something like this, but time and
time again, people always resort back to tools like Sketch

The difference this time around is that the visual designer language... _is
the real development language._

I've also tried using these visual designers before. They all seemed half
assed and had glaring limitations.

This one may end up being no exception. But I think, combined with Flutter,
there may be something gold here. The key being that this visual editor is
really a glorified text editor rather than a glorified art program. Sketch,
for example, outputs PNGs at the end of the day. You can't throw those into
your app and call it production ready. This "widget maker" outputs dart files.
That's real, executable code. If the overhead visual designer is flexible
enough, the only walls you may end up hitting are the ones set up by the
widget implementations themselves. At that point you'd have to deal with those
walls manually anyways, so you haven't lost any time really.

One of my fever dreams over the summer was to build a voice controlled Flutter
widget builder, such that I could sit in front of my TV and simply transcribe
a UI from my head directly into the emulator. OP's project is a good first
step towards that goal. Just imagine:

"Give me a scaffold with a column layout..." "Add a raised button to this
container's body" "Set its color to sky blue" "Show me this widget's
properties" "Make this a stateless widget called SpecialButtonBar and have it
take three arguments..."

Again, it doesn't have to do all of it. But having written code to play with
is a much better starting point than having nothing. Flutter's composability
means that there aren't many different approaches you or a machine can take to
arrive at the same result - you will end up with very similar widget trees
which means this is a task ripe for automation.

~~~
wruza
That’s called “interface builder” and it falls short at edge (or just non-
trivial) cases in all frameworks ever created. Qt, gtk, whatever-tk, any
windows, mac, phone ui.

If it’s different _this time_ , then I would like to see that authors know
about the shortcomings and problems that usually arise. E.g. restructuring of
a container set without losing inner constraints; injecting two subitems where
one was without resizing arounds; temporary places outside of main template;
viewing full hierarchy with artifical borders to select an interested level;
having auto-dummies in boxes to prevent a new subitem to fill all space,
making it easy to reason on half-done design. I could go on.

But all introduction videos just show us how they drop an item into an empty
vbox. Thanks, but yawn.

~~~
jcelerier
> That’s called “interface builder” and it falls short at edge (or just non-
> trivial) cases in all frameworks ever created. Qt, gtk, whatever-tk, any
> windows, mac, phone ui.

That's interesting, I've used those a fair amount of time generally with
success for e.g. config UIs, etc.

e.g. look at the amount of Qt-based UI dialog merely on github :
[https://github.com/search?q=extension%3Aui+language%3AXML+QD...](https://github.com/search?q=extension%3Aui+language%3AXML+QDialog&type=Code)

------
albru123
So the end goal is basically Supernova:
[https://supernova.io/](https://supernova.io/)

------
tlamponi
Remember me on M$ Frontpage... Had to take over a website made with that in ~
2007.. Ended up in threwinh it away and rebuilding it myself with (relative)
clean and maintainable HTML/CSS as it was quite simple, and 95% of it was
static anyway.

But I understood Frontpage, my aunt used it to create and deploy a website
successfully, with nothing more very than basic computer skills, so it had a
valid target group.

This, on the other hand, makes one effectively enter the same information in
the same way I'd do when just coding it. It fails both, the limited skill-set
user class and the advanced, IMO. And, as Flutter already has really hot-
reload, good previews, and allows to do such easy widgets in effectively the
same way (just drag and drop replace with writing or copy/paste) or maybe
even, as of good IDE integration, in a better way, it may also not be useful
for "in-between" skilled user groups.

But seems to fit the "Klickibunti" (german for: UX is second class, it just
needs to have fancy-looking, effect+color full graphics, for mouse-only
interaction) Windows subgroup of users just fine, so maybe I'm just biased.

~~~
mxuribe
TIL about the word "Klickibunti"! I will now use this in my presentations
about awful UI examples! Thanks!

------
realusername
Too bad it's Windows-only, I wanted to try it since I build a flutter app at
the moment but it does not run on Wine it seems.

~~~
solarkraft
What technology can one even choose in the current year to be confined to
Windows? UWP?!

~~~
tastroder
Microsoft Visual C++ according to the pdb file in the Windows download,
although the flutter_windows.dll (that likely does the rendering) file also
contains some Chrome related stuff (not sure if it's just the skia graphics
library or more from a cursory glance).

