Widget Maker (Alpha) - Introduction

This short document will cover the basics of the Widget Maker.

When first opening the program you are presented with the project screen. Here you can choose if you’d like to start from a template or start from scratch with specific canvas dimensions (You can always change the canvas size later on).

Let’s start with the “Hello World” template

When selected, the dialog will vanish and the canvas with a simple app consisting of a few widgets will appear.

How does the widget-maker work in terms of layouting?

Building layouts in the widget-makes is pretty much the same as writing the equivalent Flutter code. Widgets have properties e.g. “color”, “width”, and they also have widgets which are their children.

Consider the “Hello World” App we just opened:

The App you see on the left side corresponds exactly to the code written in the red box.

What can we do with this template?

Before taking a look at what we can do let’s take a quick look at what we can not do.

If we’d try to put a widget somewhere you’d get a little text saying “Not accepted”

This is because there are no slots to put that widget!

The Scaffold already has a widget living in the AppBar, Body, and FloatingActionButton slot.

Remember, layouting works exactly the same as in code, therefore every widget needs to be placed inside another widget.

What we can do:

We can first remove the text by pressing “Remove” (1) or by pressing the delete key.
After that, we can select a widget to be placed in that slot, this can be achieved by pressing the “New Widget” (2) button, or the shortcut “Ctrl + Space”.

Let’s place an image there!

First search for the image widget in the dialog which is opened by pressing the “New Widget” button or the Ctrl + Space shortcut.

You will notice the name of the widget and a “+” symbol following your mouse, now it’s time to decide where to place it.

Placeholders indicate the different positions the widget can be dropped in. When hovering over a placeholder it changes its color from green to blue to indicate that by clicking now, this placeholder will accept the new widget.

  1. and (2) are placeholders. (2) will accept the image if it is to be dropped at that moment.

If we take a look at the widget tree on the left, we will see that (2) is actually a “Center” widget in a “Scaffold”. Therefore, by placing the widget there it will show an image that is centered on the body of the scaffold!

Neat - This is the result!

Properties

The right bar is the property bar. It lets you manipulate the properties of the currently selected widget.

Play around and see how different properties affect the rendering (in realtime!).

Columns and rows

Sidenote: Working with lists is in a very early stage and the UX will change drastically over time.

Adding a widget to a list is done by dropping the new widget at an edge of another widget. The edge depends on the desired side you’d like to place the new widget relative to the existing widget.

This marks the end of the short walkthrough.

Other features

Here is a quick list of some other features which should be pretty straight forward:

Considerations

This is a very early build and there are obvious limitations, for example:

All these things are being worked on and will eventually work!

Last but not least, thanks for trying out the widget-maker! I’m super happy that people show interest in this project.

I truly believe there is the potential for tremendous value to be created.

Feedback is highly appreciated as I’m still trying to figure out the best way to approach this field