Category: Dart/Flutter

I recommend you read this after reading My Dart Notes.

this document is a reminder of everything Dart related ! There is a different one for flutter.

Why ? Because I have a problem, I don’t limit myself to a few languages like normal human beings, I know A LOT of programming languages, and when you don’t use a language long enough, you start messing up which syntax works where, so I create those small “Reminder” pages that I can skim through in an hour before I start working with any language after leaving it for some time !

Mind you, I eventually lose the page “in the (It is on some hard drive somewhere) and that is because after using it a couple of times, I no longer need it. but when i come across old ones, I will post them on this blog.

I am posting this one online because I am composing it now, and I haven’t lost it yet

Continue reading “My Flutter notes”

A quick revision of the Dart language syntax

this document is a reminder of everything Dart related ! There is a different one for flutter.

Why ? Because I have a problem, I don’t limit myself to a few languages like normal human beings, I know A LOT of programming languages, and when you don’t use a language long enough, you start messing up which syntax works where, so I create those small “Reminder” pages that I can skim through in an hour before I start working with any language after leaving it for some time !

Mind you, I eventually lose the page “in the (It is on some hard drive somewhere) and that is because after using it a couple of times, I no longer need it. but when i come across old ones, I will post them on this blog.

I am posting this one online because I am composing it now, and I haven’t lost it yet 😉

Classification

• AOT Compiled for Production, or JIT compiled during development
• Can also transpile into Javascript
• Uses Garbage Collector (When AOT, it is bundled with compiled app)
• Dart is statically typed (Fixed variable types)
• sound null safe (sound = No mixing of safe and unsafe)

Continue reading “My Dart Notes”

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.

════════════ 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]),
          );
        },
      ),
    );
  }

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)),
  ),
)

• 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

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 !

This page is just a listing of all posts relating to dart and flutter on this blog, but instead of chronological order, this page puts things in logical order !

Buttons !

Detect platform in flutter

Server Backends in Dart

Sometimes, you need to know what operating system your flutter app is running on, most times for theming purposes, but sometimes for functionalities !

There are basically 2 popular ways to do this (3 popular methods if you are willing to use a package specifically to simplify theme issues !), let us assume we will be calling a certain method called _iosMethod if we are on iOS, and a _genericMethod if we are on any other platform

The most common use case is to determine whether to use Material or Cupertino, to give the application that native look the users are used to… in any case… here are the two methods

In both methods, we have a function called doStuff

Method 1

In the first method, we get the platform using the Theme (We must pass context to function) !
The ThemeData object has an enum called TargetPlatform… we will use that here

  void doStuff(BuildContext context) {
    final platform = Theme.of(context).platform;
    if (platform == TargetPlatform.iOS) {
      _iosMethod(context);
    } else {
      _genericMethod(context);
    }
  }

The possible options that can come out of this enum are (android, iOS, linux, macOS, windows, fuchsia)

Method 2

Here, we can simply start by importing (import ‘dart:io’ show Platform;), then use it directly

import 'dart:io' show Platform;
...
...
  void doStuff(BuildContext context) {
    if (Platform.isIOS) {
      _iosMethod(context);
    } else {
      _genericMethod(context);
    }
  }

Method 3

This time, we will be using the package (flutter_platform_widgets), this package is very useful for theming your application to have the look and feel of the default theme of the OS…

things become very simple with this package, all you need is the line

return PlatformElevatedButton(onPressed: onPressed, child: child);

This is just a summary of the tools you may or may not use for mobile development

Cross Platform

• Dart-Flutter
• React Native
• Kotlin Multiplatform (& compose-multiplatform ;))
• Ionic
• .NET MAUI, (Successor to Xamarin.Forms), develop in C#
• NativeScript: Build mobile apps with Angular, Vue.js, etc !

Android

• Android Studio
  Kotlin / Java
• Jetpack Compose : composable functions – define your app’s UI programmatically

iOS

• Xcode