Create Flutter Studio Using Dart
Making it easy to develop flutter GUIs
First, some background. I’ve been following the development of Dart closely. I previously used the Google Web Toolkit (GWT) in real projects from 2008 on. I was an experienced java coder tasked with writing a high-speed trading application for IE 6/7 (!) and I immediately recognized the pain points GWT addressed in large scale javascript applications such as typing, reusable classes, libraries, etc.. I wrote for Internet Explorer but I developed on Chrome for its suite of dev tools. GWT bridged the two beautifully.
GWT lead me to Dart. It was a natural progression as Oracle bought Sun, GWT development slowed down and browsers and javascript evolved. Most importantly, all of the virtual machine/compiler experts moved to android and Dart. Dart was not as useful as GWT at first, but evolved very rapidly. I used it in a real project last year and never looked back.
I had developed android apps using java. As I learned more about Dart and saw the benefits it brought to coding, I kinda hoped they would move over to the mobile side.
And along came Flutter!
I loved the idea of having all of the benefits of using Dart and being (possibly) able to also publish to the IOS app store. I was immediately sold. I miss android layouts and features like that, but I assume those issues will be addressed in the future. For now, I could rapidly prototype apps for IOS and Android using dart!
But I hated writing flutter UI code. It was incredibly verbose and it made it difficult to focus on higher concepts. I was having a hard time building prototypes, learning the widgets and figuring out what was the most efficient and performant way to build apps. Writing and wiring UI’s was just too verbose and tedious.
Hand writing UI code was just too much work. I needed a tool. So I built a tool.
Here it is, in action, building a layout from the flutter website:
The star icon is selected, as you can see in the tree, the bounding box in the canvas, and the selected color in the editor. Here it is with the source code tab selected:
Does It Work?
See for yourself! It’s at
This is a very alpha, in active development, version of the app with many of the flutter widgets included, including frequently used ones like buttons, text widgets, tab bars and scaffold. Just hover over the tool in the middle to see its name, drag it into the phone’s canvas and drop it. Click on the source tab to see the generated flutter code. Click on a component to edit it using the editors in the bottom middle. The only tricky tool to use is the icon. First click on it to select the icon you want from the floating menu and close the menu; then drag the icon from the original button into the canvas. From there you can edit the icon (color, size, padding, etc.).
Click on a widget on the canvas (or on the tree) to select it. Selected components are surrounded by a green bounding box. You can use the editors to change their colors, padding, alignment, font, etc. The code is updated live as you work.
Design Thesis / App Goals
This isn’t the first time I’ve thought about this. I’m a big believer in collaborative coding and writing. We all use Git, etc. to share code, but wouldn’t it be great if we didn’t have to check out, open a specific tool, etc. Wouldn’t it be great to have the equivalent of Google docs for coding? You could just open a browser and work with collaborators from anywhere. I love IntelliJ Idea, X-Code, and Android Studio, but it would be awesome if they were not necessary?
The main goal is to address how difficult it is to write UI code for flutter.
a drag-and-drop, [collaborative] designer.
Architecture
Technology choices are as important as implementation. I’ve learned the hard way that choices you make at a project’s outset can limit you or make it easier and give you flexibility in the future. My choices were based on the app requirements and my personal goals and needs. I wanted more experience using Dart in anger and I wanted to force myself to learn flutter by implementing as much of its layout and display tech as possible. I also possibly want to build a version of this tool for tablets and phones.
I chose html/css/javascript, written using low-level dart. (The collaboration will use json and protobuf over http.) The drag target/live model view will be built on an html canvas. I am hoping this code will translate over to IOS and android if and when I build native apps (using flutter, fingers crossed).
Design/Implementation
I started the app in the usual way. A list of customer desires and requirements and pencil sketches for how things would work:
I would follow the usual UI designer model. A tree (on the left) representing the live layout, components (at the middle, top), and property editors (middle, bottom). The right part would be a live view of the app I was designing. The live view would also have a tab for generated flutter source code.
I translated that pencil drawing to sketch to get an idea of proportion and color on an actual computer screen:
From there, it was off to the races. Writing web apps, is incredibly productive. The hardest part in developing the app was parsing the Flutter docs to figure out how widgets were supposed to behave and which are available.
Ironically, the flutter team just updated the site as I write this, adding a widget catalog. My life would have been so much easier a few weeks ago, when I started writing the tool. That’s the price of using alpha software.
What’s Next?
First, I need to test the generated code in anger. Is it performant, efficient and clean? Does it work??
Then I need to make the app more stable and implement more of the editors. As always, more bug fixes. Finally, I will also implement flutter animations and more complex widgets like lists.
Update
Testing the app live showed me just how fast Flutter is moving. Code I generated a few weeks ago does not work. Luckily the structure of the code generator (and Dart’s optional typing and quick turnaround time for testing) makes updating things easy.
I was able to design my first app and test it in anger, using the IOS simulator. Compare it with the app display:
