5 ms·

Widget-Maker – A Flutter UI Builder

104 points by rohan1024 7y ago

realusername 7y ago
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.
- leppr 7y ago
  Surprising right? Considering Microsoft themselves understood development tools should be cross platform.
- solarkraft 7y ago
  What technology can one even choose in the current year to be confined to Windows? UWP?!
  - zyl1n 7y ago
    Well it says Mac version coming soon, so may be he's still testing for Mac...
  - tastroder 7y ago
    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).
- pjmlp 7y ago
  So the Flutter UI Builder is not written in Flutter? Good selling point right there.
  - tluyben2 7y ago
    That would be great... I'm still waiting until apps like this actually work on android/ios instead of only on laptops. UX I actually like to do in another atmosphere than programming; currently I just sit with an iPad + Pencil on the couch and work it out like that before I go back to the laptop and implement it. It would be nice to go a step further and actually create something I can then export to my laptop.
    - norbert515 7y ago
      Author here, the widget maker is actually written in Flutter and it can definitely compile to Linux/ Mac/ Windows/ Android and anything that has a screen. Flutter Desktop, unfortunately, is still in a very early phase and I had some troubles getting the same experience one all platforms. I'm working on fixing those issues and I will provide a Mac version pretty soon and eventually a Linux and Android build too.
latchkey 7y ago
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 7y ago
  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 7y ago
    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.
albru123 7y ago
So the end goal is basically Supernova: https://supernova.io/ https://supernova.io/
tlamponi 7y ago
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 7y ago
  TIL about the word "Klickibunti"! I will now use this in my presentations about awful UI examples! Thanks!

104 points by rohan1024 7y ago

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.

leppr 7y ago
Surprising right? Considering Microsoft themselves understood development tools should be cross platform.
solarkraft 7y ago
What technology can one even choose in the current year to be confined to Windows? UWP?!
- zyl1n 7y ago
  Well it says Mac version coming soon, so may be he's still testing for Mac...
- tastroder 7y ago
  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).
pjmlp 7y ago
So the Flutter UI Builder is not written in Flutter? Good selling point right there.
- tluyben2 7y ago
  That would be great... I'm still waiting until apps like this actually work on android/ios instead of only on laptops. UX I actually like to do in another atmosphere than programming; currently I just sit with an iPad + Pencil on the couch and work it out like that before I go back to the laptop and implement it. It would be nice to go a step further and actually create something I can then export to my laptop.
  - norbert515 7y ago
    Author here, the widget maker is actually written in Flutter and it can definitely compile to Linux/ Mac/ Windows/ Android and anything that has a screen. Flutter Desktop, unfortunately, is still in a very early phase and I had some troubles getting the same experience one all platforms. I'm working on fixing those issues and I will provide a Mac version pretty soon and eventually a Linux and Android build too.

latchkey 7y ago

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 7y ago
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 7y ago
  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.

albru123 7y ago

So the end goal is basically Supernova: https://supernova.io/ https://supernova.io/

tlamponi 7y ago

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 7y ago
TIL about the word "Klickibunti"! I will now use this in my presentations about awful UI examples! Thanks!