Flutter Studio, Version 2

Paul Mutisya
May 30, 2018 · 10 min read

I’ve updated the Flutter Studio web application with the goal of making it more flexible, complete, responsive and accurate. The app should now work better on different screens, keep you in the flow, accurately display your app on multiple devices and orientations and work consistently. In addition, it now produces complete, working code and build files and has a more complete set of widgets, including some new ones not found in the flutter.io widget catalog.

The new version

  • Is responsive
  • Shows real Android and iOS devices accurately on the web
  • Produces and shows pixel perfect designs
  • Provides more widgets (including themes)
  • Allows you to edit the widgets intuitively, producing accurate code
  • Focuses on design (code and pubspec are on separate tabs)
  • Produces complete, working application code and pubspec.yaml files

The new version is available at

https://flutterstudio.app

A Responsive Application

I redesigned it to be responsive and work on more screen sizes:

Image for post
Image for post

As you can see above, the new version resizes the device and tool windows to fit the available space. The larger the screen, the bigger the displayed device will be. There is one properties editor that changes according to the selected widget. The generated source code and pubspec are on a separate tab. There are more features visible in the image, but I’ll get to those later. The point is, you can work on your design on any size screen, from an 11-inch laptop to a 30-inch monitor and have all of the tools and options visible.

More, Pixel-Perfect Designs and a New Tool

For this new version, I’ve created a database of devices and statistics about them, using data mostly gathered from https://material.io/devices/ and various manufacturers’ websites and updated the application model painter to incorporate that information. Every device, from an Android One to the iPhone X are accurately shown, with the design scaled precisely for their screen. Selecting a new one is as easy as choosing from the dropdown.

As I’ve written before, I prefer to build tools. I wrote an application to manage devices and add new ones easily. In the spirit of sharing, I’ve made a version public. It runs on firebase. So you can view and download (as JSON) devices statistics at

https://devicedb.app/

Image for post
Image for post

You can also download the whole database or any device as a JSON file there.

But how can I use this information to help developers? Flutter uses one of the best aspects of Android: graphical objects are measured in a device independent unit based on real dimension (dp or dip, about 160 per inch). While a physical screen pixel on a Nexus 9 or iPhone X is much smaller than one on an original Nexus One, a 160x160dp button is the same size on both.

Given an accurate database of device metrics, including their screen sizes in dp, I could build a logical model of the application in dp and translate that to your screen’s graphical raster, for any device and display it scaled accurately to your screen.

By scaling the Flutter Studio model using real device statistics, I can give the user an accurate model of how the running application will look on a particular device, from an Android One reference phone (480x854 pixel screen; 320x569 dp screen; 4.5” diagonal):

Image for post
Image for post

To a Nexus 9 tablet (2048x1539 pixels; 768x1024 dp; 8.9” diagonal):

Image for post
Image for post

Notice how the same application elements take up less space on the nexus 9.

By using real models of the phones and allowing different aspects (landscape and portrait orientations), I can also allow developers to test different layouts quickly, before trying them on actual devices. While developing in Flutter is very, very fast with quick turnaround, this is a much faster way to prototype, especially if you need to test on multiple devices.

Sometimes scaling the application accurately for the device makes it hard to see the running application, especially on high density screen devices like the nexus 9. I can barely see my work while using a laptop, for example. With that in mind, I included a switch to turn off true device scaling.

Image for post
Image for post

Pictured above is a typical app on the nexus 9, with a standard Material RaisedButton, Image and FlutterLogo with scaling turned on (the switch is on the bottom left). It looks exactly like this running on the device. But it’s almost impossible to see the text on the button. You can switch off true scaling to see it, as shown below.

Image for post
Image for post

With scaling turned off less of the application is visible but you can see details on the app, even on a small screen. The application is not drawn to scale for that device, but it is visible.

Allowing you to quickly scale the app lets you work on the layout without reloading or changing the testing device. The less work you (the developer) have to do, the more you can focus on actual value. The tool should eliminate the busy work of testing on multiple devices.

I have tested the app using real devices (both IOS and android) and tools like rulers to ensure the real-world accuracy of the web-app on actual devices.

More Widgets, Better Editors

Some of the widgets and decorations have very tricky API’s, and it’s not easy to figure out how to use them. I designed the properties editors for them to be (hopefully) intuitive. So you can play around with them and see how the code updates, making learning them much easier.

For example, gradients have an API that has some quirks. Allowing you to quickly play around with it using a graphical editor and examining the generated code makes learning the API much easier:

Image for post
Image for post

In addition to the widgets on the flutter.io site, I included some of the ones I have used frequently when coding actual Flutter apps, like FractionallySizedBox (which I often use to divide apps logically, independent of screen size) and DropdownButton. I also included others I used that are really not well documented. Two, in particular come up often: RadialGradient, and LinearGradient. They aren’t actual widgets, but they are really useful and their implementation has some quirks.

Hopefully giving others a tools to easily play around with them visually and produce working code will speed up the learning process. These widgets, once you understand them, are easy to use. But they are tricky to pick up and many of them are actually hard to discover.

In summary, the last version of Flutter Studio had 26 widgets. This version has about 50.

Icons are Easier

Image for post
Image for post

The properties editor allows you to choose the color, size and glyph of the icon.

Themes are Widgets, too

To style the entire application’s theme, click on the device frame (the grey part surrounding the actual application). The properties editor now shows the entire app’s theme.

The screenshot below shows me editing an application divided into two halves (using FractionallySizedBoxes). I dragged a Theme into each half. The top theme is a dark theme. The bottom is a light theme with a pink primary swatch. Any components in either half will share that theme’s colors and fonts.

Image for post
Image for post

Complete, Working Code and PubSpec

The tool makes this a no-brainer. The entire yaml file is generated and any font or images used are added, properly formatted and with no duplicates. You can add themes, images and button styles to your heart’s content. The tool will filter out just the fonts and assets you use and add them to a complete, parseable yaml file for the project.

It will also produce a complete application, ready to run on any device, not just code snippets. The code the tool produces is complete and runs.

One Last Note

Dart encourages efficient code and has the structures and types to allow it (like futures and streams) at a foundational level. I hesitated to strongly recommend it in the past because it was not strongly typed, and I know from experiences that that can lead to problems in larger codebases. As of version 2, Dart is typed.

It is also much clearer and easier to maintain. Google has aggressively developed Dart (and Flutter), using the lessons they learned from GWT, android and other projects. The compilers (both ahead-of-time and just-in-time) and VM’s are fast and efficient. The Dart compilers consistently impress me when they output javascript (web) and ARM (flutter) code. It’s fast, small and efficient code. If you are targeting modern browsers, dart is production ready. I cannot say enough good things about the workflow and libraries available to build web applications.

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