Category: Dart/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

This is an unstable post, I add comments here, then move them to their final destination on a separate post, posts are listed on the Dart/Flutter page, so it is completely normal for this post to be empty most of the time !

The reason I am interested in flutter is that it may just be the best option to accompany my RUST programs and fit them with relatively efficient front ends ! again, potentially the best fit FOR ME AND MY RUST PROJECT IDEAS