Flutter 3

Yesterday during Google I/O Google announced the release of Flutter 3.0.
You can have a look at the full video or read the blog post about Flutter 3 or the one about Dart 2.17.

There are plenty of new features but what stroke me most were two tiny announcements that were part of the Dart 2.17 release notes because they basically target two blog posts I made 😁.

Dart enums

I had a blog post describing how an enum can be extended by using extensions.
In the context of the Flutter 3 announcement they also announced an evolution of enums in Dart.

It is now possible to have a constructor and members directly in enums without using extensions. The only thing we loose is the reverse map providing the fromValue method.
Here is the example from my previous post but adapted to Dart 2.17:

Flutter and embedded UIs

Hi there. It has been quite a while since my last post.
In the meantime, a bunch of things happened. Corona is over 🥳😉, Apple released a monitor for the masses (webcam cough) and some crazy guy from the east decided to question the European borders 🥴.
But that shall not be the topic of this blog post. Today’s topic is: Is Flutter a good candidate for embedded UIs?
The answer: Yes!
See you next time …

but wait. Let’s explain a bit.

I got myself some new hardware

Today I want to share my opinion about 2(3) new pieces of hardware that I got for myself as an early expensive Christmas present.

The new Mac lineup

Initially I hesitated to jump on the M1 Pro/Max train. My 13” Intel MacBook Pro worked, I don’t have any projects that have compile-times where I have to wait minutes for them to complete so no real need to upgrade.

I started configuring a MacBook 14” the day the preorders started. I use the 2nd tier M1 Pro, 512 GB Storage and 32 GB RAM and ended up with ~€2700.
My first reaction: Phew, that is really expensive. I have no real need, let’s wait.

Initial community reactions

Then the internet filled with reviews, articles and other videos that all had one thing in common: What a beast of a machine.
Additionally, the order date for the MacBook 14” started moving towards December (I think currently they are somewhere in January) so I felt a bit under stress 😨
The M1 topic stuck with me as I already plan how Flutter could potentially be used at work and in that scenario having an ARM based docker environment that is performant would be a real advantage.
So I did some research to find out if the M1 already has similar performance (or even better performance) than the Intel I have and as it turned out even those are faster. So I almost ordered an M1 MacBook Air.

Buying it

In the end I convinced myself that it would be much better to have the even more performant hardware platform and the crazy fast SSD storage. I found a store that was able to immediately ship the 14” MacBook Pro, so I ordered it. I ordered the super basic entry model (8 cores, 16 GB RAM, 512 GB SSD) because I still think the upgrade price is just crazy. This machine did cost ~€2200 which is still very expensive (at least in my terms) and as the current machine was sufficient upgrading it would even be more crazy than ordering it has been in the first place 😉

Impressions

Why trying to preserve control over your privacy for me means running Android

Background

I switched from Android to iOS roughly a year ago. The main reasons for this were:

Apple released “affordable” hardware for the masses

The lowest end iPhones went into a range that “normal” people also can afford. Of course, they are a bit more expensive than the cheapest Android phones you can find but taken Apples update strategy into account (and combining this with the fact that the phone cycle slows down) this has become a real alternative for anyone.

This fact removes the “if you can afford it you can have privacy” label (at least a bit) from Apple that I really disliked.

Apple really puts their marketing into privacy

You can argue if Apple does this because they really think it is the best for their users or - like some people think - because they had no other choice (no way to beat Google, Microsoft or Amazon in the Cloud and data game) but they put privacy on top of almost every marketing material.

So the assumption is that they will try their very best to make sure to deliver on that end because they would really, really harm themselves by violating that rule.

Phones get more “boring”

Using Flutter to teach the next generation - the project

This is a quick follow-up to the last two posts.

As I got asked quite often to show off the project the kids implemented I thought it might be quite interesting for the readers here as well.

So I just built the Flutter app for web. I translated the German strings to English for your reading pleasure 🥸

The only problem I had was that on this statically generated blog the project is not the root of the domain, so I had to remove the href=”/“ tag in the index.html for the app to run from a subfolder.

Without further ado, here you can find the tic-tac-toe app:
tic-tac-toe

Depending on your device and browser the experience might have some problems - but you will get the idea

Using Flutter to teach the next generation part2

As promised I now want to share how well the teaching experiment went.

How the day went

Preparation

I used our kitchen table and moved it closer to the TV to mirror the MacBook’s screen to it.
I used AirPlay for that which turned out to be quite laggy (moving the mouse was very hard) so the next time I would rather run an HDMI cable to the TV

Start

We gathered 6 kids (2 of my kids and 4 friends) and started off discussing what the TicTacToe game has to look and behave like.
I used the version I already created beforehand to show what our goal will be.

After doing that we started Android Studio and created a new project. I explained briefly what the main parts of a Flutter app are and where we will spend our effort at (Position wise). Of course, I didn’t explain all the details of what’s written there. No information about State(less)Widgets, classes or anything on that end.

We started by simply placing 9 texts and layouted them using Columns and Rows. Before we started to fine tune the cells I mentioned that we might want to extract the Text part to a method so that we don’t have to make every modification 9 times.
The concept of a Function was already clear to my children (they used Swift Playgrounds a bit) so they were eager to explain the concept to the other kids.

So we created a method that creates the cell content, moved the Text there and made the content a parameter.
Afterwards we replaced all Texts with a call to that method.
The cells up to that point simply contain the “cell ID” (1-9) to see how the text will look like.

Using Flutter to teach the next generation

What I already tried

I have 3 kids at the age of 12, 10 and 2.
Without trying to be one of the parents that really insists on the kids having to do what the parents enjoy doing I still want to provide enough opportunities for them to get hooked by software development.
The tries I had to this point didn’t really work out:

Board games

I used board games that encourage “programmer thinking” (Robot Turtles). While it was quite funny to play it never stuck, so now it is waiting in the drawer for the 2y old to pick it up one day.

Educational Hardware pieces

I thought “maybe this is too theoretical and there is no connection to the real world” so I bought some hardware that is meant to be controlled by high level visual programming languages (Makeblock).

This also was fun only for a short period of time and then the kids lost interest.

Next plan: Apps

As the older kids are quite tied to their smartphones and given the battle that we as parents have almost every day regarding the smartphone usage (the kids have a very strict screen time with their smartphones) I thought “maybe it would be a good idea if they would be able to create a useful app for their smartphone”.

Avoid MacOS accent popup menu

For the Flutter based Terminal application I wanted to deactivate the MacOS behaviour that shows an accent selection popup when a key gets pressed long (instead of repeating the pressed character).

This is actually a feature in MacOS and can be disabled by tweaking some MacOS settings via terminal commands.
I wanted to do that programatically as this behaviour doesn’t make much sense for Terminal applications.

Finding information about this topic is really challanging even if the solution isn’t that complicated so I decided to leave that piece of information here so that someone else might stumble upon it.

Overriding MacOS default settings

The key to the desired behaviour is to override the ApplePressAndHoldEnabled setting for our application. This can be done by tweaking the integration layer of the Flutter app (the MacOs project).

Just extend the AppDelegate located in AppDelegate.swift by adding the following method:

override func applicationDidFinishLaunching(_ notification: Notification) {
    UserDefaults.standard.set(false, forKey: "ApplePressAndHoldEnabled");
}

That’s all. Now your application doesn’t trigger the accent popup any more.

Enums in Dart are worth an extension

Note! Time has moved on and in the meantime Dart has capabilities that make this post obsolete. You can read about the new features here

Dart is a relatively simple programming language.
In general this is a good thing as the number of possibilities and patterns you have to know in order to develop something with it or when reading code is lower.
On the other hand you will miss certain features that other programming languages have that can lead to quite elegant solutions for certain problems.

Enums int Dart are such a case.

Enums are very simple in Dart. In general, they are classes / objects like everything else, but you can’t do neat tricks with them like for example with C#.

Let’s assume we have a byte value and want to read some bits of it. Those bits should have names (mapped to an enum) for better understandability.

Enums in C#

In C# there is a language feature for exactly that. You can use any enum to represent bits in a bit field.

[Flags]
public enum FlagValues : byte
{
    None    = 0x00,
    Flag1 = 0x01 << 0,
    Flag2 = 0x01 << 1,
    Flag3 = 0x01 << 2,
    Flag4 = 0x01 << 3,
    Option4 = 0x01 << 4,
    All = 0xFF
};

// later in the code

byte val = 0x05; //00000101

var flags = (FlagValues) val;
flags.HasFlag(FlagValues.Flag1); // true
flags.HasFlag(FlagValues.Flag2); // false
flags.HasFlag(FlagValues.Flag3); // true
flags.HasFlag(FlagValues.Flag4); // false

You can even do bitwise operations directly with the enum like

Dart Isolates and huge amounts of data

Why?

I’m currently experimenting with Dart and Flutter to take another shot at the terminal emulation application. This time not using C# but something completely new.
For this I decided to take a look at Flutter and Dart and try to implement the terminal application using that technology.
Gladly there is already a person in the internet that is working on implementing the xterm protocol for Dart and also has a working Flutter UI that renders the terminal.
https://github.com/TerminalStudio/xterm.dart
This implementation is not yet finished and has a couple of problems but is a really good starting point to dig into a Dart and Flutter based development of a terminal application.
One “problem” of the solution is that the whole terminal logic happens in the UI thread. So I wanted to move that logic into a separate thread and only copy the UI state to the UI thread for the UI to show it.
I did this for the C# based approaches and it speeded up the performance (especially reflow) a lot.