Dart-Flutter VS Kotlin Multi Platform

I am writing this blog post to keep my thoughts in order ! because, true to my nature, I will keep questioning this choice and I will end up going back and forth between writing code in Kotlin and Dart-Flutter, which is not good, because I end up with software that is not uniform, as usual

After reading a book on flutter, and a book on Kotlin multi platform, It looks like it is going in the direction of flutter, It is true that KMP – iOS is now in beta, and things should now be looking good for KMM and KMP, it is not a no brainier and here is why I decided to go with Flutter

First of all, I understand that flutter may or may not lose google’s support any minute now, this is true because google loves to abandon projects, so they just might, everyone online is saying that there are no signs of google dropping support, but the truth is, I can see the effort being put into Jetpack compose and compare it to Flutter, in any case only upper management at google may (or may not) know yet, In any case, Flutter is open source, and even if they drop support today, it will probably still work many years from now, and when it doesn’t, I have never had problems learning new languages in a couple of weeks.

I have been a C++ developer for 25 years, and earlier this year (It is still 2024 right ?), I started learning RUST, the start was hell, my inner child did not want to leave the comfort zone, and kept making up reasons why C++ is eternal and better than RUST, but after some time, I was convinced that we crossed the point of no return, and I started, slowly but steadily to fall in love with RUST.

Now RUST excels in front end and graphical user interfaces (Said no one ever)…. But if I am planning to run rust on Android or iOS, boy oh boy, I might have to reinvent computers

So, the answer is that the front end should be handled by either Dart-Flutter or Kotlin-Multi platform

Now, Why dart-flutter rather than Kotlin Multi Platform and Compose Multi Platform

Before I dive into this, the parts of the application that are expected to require performance are probably going to be written in RUST, while permissions and GUI are expected to be handled by flutter, So why flutter

1- Leaf calls, that is, Leaf calls will not permit the garbage collector to run, which means that it is safe to pass a pointer to underlying data to C, provided that C does not hold on to that pointer after the FFI call returns. This removes the need to copy the data before passing it to C. But we are not planning to use C, we are interested in RUST ! the answer is that this is a proof of concept, also “opaque types” are possible πŸ˜‰

Ownership and lifetimes in FFI are probably more of a problem in Kotlin as it stands today ! this is because flutter_rust_bridge provides a level of abstraction to avoid dangling pointers etc….

In Kotlin, exposing Rust functions as C-compatible functions will have a library one day (We already have UniFFI ( UniFFI-RS by mozilla ) but it is not as mature, there are variants of this library to do the job, and for kotlin multiplatform it is here (uniffi-kotlin-multiplatform-bindings) also worth mentioning that there is a UniFFI variant for Dart-Flutter !

Rust code will interact with the Android Java APIs through the Java Native Interface (JNI), and only partly controlled by flutter, there is also no reason to assume that a lot of data is going to travel between dart and RUST in most applications, but when there is such a scenario, we know what to do, we chose flutter.

Coding with Claude

I tried using cursor-ai for some time, basically for HTML, CSS, a bit of vanilla JavaScript, and Tailwind, not bad at all with the above, but later, after two weeks, the limit became unusable, turns out the “Free” comes with a 2 week free trial

Without it, you are switched from Claude to “Cursor-small” in the CTRL+L menu, and the autocomplete stops working

In any case, I think subscribing to cursor-ai is a good idea, the time it saves you writing things that are not core to your work is well worth it, but I wanted to experiment with something new, so….

Cursor-AI is basically a modified VS Code, and since Claude 3.5 Sonnet seems to be my favorite coding AI, i researched a bit and found that there is a plugin for VS-Code that does the same if I subscribe to Anthropic API !

So, after getting my API key from anthropic (the people behind Claude), all i needed to do was install a plugin (Tried more than one plugin, CodeGPT, and Cline by Saoud Rizwan), once installed, I need to enter my API key into the settings, and that is it.

Cline suits my needs better than CodeGPT for the time being, but i did not use them extensively yet, so it is too early to declare a winner

Moving from gmail to cpanel

Like thousands of people online… when google decided that my domain’s email is no longer hosted for free, I spent a good year or two paying for the email accounts I have, and if like me, you only need gmail for the sake of email, paying this much for email, a technology from 1971 is a crazy !

If you are the domain admin on google workspaces, you probably know that google will allow you to “Take Out” all the data from all accounts on that domain, I will assume you already did that and you have the file (All mail Including Spam and Trash.mbox).

In a different post, I showed you how to do this with dovecot’s own tools to simply copy the files, but that assumes you run your own server ! this post is for the average user, this is the for dummies of moving email from google gmail (Takout for example) to ANY email account on any platform using a nail clipper and some old socks, just kidding, you only need the socks

So, I decided to move all accounts to a server with cpanel, which is a solid solution.

So i started with my email account, it was very straight forward with mutt (apt install mutt), configure my account, then mount the mbox file and push it all to the server

mutt -f ~/takeout.mbox (T to select all messages)

But you are probably on Windows, so for your sake, I did the second account with software that works on windows, so start by downloading and installing thunderbird, once installed, setup your account, with cpanel and most other providers, all you need to know is your name, email address, and password, thunderbird should be able to find the config for your server automatically πŸ˜‰ (If you are wondering, Your server publishes it’s own config and thunderbird finds it through the email’s domain)

So, now you can see all the new emails that arrived to the new server, once that happens, close thunderbird, then navigate to your thunderbird profile folder, in my case it is at

~/.thunderbird/RANDOMLETTERS.default-default/Mail/Local Folders

But since you are on windows, it would probably be somewhere inside “roaming/thunderbird/profiles”, shouldn’t be hard to find, once inside your profile, go to /Mail/Local Folders and paste the mbox file you have, start thunderbird and it should display the MBOX file on the left panel under “Local Folders”

Once that happens, you can select the messages you want to move (If you are moving thousands of messages, i would recommend you move them in batches, not all at once), right click, then go to the moveto menu that appears, and select the account/mailbox you want them moved to, and watch them move…

Done ?

Now, you can use FTP to see your mail which should be in the devicot folders, (They are not called devicot folders, it is called maildir, but because you are running devicot, I don’t like to add jargon too quickly)

new, cur, and tmp

other files reference devicot, so we know what we have

Notes

If you need to create a new thundirbird profile, under linux you need to start thunderbird with the following command

thunderbird -ProfileManager

Under windows, the profiles page is on the Help -> Troubleshooting information menu !

Audio breaking and noisy on debian 12

I am not sure that this problem is specific to my setup, where my audio comes from an nvidia 1650 passed through to a KVM virtual machine, but it seems that many people on bare metal are having this problem too

The problem occures randomly, and when it does, pipewire would be consuming a lot of CPU even though no audio is running

pipewire for those of you who don’t know is the new pulse audio, it comes with most modern distributions !

The solution when this happens for now sems to be to restart pipewire !

systemctl --user restart pipewire.service

Flutter “no ScrollPosition attached” SOLVED

════════════ Exception caught by animation library ════════════════
The Scrollbar's ScrollController has no ScrollPosition attached.

The solution to this problem turned out to be, to assign the same scroll controller that I have assigned to the ListView.builder to the Scrollbar !

This problem didn’t exist not long ago, but since the solution is simple, here is a sample code snippet !

So the code to fix was simply this

Widget _buildParticipantDisplay() {
return Scrollbar(
interactive: true,
controller: scrollController,
child: ListView.builder(
itemCount: participants.length,
controller: scrollController,
itemExtent: 60,
itemBuilder: (context, index) {
return ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 50),
title: Text('participant: ${index + 1}'),
trailing: Text(participants[index]),
);
},
),
);
}

Button types in flutter

It should be button shapes or designs, since buttons in flutter all basically work the same way, except for DropDownButton, it is a bit different !

  • ElevatedButton
  • TextButton
  • IconButton: An icon is added to your text button !
  • FloatingActionButton: a circular icon button that hovers over content to promote a primary action in the application. (official Youtube)
  • OutlinedButton: a TextButton with an outlined border
  • DropDownButton: Allow the user to select from a list of values ! (Official Youtube)
  • CupertinoButton: A button in iOS style !

ButtonStyle IS DEPRECATED !, use WidgetStateProperty (Just replace this class name with that) to set (backgroundColor and foregroundColor) , everything else is identical….

ButtonStyle Class

style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.green),
foregroundColor:
MaterialStateProperty.all<Color>(Colors.white),
),

Instead, use

style: ButtonStyle(
backgroundColor:
WidgetStateProperty.all<Color>(Colors.green),
foregroundColor:
WidgetStateProperty.all<Color>(Colors.white),
),

styleFrom() method

ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
textStyle:
TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
)

Server backends in Dart

  • Shelf: Dart library that gives you a simple web server and framework, almost official (pub.dev is built upon it), and very similar to express.js is you come from JavaScript
  • Dart Frog: A fast minimalistic backend for Dart (Built on shelf)
  • ServerPod: Probably the most elaborate one, A base ready to deploy (Registration for example)
    Existing peices work with Postgres and Redis
    Terraform google cloud engine for serverpod
  • Serveme:
  • Alfred:

I don’t really use Dart for backend, even though it was part of google’s original plan, Here I am listing the popular frameworks just in case, but the echosystem is small, and that is the problem with using Dart for backend !

I am moving towards RUST for backend (Yes, as weird as it sounds), Rust has quite a few backends, And i think rocket is going to be the one,

As a C developer, I never used Dragon, So why use RUST, well, as it turns out, RUST is different

5 PORT, 4K hdmi switch

The only way i got this 5 port, 4K HDMI switch to behave is by combining it with dummy HDMI adapters (here), In my setup, they are limited to 30FPS (Not sure if this switch can handle more, but the dummy HDMI adapter itself is limited to 30FPS at 4K)

Once the adapters are at the endings of all 5 input cables, the switch works perfectly, but what happens without them

Without them, there are a couple of problems, the PCs switch the video output off, and there is a delay before it comes back once it detects a screen has been connected again, so you keep clicking till you get lucky with the monitor you are looking for, not to mention that in the case of multiple monitors, the operating system keeps changing the monitor setup assuming that screens are coming and going !

the switch comes with a handy remote control (That i don’t use because the button is right here in front of me), but it will be handy in case you are using a PC that is relatively far

Also worth noting is that it can identify which screen are connected, so you do not need to go through all 5 inputs if only 2 are connected, it will only switch between those two

in any case, let me know in the comments if you have any questions

Bottom Sheets

Bottom sheets are like toasts in the sense that they allow the user to keep doing what they are doing, but different, they are the notifications that appear at the bottom of the screen that a user can dismiss, they (like toasts) also don’t block the current screen

The global function (showBottomSheet or modalBottomSheet) expects a BuildContext and a WidgetBuilder. The modal displays over UI elements, so keep that in mind

the WidgetBuilder (That closure you should be familiar with from alerts for example, or a full fledged function definition, your choice) and the build context (you should have been passing around already by now) are straight forward, what is not is that a bottom sheet must be called with a context that contains a Scaffold. in other words, you’ll have to be β€œunder” a scaffold widget… so to rephrase, it shows a Material Design bottom sheet in the nearest [Scaffold] ancestor

Now, to understand the problem, the context we are passing around as we put it in the last paragraph, belongs to the top-level widget, that widget has a scaffold obviously, but the scaffold is under it, when our bottom sheet wants to attach to a widget, using the of-context pattern to find the scaffold will fail as we are looking up the tree not down where the scaffold is !