Forem: Guilherme Rocha

BRIC: Create your own state management solution using just Flutter

Guilherme Rocha — Mon, 09 Jan 2023 22:41:15 +0000

State Management is a opinionated topic when it comes to Flutter Development, there are a lot of discussions regarding the comparison between Riverpod to Provider, or any other package like GetX, flutter_bloc and all the packages listed in the official documentation, not only in matter of complexity and performance but also if it is trully a state management solution.

With that in mind I want to show how you could just use plain flutter to create your own state management solution using what it already provides you, creating your own abstraction.

Why?

Flutter is already powerful enought and gives you solutions for state management, it's just a matter of knowing the components and widgets of the framework, It's always good to know what are your requirements instead of just using a package that is going to end up doing more than you actually need.

My focus on this post is to show what you can do in dart/flutter and show how you could abstract it and use it.

Let's do it

To do it I was inspired to do something like what flutter_cubit does, so instead of Bloc I called my library Bric (It's very original as you can see).

Cubits are composed of three main components: Cubit<T>, CubitProvider and CubitBuilder. Also, I can get my cubit using context.cubit<T>. So let's start from Cubit<T>

Instead of Streams I decided to use ValueListenable<T> and ChangeNotifier, this is what ValueNotifier actually uses but instead of changing the value directly I wanted to use the emit method to mutate the value to be similar to cubit

class Bricit<TValue> extends ChangeNotifier implements ValueListenable<TValue> {
  TValue _state;

  Bricit(this._state);

  @override
  TValue get value => _state;

  void emit(TValue newState) {
    if (_state == newState) {
      return;
    }

    _state = newState;
    notifyListeners();
  }
}

As you can see it does not have to be complicated, just having a method to set the state and another one to get the state, not being able to mutate it directly.

Ok, but what about CubitProvider? how can you inject it anywhere in the widget tree and get it anywhere you want? Flutter already have InheritedWidget which is a Base class for widgets that efficiently propagate information down the tree.. But what about notifying the widget tree via with ChangeNotifier? It also have a solution for that too called InheritedNotifier<T> in which T has to be a Listenable, and lucky for us ValueListenable is one.

Here is the solution for the InheritedNotifier

class InheritedBricit<TBricit extends Bricit<TValue>, TValue>
    extends InheritedNotifier<TBricit> {
  const InheritedBricit({
    required Widget child,
    required TBricit bricitNotifier,
    Key? key,
  }) : super(key: key, child: child, notifier: bricitNotifier);

  static TBricit of<TBricit extends Bricit<TValue>, TValue>(
      BuildContext context) {
    return context
        .dependOnInheritedWidgetOfExactType<InheritedBricit<TBricit, TValue>>()!
        .notifier!;
  }
}

And this is the BricitProvider implementation

class BricitProvider<TBricit extends Bricit<TValue>, TValue>
    extends StatefulWidget {
  final TBricit Function(BuildContext context) create;
  final Widget child;

  const BricitProvider({
    Key? key,
    required this.create,
    required this.child,
  }) : super(key: key);

  @override
  State<BricitProvider> createState() =>
      _BricitProviderState<TBricit, TValue>();
}

class _BricitProviderState<TBricit extends Bricit<TValue>, TValue>
    extends State<BricitProvider<TBricit, TValue>> {
  @override
  Widget build(BuildContext context) {
    return InheritedBricit<TBricit, TValue>(
      bricitNotifier: widget.create(context),
      child: widget.child,
    );
  }
}

As you can see, it's all Flutter, there is no need to complicate your state management solution or downloading a third party package that does more than you actually need.

Let's see how the builder is implemented:

class BricitBuilder<TBricit extends Bricit<TValue>, TValue>
    extends StatefulWidget {
  final Widget Function(BuildContext context, TValue state) builder;

  const BricitBuilder({
    Key? key,
    required this.builder,
  }) : super(key: key);

  @override
  State<BricitBuilder> createState() => _BricitBuilderState<TBricit, TValue>();
}

class _BricitBuilderState<TBricit extends Bricit<TValue>, TValue>
    extends State<BricitBuilder<TBricit, TValue>> {
  @override
  Widget build(BuildContext context) {
    var bricitState = InheritedBricit.of<TBricit, TValue>(context);

    return ValueListenableBuilder<TValue>(
      valueListenable: bricitState,
      builder: (context, state, _) => widget.builder(context, state),
    );
  }

It just uses the ValueListenableBuilder that does all the heavy work for us, and to get the state it uses a static method to get the bricit from the InheritedNotifier. But you can change it and use a extension from dart get it via the BuildContext:

extension BuildContextExtensions on BuildContext {
  TBricit of<TBricit extends Bricit<TValue>, TValue>() {
    return dependOnInheritedWidgetOfExactType<
            InheritedBricit<TBricit, TValue>>()!
        .notifier!;
  }
}

There you have it, your own state management solution using pure Flutter.

Sample

First, define your Bricit

class CounterBric extends Bricit<int> {
  CounterBric() : super(0);

  void increment() => emit(value + 1);
  void decrement() => emit(value - 1);
}

than you can simply use it just like this using the counter example

void main() => runApp(const CounterContainer());

class CounterContainer extends StatelessWidget {
  const CounterContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return BricitProvider<CounterBric, int>(
      create: (_) => CounterBric(),
      child: const CounterWidget(),
    );
  }
}

class CounterWidget extends StatelessWidget {
  const CounterWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Bricit Counter Test"),
        ),
        body: BricitBuilder<CounterBric, int>(
          builder: (context, state) {
            if (state == 0) {
              return const Center(
                child: Text(
                  "There is no value",
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
              );
            }

            return Center(
              child: Text(
                "The current value is: $state",
                style: const TextStyle(
                  fontSize: 20,
                ),
              ),
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: context.of<CounterBric, int>().increment,
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

Thank You!

I hope you enjoyed this post, tell me what you think in the comments below and leave a heart if you enjoyed it.
To see the full solution, just check my Github: https://github.com/guilhermerochas/bric

Interop your .NET application with Rust

Guilherme Rocha — Mon, 20 Jun 2022 00:54:35 +0000

Foreign Functional Interface is one of the most interesting topics on the Computer Science world, allowing you to use the generated result from one language to another, in this post I'm going to show you how to efficiently interop Rust with .NET Core.

Why?

Rust and C# have very strong aspects in both languages, while C# is used mostly in the enterprise world, specially because of ASP.NET and it's efficiency, Rust has high level simplicity with low level performance, peaking languages like C++ and C. Being able to combine the power of both languages could result in a very interesting results when correctly applied. so let's go.

Requirements

Cargo
.NET 6

Let's go

First create a dotnet project and solution and the folder where you want your Rust project to be with the following commands, I'm going to call the dotnet app "InteropProject", creating a folder called Native to store the Rust code:

mkdir InteropProject
cd InteropProject/
dotnet new sln
mkdir InteropProject.Native
cd InteropProject.Native/
cargo new --lib my_lib
cd ..
dotnet new console -o InteropProject.Console
dotnet sln add InteropProject.Console
cd InteropProject.Console/
mkdir Interop

Let's first work on the Rust code, what we want to do is to generate a .cs file with all the equivalent bindings and types, doing that by hand is boring and time consuming, luckly there is a library for easily do all the heavy stuff for us called interoptopus.

Inside my_lib add interoptopus and since it's a multibackend library you are going to need it's C# implementation called interoptopus_backend_csharp:

# Cargo.toml

[package]
name = "my_lib"
version = "0.1.0"
edition = "2021"
publish = false

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
interoptopus = "0.14.5"
interoptopus_backend_csharp = "0.14.5"

The way interoptopus works is by generating all your generated files in the test process. create a folder called tests with mkdir tests and add your bindings.rs file inside of it.

# tests/bindings.rs

use interoptopus::util::NamespaceMappings;
use interoptopus::{Error, Interop};

#[test]
fn bindings_csharp() -> Result<(), Error> {
    use interoptopus_backend_csharp::{Config, Generator};

    Generator::new(
        Config {
            class: "InteropBindings".to_string(),
            dll_name: "my_lib".to_string(),
            namespace_mappings: NamespaceMappings::new("InteropProject.Console.Interop"),
            ..Config::default()
        },
        my_lib::my_inventory(),
    )
    .write_file("../../InteropProject.Console/Interop/InteropBindings.cs")?;

    Ok(())
}

At first it's not going to compile because it's missing the my_inventory function. It's the function containing all the function and types registered to be generated as C# code returning an Inventory, let's modify our lib.rs to create it.

// src/lib.rs

use interoptopus::{ffi_function, function, Inventory, InventoryBuilder};

#[ffi_function]
#[no_mangle]
pub extern "C" fn hello_world() {
    println!("hello world from rust");
}

pub fn my_inventory() -> Inventory {
    InventoryBuilder::new()
        .register(function!(hello_world))
        .inventory()
}

Here we are creating and registering a function called hello_wold that will be extern with the C interface, so every function needs to be included as extern "C". Now that we created our Rust code lets build it. run cargo test && cargo build --target release to generate the library binaries and generate the C# file.

Configuring our .csproj

For our project to run, it needs to have all the binaries in the same folder as our C# application bin folder, csproj allow us to configure our dotnet build command to always copy our binary. change your current directory to the console App and change the InteropProject.Console.csproj

<!-- InteropProject.Console/InteropProject.Console.csproj -->

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>net6.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <Nullable>enable</Nullable>
  </PropertyGroup>

  <ItemGroup>
     <Content Condition="'$([System.Runtime.InteropServices.RuntimeInformation]::IsOSPlatform($([System.Runtime.InteropServices.OSPlatform]::Linux)))'" Include="$(MSBuildProjectDirectory)/../InteropProject.Native/my_lib/target/release/libmy_lib.so">
        <Link>%(Filename)%(Extension)</Link>
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
      </Content>
      <Content Condition="'$(OS)' == 'Windows_NT'" Include="$(MSBuildProjectDirectory)/../InteropProject.Native/my_lib/target/release/my_lib.dll">
        <Link>%(Filename)%(Extension)</Link>
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
      </Content>
  </ItemGroup>

</Project>

Now everytime you run dotnet build it will add the .so if you are on Linux or .dll if on Windows generate your config.

Let's now call our function from or Program.cs:

// InteropProject.Console/Program.cs

using InteropProject.Console.Interop;

InteropBindings.hello_world();

Running dotnet run will show the message:

hello world from rust

Congratulations

Now you are able to interop your .NET application with rust. you can even create a shell script or powershell script to automate the build and run process with:

#!/usr/bin/env bash

PROJECT_DIR="$(pwd)"

function main() {
    cd "$(PROJECT_DIR)/InteropProject.Native/my_lib"
    cargo test && cargo build --target release
    cd "$(PROJECT_DIR)/InteropProject.Console/"
    dotnet build
}

main

Thank you for your time

If you liked this tutorial share and give it a like! And if you have any doubt leave it a comment that I will do my best to help you.

How to compile Rust command line tools for Termux

Guilherme Rocha — Sun, 16 Jan 2022 04:09:00 +0000

In this tutorial I gonna show you how you could compile and run Rust programs directly on your Android device with pretty much the same experience you would have on your Linux machine. But first, let's go to the basics.

What is Rust

Rust is a compiled system's programming language focused on safety and performance, being used by the Linux Kernel, Google, Microsoft and others for building embedded systems, webassembly tools and (you guessed) command line apps.

What is Termux

Termux is a terminal emulator for accessing your Android OS, since Android is UNIX-like, most of the commands you gonna be working with are basically the same on any Linux Distribution like Ubuntu or Debian, it also comes with it's own package manager called pkg. checkout the Wiki for more info on that.

Why you should read this tutorial?

If you are already aware of how Termux works or want to learn how to directly compile Rust for different architectures, this tutorial is totally for you.

Nuff Talking

First you gonna need some things:

Git
Rust
Curl
Android NDK and SDK
SCP
Unzip
Python
Nano (any text editor of your preference)

Ok... so let's get the requirements, first run on your terminal (I assume you are using a Debian-based machine or WSL with either Ubuntu or Debian installed):

sudo apt update && sudo apt install -y nano git curl unzip python

Now let's install Rust, they provide us an easy way of installing using the following command (it is going to ask you some things but just go for the default option provided):

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Now finally the Android Requirements, it's gonna be a litte harder but I'm gonna try to make it all in one command:

mkdir $HOME/Android && \
cd $HOME/Android && \
mkdir sdk && \
wget -O sdk-tools.zip https://dl.google.com/android/repository/sdk-tools-linux-4333796.zip && \
unzip sdk-tools.zip && rm sdk-tools.zip && \
mv tools ./sdk/tools && \
cd ./sdk/tools/bin && yes | ./sdkmanager --licenses && \
./sdkmanager "build-tools;29.0.2" "patcher;v4" "platform-tools" "platforms;android-29" "sources;android-29" "ndk-bundle" && \
echo "export ANDROID_SDK=\$HOME/Android/sdk" >> $HOME/.bashrc && \
echo "export ANDROID_NDK=\$ANDROID_SDK/ndk-bundle" >> $HOME/.bashrc && \
echo "export PATH=\$PATH:\$ANDROID_SDK/platform-tools:\$ANDROID_SDK/tools/bin" >> $HOME/.bashrc && \
source $HOME/.bashrc && cd $HOME

BTW, I know it's a huge command, but it's is either that or have Android Studio installed (and maybe you don't really want that :P), but what is does is install Android SDK Tools, configure them and add them to your path so you can use them without having to specify the entire path.

Configuring the NDK

Now that you have Android NDK you have to configure the toolchain for Rust to use it, rust will compile againt the mobile architectures so we gonna need a toolchain for arm64, arm and x86. NDK provide us a python script for creating a toolchain, All we have to run is:

mdkdir $HOME/Android/toolchains && \
cd $HOME/Android/toolchains && \
$ANDROID_NDK/build/tools/make_standalone_toolchain.py --api 26 --arch arm64 --install-dir ./arm64 && \
$ANDROID_NDK/build/tools/make_standalone_toolchain.py --api 26 --arch arm --install-dir ./arm && \
$ANDROID_NDK/build/tools/make_standalone_toolchain.py --api 26 --arch x86 --install-dir ./x86

Ok, now we have to tell rust where to find our toolchain with a config file, it will tell cargo (Rust's package manager) where to look for when trying to compile for those architectures, so with nano $HOME/.cargo/config paste the following content

[target.aarch64-linux-android]
ar = "$HOME/Android/toolchains/arm64/bin/aarch64-linux-android-ar"
linker = "$HOME/Android/toolchains/arm64/bin/aarch64-linux-android-clang"

[target.armv7-linux-androideabi]
ar = "$HOME/Android/toolchains/arm/bin/arm-linux-androideabi-ar"
linker = "$HOME/Android/toolchains/arm/bin/arm-linux-androideabi-clang"

[target.i686-linux-android]
ar = "$HOME/Android/toolchains/x86/bin/i686-linux-android-ar"
linker = "$HOME/Android/toolchains/x86/bin/i686-linux-android-clang"

Let's add our compilation targets for rust using the rustup command:

rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android

FINALLY we are ready!!!!

Compiling a command line tool

I'm not going to make a command line tool from scratch, I'm gonna use something someone already made and shared the source code on Github. Let's use for example Dust, as the description says: "Like du but more intuitive".

First clone the repo:

git clone https://github.com/bootandy/dust
cd dust

Before compiling the tool checkout your what's your Android Architecture, in my example I have an arm64 (aarch64) device, but you could have a different one, on Termux run uname -m to get this information.

Build the project with

cargo build --target aarch64-linux-android --release

if you navigate into target/aarch64-linux-android/release and run file ./dust you probably gonna have something similar to this:

ELF 64-bit LSB shared object, ARM aarch64, version 1 (SYSV), dynamically linked, interpreter /system/bin/linker64, with debug_info, not stripped

YOU DID IT !!! but... how do I use it on my android phone? And why can't I execute it on my Linux machine when I try to run ./dust?

First the second question, what you compiled is a aarch64 binary which it's linker points to the Android linker path.
The way we gonna tranfer the content of your Linux machine all the way to termux is via the scp command, in other words it's ssh but for copying files.

Instead of having all those files to send let's make rust build a single binary, so it's going to be easier to transfer, for that run the following command, navigate back to dust base directory and then:

cargo install --target aarch64-linux-android --path . --root $HOME/Android/binaries

it's going to generate a single binary on $HOME/Android/binaries/bin, let's cd into there:

cd $HOME/Android/binaries/bin

Great!!! now all we have to do is move the file over the network to Termux and bob's your uncle.

Copying the file with SCP

on Termux

Before opening the app go to 'Settings > Apps > Termux > Permissions > Storage' and enable storage, now you can tranfer the file with any problems, but let's install some required tools

# This has to be executed on Termux, not on Linux
pkg update && pkg upgrade
pkg install net-tools openssh

That's all, now we need the required information for copying over the file:

User -> running whoami on Termux
Local Network IP -> run ifconfig and find your wlan0 ip address
Download Path -> we don't have it, so let's create one

On Termux, run:

mkdir $HOME/binaries
echo "export PATH=\$PATH:\$HOME/binaries" >> $HOME/.bashrc
source $HOME/.bashrc

Now inside the binaries folder run pwd and passwd to setup a default password.

Finally run this command to start your local ssh server

sshd -p 2222 -d

on Linux

The only thing you have to run here is

scp -P 2222 $HOME/Android/binaries/bin/dust <TERMUX_USER>@<TERMUX_IP>:<TERMUX_BINARIES_PATH>

There you have it, if you now run dust on Termux it's going to work just fine

Thanks for Reading!!

I really appreciate if you liked this tutorial, no need for share or anything just let me know if you liked it or how can I improve