Introducing: Flutter Widget-Maker, a Flutter App-Builder written in Flutter
Much more than just a layout builder
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
These are the features I feel are the core of the whole project.
Keep in mind, most of these features are not implemented yet.
Code — Visual seamless transition
There is not going to be any copy paste. You can work with the drag and drop interface while simultaneously modifying the code.
Stateful editing
Interacting with widgets while also editing its source code.
Editing complex properties easily
Editing BoxDecorations, CustomPaints, and CustomMultiChildLayouts with ease.
The core philosophy of this project
Improve rather than replace
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.
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
A fast feedback loop is, in my opinion, the biggest productivity boosts you can get. And Flutter does a hell of a good job with its hot-reloads. But there are scenarios which can be improved.
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
I don’t want to talk about every single idea I have right now, simply because I first want to make it solid before expanding (and I have way too many ideas), but here are some ideas I thought about, which might make it into the application someday:
Animations through keyframes
Possible workflow:
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)
Widget tests: automatically generated golden files (images of the widget to compare to) and basics assertions (the color you set is actually used etc.)
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
Similar to pub (the Dart package manager) but focused on widgets.
Key differences being:
- No need to add anything to pubspec.yaml
- Browse widgets with preview and source code
- Drag&Drop in widgets from the web
- Share and browse widgets
Downloading the program
Head over to https://github.com/Norbert515/flutter_ide/releases/tag/v0.1-alpha
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?
I believe this could be a huge thing — but I need feedback.
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 :)
