Wednesday, February 16, 2022

On Flutter

Flutter is Google's multi platform development tool. Mostly it is used to develop cross platform mobile apps.

That is, you can have one code base and can make your app runs on both Android and Apple. Although this isn't the only tool in town to do that I decide to learn this as it looks straightforward and provided by Google.

First it uses it own programming language, Dart. Waita minute just why another language? Does the world have enough languages already? Well nowadays every company likes to create its own language as that frees them to update it anytime they want. It is OO and java like... so learning curve should not be so steep. It can compile to native or can compile to javascript so it runs on browser. Well I am interested in mobile development for now.

Now, to use Flutter, it makes sense to get the official IDE Android Studio for developing for Android. And you may follow the documentation to generate project using a CLI to get started. Now this Dart programming is NOT typical Model-View-Controller web development pattern... in which you separate logic (java or whatever language of your choice) from presentation (html/css). The UI and event handlers are all bundled together. UI isn't as simple as HTML. It will look mouthful and clumsy to build an UI. Good news is there is plenty of documentation and examples available. And look at the gallery. It can do beautiful stuff and has a lot of potential.

When you generate a skeleton project (I like that). Note your source folder is in "lib". This is weird because for java and many other tools it is libraries not to be messed with. The flutter dev site is a good place to start.. and if you have LinkedIn Learning (there should be some free trials) check out the video lessons which may be helpful to you to get started.

UI

Flutter/Dart UI is not wysiwyg like a Windows Form. There is no dialog designer that you drag and drop things and get a resource ID like programming in Android SDK. You must handcraft your Dart UI components (textboxes, buttons, etc). Every image asset needs to be declared in the tab sensitive YAML file, which also act like a Maven pom.xml to declare your dependant libraries.

Stateful vs Stateless

And if you want some widget that basically does nothing after it is created (such as say "Hello World" text), you need a stateless widget. If you want it retain some state, such as a lightbulb component in which you click it and remember it is clicked, then you will need a stateful widget. A stateful widget needs an override to "createState" that returns another clsss that extends State with your Widget as the parameter (yes, confusing). Every moving part (state) is a variable that you can update within a setState() {} block.

Function Plotter revisited

I want to build something more meaningful then some HelloWorld. I have done a function plotter in many languages: Delphi/Java/Javascript and I decide to port it. And, I want to make it more powerful than your Texas Instrument, with ability to pan around, and pinch zoom and out.

For this, I'll need a CustomPainter, and GestureDetector, and I need a math expression parser. There are all sorts of odd things I came across to get it to work. It needs to be carefully nested to work. I also have a config dialog which also take a while to get right. It needs to be stateful dialog of its own! Because it needs state to reember checkbox choices and error message when re-rendering. And I cannot complete this without helpful people on StackOverflow helping with odd issues I faced.

and whoa, it can run on chrome without any even rebuilding. On project folder: flutter run -chrome. This is neat.

It is a bit weird and painful to get started but I learned a thing or two in the process... Later I may put it on Google Play...and maybe even Apple Store.

Friday, February 11, 2022

Mobile App Relaunch Ahead

More than a decade ago I followed examples from a Wrox book and created my first Android program on Android Froyo and Gingerbread. Then later on I published several apps on Google Play. I had several hundred downloads! Nope they are no longer there. These old apps no longer work because you will be greeted by message saying it is too old to run on your modern phone. The dot-dot-dot menu is gone so screens (activities) won't be able to launch.

The apps on Developer Console needs constant attention. Need to declare status, ratings, etc, or require more graphics etc. Don't want to bother? Boom removed by google. That's perfectly fine. They were just my experimental apps.

After some time I simply give up updating them. I don't have many new ideas for apps anyway.

They were written in Java, on Eclipse, using the Android SDK. It was fairly straightforward. You get a little form designer, add some widgets and get a constant for each widget.. and you can hook up listeners to react to button clicks etc.

Fast forward 10 years. Android SDK programming still remain mostly the same. But nowadays just about everybody despise Java and Eclipse and fall in love with Kotlin and IntelliJ. In fact, the Android Studio is based off of IntelliJ.

But the problem is still this: more than half people use iPhone. How can your awesome Android apps run on them?

Of course, you can ditch Android SDK and go with HTML/javascript. There are at least several options for that: Cordova, Ionic. Or you can even go C# with Xamarin, or go with React Native (and gosh I hate React).. and gosh, so many options. (just google "cross platform framework").

But I want to try something from the giant google... and that is Flutter. Its Gallery seems dazzling and seems like plenty of resources. to learn from.

I decided to make my apps shine again, modernized AND running on iphones. More on Flutter later. Basically you can toss your HTML/CSS out the window.