Flutter & Dart

really aimed at @scott

what are you using for designing / building flutter / dart apps ?

would that also work for building flutter apps for the web ?

Norm!

So Xojo IDE is a WYSIWYG editor that your “paint” your interface with the IDE and the code to make it so it so it automatically done under the hood. For flutter I use VS Code with Hot Reload. If I am doing pure dart its cli and that is just done at a prompt.

Google’s Flutter Team (and to an extension the Google’s Dart Team) suggests using either VS Code (VSC) or Android Studio (AS) for doing Flutter. AS is pushed as it is their tool that they can push you into Android based devices. I used VSC and its plugins are just as good as the AS ones. BUT if you like $EDITOR as long as it is a true text/ascii editor, you can use it. you just loose out on the Hot Reload/Hot Refresh features. I know people that do all their coding in VIM.

When developing for Flutter, you either compile in AOT (Ahead of time) or JIT (just in time). AOT is for compiling for the final (semi final) product and is smaller exe (or apk or whatever). But if you want to make changes you have to recompile the whole app and go through the full build process. The “Hot Refresh” model (aka JIT), is a large exe() but when you Hot Refresh it just recompiles the sections of code that have changes since last titme and updates the running code with the new code. hence the large exe(). JIT is not designed for deploying apps with. it is designed so you can do rapid development.

if you are using AS/VSC with Google’s Flutter plugin, whenever you hit save in the editor, it does a Hot Refresh, compiling all the changes and pushing it live to the “device” (for mobile its either a real mobile device, or emulator. for desktop, it just runs next to the editor).

now back to the Xojo IDE you “draw/paint” the interface, with Flutter the interface is all code. But as you are writing the code for the interface, you can just hit save and instantiously see what the new UI looks like. Every object on the “screen” is a “widget” and unlike the control is Xojo that has 100 features, the Widgets are kept thin/lightweight. But there are some Widgets that you can not visually see that get added to other Widget to change their appearance/functionality. It took me a little while to get used to the new thought process but now seems very obvious.

Now the question Norm that I have been avoiding (or looks like I have been) is WEB. I have not done any WEB work myself. I am pretty sure it is the same basic setup as mobile/desktop but uses CHROME as the browser to view the app in.

talking about CHROME. Google has a thing called “DevTools” that in realtime gets down into how an app is working. Sorta like how Apple’s Instruments (I believe that is what it is called) works, This doesnt work with AOT code but the JIT code. And DevTools runs in a CHROME browser. Now for those of use that dont run CHROME but something that is based on CHROME (aka Brave Browser), there are unofficial docs on how to use that browser over chrome.

Now the one thing that I have not mentioned yet is that for a given app you can use the same code base for desktop, mobile and web. in the “lib” folder is where all the code is. then there is a mac, windows, linux, android, ios and web directories for the platform specific libraries (those are all provided by flutter/dart and rarely needs to be touched other that changing the default icons). then when it compiles your code, it compiles it for a specific platform with the specific platform libraries from its directory.

now you get to specify which version(s) of a plugin to use in you app. Like use version 2.1.3 or later but lower than 3.0.0 (generally when going from version N to N+1 there is code breaking api changes or potentially). or you can say use version 2.3.4 and it will only use that 1 specific version. And if you have a dozen apps on your system you are writing/supporting they all can have their own mix of versions independent from the other libraries/code on your system. This include which version of the flutter you are working with. you just note which version(s) you want to work with in the pubspec.yml file (also names the app, dependencies for both building and developing(1) the app, etc.

(1) you might need some plugin to help develop the code but not in the final build. like a test harness (comes to mind).

Now to get back to the original question I use this:

  • VS Code with Google’s Flutter plugin (which installs their Dart plugin).
  • plus a few more plugins that just make life easier.
  • git for source code management (with git GUI client).
  • iOS emulator (on the mac) for iPhone/iPad dev
  • Android emulator (on either mac/windows/linux) for Android phone/tablet dev.
  • for desktop, I have use an OS that I am targeting so either a physical or VM with MacOS, Windows or Linux on/in it.

for a reference point I was working on a GUI app for an embeded Android device (displays dashboard info on a TV) for a friend’s business and I was doing it on an 8yo Dell laptop with 4gig RAM and a 2nd GEN i5 processor (yeah that is old as ****) and running a light weight version of Linux Desktop (some desktop GUI’s take more horsepower to run than others), I was able to develop the app with no issues and the system was fast enough that it didnt hinder me. Now normally I use a machine that is 1-1.5yo and has much more resources.

sorry for the mind dump. its friday (aka “Dont Break Shit Friday”) and I wrote this instead of breaking thus at work. :slight_smile:

please let me know if you have any more questions…
–sb

2 Likes

this answers a pile of them

thanks for the info !