Flutter February — A Better Toolkit For Flutter & Material
It’s time to make the most cohesive toolkit for UX/UI designers ever.
Working with Flutter as a one man development team is a dream. Never have I been able to work so quickly and efficiently to make my applications go from paper to screen. Material’s design guidelines are baked right in so I don’t have to worry about starting from scratch or making decisions on the fly.
Before I even get to code I like to take my sketches and refine their design in Adobe XD, which again has Material baked right in. Just go to File →Get UI Kits → and boom, you’ve got a toolkit to start making all the designs for a MaterialApp in Flutter that you could ever need… right?
What’s the problem?
Well… having all the tools build themselves would be nice, however we aren’t living in a perfect world. At least not yet. First thing you’ll notice about Material’s UI toolkit is that it is missing quite a few things that Flutter’s SDK provides. There are no staggered grids, dividers, or steppers. No scaffold layout or linear progress indicators. And only square buttons. The horror.
Of course you could quite easily remake all of these items as you need but wouldn’t it be nice to be able to drag and drop them into your design as you go?
I realize how much of a first world problem this may seem. However, I urge you to think about the possible workflow us front end devs would have if a framework like Flutter, a design language like Material, and a toolkit like Adobe XD could integrate together seamlessly.
There are two ways to ‘fix’ this. Or, rather, one way to ‘fix’ it and one way to dramatically change app development’s future for the better.
The ‘Fix’
This solution may be obvious, but how about we just add everything to the Material toolkit. Take every visual component and every layout from Flutter’s MaterialApp SDK and add it in. Make sure you include color swatches, icons, fonts, shadows, and even animations.
This would be pretty great in my book. You could very quickly show clients a prototype of what their app would look like. It would make a first pass design as simple as a drag and drop procedure. Of course not everyone is designing using Material but this could end up being the first step for everyone’s team: make a MaterialApp in Flutter first, then expand the design and feature set.
Handing over the prototype to the coders, the designs would be intuitively understood by everyone. Material could end up being a universal translator for engineers and designers. In fact, I would say it already is. But how could we go one step further?
Building Something Better
Imagine this: You open up a toolkit like Adobe XD but it is specifically made for Material. All the colors, fonts, shadows, and shapes are compliant to Material’s rigid guidelines. From a toolbox you drag and drop components onto your art-board, linking them together by adding in navigation and gestures.
Piece by piece you build your application and when you‘re done you navigate to the top-right-hand corner and click a button that says “Open In Flutter”. All your work is compiled into Dart code, an emulator pops up, and your application is built. The components are perfect, the layouts are perfect; everything is to spec.
Perhaps you may need to hook up database management and your business logic before you could consider it done. Or perhaps there is a visual way to integrate that into the toolkit as well.
In the near future designers and front-end developers will be one in the same. Already Sketch is able to export to CSS and HTML, design is baked right into SDKs, and countless automated workflow solutions are popping up to support this vision.
What impact on the development cycle will this have? How about the impact on the job market or educators? How much code re-usability is potentially harmful? The time to discuss now because Material and Flutter are hastening this change.
Thanks for reading! This month I am focusing solely on creating an application in Flutter and Material. To get an explanation and follow my journey, go to the start here.