Flutterviz.com

Now, I know I have posted about Flutter before, but here's just a little update about a cool web app I stumbled over called FlutterViz:

How many time have you thought, "you know what, I'll make a really quick and simple little app for my phone that won't take me days to code / build", (no?, just me?), anyway, just something quick and easy, well, first of all, you go and visit here:

https://flutterawesome.com/

and do a quick search of existing templated github available apps to, you know, give yourself an accelerated boost... I wanted to make "kind of a todo list app, but not really".

I actually wanted a motorhome checklist app that I could run through, whilst setting up / packing the motorhome; before departure checklist of items to go through and once arrived and parked up a checklist of items to make sure I have everything setup and ready to use; also potentially a checklist of items when leaving the motorhome to go for a walk.

Now, these items in the checklist will not vary that much, once they are set, they are pretty much set, they won't be changed that often, maybe once in a blue-moon a few more items might get added.  Why mention this?  well, in the above search for todo apps, they are way too generic (lovely as they are), they allow the creation of dynamic lists, you can add items on the mobile / tablet device as you see fit, you can save the responses to database tables, blah blah blah... way too much overkill and yes, I did download a few and start to modify them as a baseline, but it started to become too much hassle for the value.

So, DuckDuckGo to the rescue and a quick search later brings me to this page:

https://throttlebias.com/beginner-info/rv-checklist-app/

hmmm.... I was pondering using / buying a pre-existing app, but it really did niggle me.  This is such a simple thing that I want to do - why can't I just knock up a quick app?  I mean, "back in the day" when I was using AvantGo or even IBM MobileFirst or even straight Android Studio (Java) or even XCode (Swift) I could probably make this app in an hour-ish? a couple of screens with text / sliders to indicate yes/no to whether the task had been done or not & flash something/alert me if I started the list and did not finish it (yep, scope creep as I type!)

Then I thought, y'know, I do have Flutter installed on my laptop - let's give it a go.

So up fires Android Studio, New Flutter app using default template and off we go - the basic structure is all there and made for you.  Main.dart is displayed and if you select "Chrome" as your main device, you can press "[> Run" and a few seconds later (YMMV) you have the sample app rendered & running in a web-browser. awesome.

It is at this point that I then go and visit this site:

https://gallery.flutter.dev/

Why? well, they have a selection screen on the homepage that allows you to select what widgets you are interested in and after you select one, you can then see it working - if it does what you want to achieve then you can click the "< >" icon as shown above and it then shares with you the Dart code for you to graft into your own code.  Now, let's say I had already done the above with the "tab" code and had replaced the default app with the "tab" code, pressed "[> Run" to test and make sure all was good.  Now, I just want to add that switch slider after some text in the "tab" that is shown.  Now, for the purposes of this article I'm going to play a bit dumber than normal - bare with me.

I take the above code, look at the whole code and lift / graft it into the Android Studio code within Main.dart - all is looking good.  Until I then want to add the switch/slider after some text - logically I assume that what I want to do is the following:

As you can see the Android Studio / Flutter editor is expressing its displeasure by highlighting the "this will never work" lines with red underlining. (It is correct, this will not work - but, if you are a newbie, you are not given a pointer or any guidance on how to resolve this)

You will then most likely attempt to Goooogle using a variety of different phrases, visit half a dozen different websites with potentially some answers, then look at some github repo's and try to figure out how other people have done this basic layout - by which point you realise you actually need to have a List widget that contains rows and each row will then contain images / text / switch sliders and it all makes sense - but if you are not lucky enough to find that information and/or want to spend the many hours to get to that point, what options are available to you?

Ah, ha! (and the point of this whole article starts to make sense), you need to go visit this website:

https://flutterviz.com/

I won't repeat the blurb in the screenshot above, but go take a look at the about screen yourself - if that resonates with you, then I encourage you to click the [GET INVITE] and/or the [TRY DEMO] buttons - try it out for yourself - it's a dream, it reminds me of the early days of Android Studio UI development, yes you could fiddle with the XML to design the screens in Android Studio, but if you used IONIC the initial drag & drop capability of making screens was such a game changer, life was good!

Anyway, TRY OUT THE DEMO - you see all of the widgets are laid out on the left, you can build the skeleton of your screen and then add in the sub-widget contents as you desire, it makes making the UI a breeze.  However, in the demo mode, if you press the "< >" button to grab the code it will not allow you to grab that (yet), so it's not worth spending too much time building out a UI hoping that you can then copy & paste the dart code into Visual Studio at the end.  Also, using Chrome Developer Tools won't give you a sneak peak into that central window either to go lift the code.

They also appear to have a decent amount of documentation available too - that is always a bonus!

https://wordpress.iqonic.design/docs/product/flutterviz/

I'm not sure of the end game for this tool - it states everywhere that it will always be 100% free, yeah, we heard that with IONIC back in the day, then once the developer user base & deployment base got high enough they switched to a "now you must pay" model - it makes sense, but, if you were so entrenched in them you had no option, whereas other options were available.  I wonder if that is the route these people will go? until then, I'm just happy to press the [GET INVITE] button, sign-up and see if I can accelerate my UI design - as I say, I "know" what I want, I just don't want to spend hours fiddling around in the raw dart code attempting to figure out how to do the UI - I'd rather spend that time doing useful coding!

UPDATE: okay, after getting an email letting me know that "I'm in a queue" and will be considered for the closed beta-release access, I was given a URL link to the following page.  Ah, okay, that starts to make sense - these people have built a portal / web shop where you can download/access free & premium (purchase) widgets / controls for usage within the FlutterViz UI tool.  Okay, that answers the "how will this pay for itself" question and also, I love it when a "marketplace" is linked to the product / tool you are wanting to use (I tried explaining this approach to IBM BPM product managers about 10years ago and it fell on deaf ears, about time the usage of the BPM products started to fall too... funny that)

Talking of documentation, I have to also mention that the OOTB Flutter documentation is also pretty awesome. Here, for example is an example & a list of all the API calls that can be made (and also where I lifted the "tab" code from)

https://api.flutter.dev/flutter/material/TabBar-class.html

Happy Fluttering.... I'll be regularly checking my email for that FlutterViz invite and will provide a status update after I've used it in anger for a while.  Right, back to the "day job" that doesn't involve any of this "doing" business.  sigh.