Introducing: Flutter Widget-Maker, a Flutter App-Builder written in Flutter

Much more than just a layout builder

Norbert
Norbert
Feb 3, 2019 · 4 min read

This is a widget builder for Flutter. At first, it might look like just another layout builder, but this is going to be so much more.

Check out the landing page I made for this: https://norbert515.github.io/widget_maker/website/


Core features

Keep in mind, most of these features are not implemented yet.

Code — Visual seamless transition

Adjust with minimal effort

Stateful editing

The App being edited is fully running

Editing complex properties easily


The core philosophy of this project

Unlike some HTML editors — which try to hide the actual HTML and CSS code as good as possible (I get why - CSS is horrible), this editor embraces the power of the underlying code.

Instead of hiding the code under some GUI it generates clear, readable and correct code which happens to be visualized and editable through a GUI.

No platform restricting

The widget maker will run on all desktop platforms. In addition to that, it will be able to run on the web thanks to project Hummingbird.

Besides being able to run the editor on mobile, I’ll be looking into actually compiling apps on the phone, I’ve done some research and I’m pretty sure it is possible.

App running on a tablet

Does not require any fancy setup

When opening a dart file containing a widget, widget maker will analyze and automatically pick up on that and suggest showing the visual editor.

Made for everyone

Doesn’t matter if you are new to Flutter or have been coding since the alpha. Widget maker will bring value to everyone.


Fast feedback-loop

I want to talk about one example: Developing a responsive layout.

What you would do is write the code and check how it looks on a small device, then you’d get your tablet and take a look at how it looks there.

You might also be fortunate enough to have an emulator/ embedder which supports resizes. This is already a huge improvement compared to having multiple physical devices/ emulators open at the same time. But you’d still have to change code — resize the window to a bunch of different sizes and repeat.

The workflow with Widget-Maker might look like the following:

Have differently sized flutter apps open in one GUI which update in real time as you slide a slider which, for example, controls the flex value of one of the Expanded’s.


A few teasers for future possibilities

Animations through keyframes

Select a property and set a keyframe, press a button or trigger any other action, select the same property and add another keyframe.

The animation code is generated and used on the fly.

Writing tests on the fly (without actually writing tests)

Integration tests: Click through your App and assert things (like Robolectric for Android) and then generate widget tests (which can be run headless) and actual on-device tests.

Share and download widgets

Key differences being:

  1. No need to add anything to pubspec.yaml
  2. Browse widgets with preview and source code
  3. Drag&Drop in widgets from the web
  4. Share and browse widgets

Downloading the program

Just unzip the folder and run “run.bat”.

If it’s not working try installing the C++ runtime files (https://aka.ms/vs/15/release/vc_redist.x64.exe)


What can you do to make this happen?

Before diving in heads deep into this project (what some argue I already have) I need to find out whether people are actually interested in this.

For that purpose, I made the current demo available to download and play around with. But please keep in my, it’s just a demo. There are a few bugs in it and it’s nowhere near finished.

If you do like this project or have feedback please let me know on Twitter, through an e-mail or other communication channels. The more feedback I get the better I can make an informed decision about the future of this project.

PS. Thanks to Simon Lightfoot for the last minute panic help :)

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store