DEV Community: Patrick Obafemi

Stacked State management in Flutter

Patrick Obafemi — Sat, 04 Jun 2022 21:26:03 +0000

Few months ago i came across a youtube video by Filled Stacks about a state management system he and his team came up with that uses a MVVM approach to state management and i decided to give it a try. Now i must say that coming from a flutter bloc background i needed something with less boilerplate code and less setup(kudos to the flutter_bloc team as they did an amazing job!). And i must say i was totally impressed! You can take this as a review of the stacked package or a basic intro but either is fine!!

So let's start by creating a new flutter project by running the command

flutter create flutter_stacked

that will provision a new flutter project. Then we will install the stacked package from pub.dev. As of the time of writing the current version is 2.3.9 but you can see the latest version here. Personally i like installing packages using the command below

flutter pub add *package name*

this will install the latest compatible version to your project. When that is done you get the notorious default counter app that comes with every new flutter app. We would do the same counter app but with the stacked package. So let's start by removing default code and creating a stateless CounterApp Widget. We will be left with this

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CounterApp(),
    );
  }
}

class CounterApp extends StatelessWidget {
  const CounterApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold();
  }
}

this will give us a white screen. Great! So the first thing we will do is create a viewmodel. The viewmodel is a class where all the state and state modification is stored. So instead of using up RAM and using stateful widget you just create a viewmodel that corresponds to your widget. In a production app you can create a folder for your feature and then create a viewmodel folder and a view folder but we will do everything in our main.dart file. So creating a viewmodel will look like this;

import 'package:stacked/stacked.dart';

class CounterViewModel extends BaseViewModel {
    int counter = 0;
}

your viewmodel will extend BaseViewModel(there are other types of viewmodel for other purposes and you can check out the package documentation) and we will initialise a counter property and set it to 0. The next step will be to wire up the viewmodel to the CounterApp widget. There are a couple of ways to do this but my favorite way is this....

class CounterApp extends StatelessWidget {
  const CounterApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<CounterViewModel>.reactive(
      viewModelBuilder: () => CounterViewModel(),
      builder: (context, CounterViewModel viewModel, child) {
        return const Scaffold();
      }
    );
  }
}

So the first step is to wrap your scaffold with a viewmodelBuilder.reactive widget constructor that deals with rebuilding your widget on state change. It has a viewModelBuilder property that returns a function returning your viewModel and a builder function that takes the context, an instance of the viemodel and a third child parameter.
The next step is to create a center widget that will have a text widget child that displays the counter variable.

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<CounterViewModel>.reactive(
        viewModelBuilder: () => CounterViewModel(),
        builder: (context, CounterViewModel viewModel, child) {
          return Scaffold(
            body: Center(
              child: Text(viewModel.counter.toString()),
            ),
          );
        });
  }

the viewmodel instance exposes the counter variable and we display it in the text widget. The next step is to create a floating action button that increases the counter while we click on it.

return Scaffold(
   floatingActionButton: FloatingActionButton(
                onPressed: () => viewModel.incrementCounter(),
                child: const Icon(Icons.add)),
        body: Center(
          child: Text(viewModel.counter.toString()),
   ),
);

The floating action button calls an incrementCounter function we have not created yet on the CounterViewModel. Let's go create that now.

class CounterViewModel extends BaseViewModel {
  int counter = 0;

  void incrementCounter() {
    counter++;
    notifyListeners();
  }
}

as we can see the incrementCounter function increases the counter variable and calls notifyListeners(). This will seem familiar to devs who use provider package. Clicking this button increases the counter variable and rebuilds it in your widget. The whole code will look like this

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CounterApp(),
    );
  }
}

class CounterApp extends StatelessWidget {
  const CounterApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<CounterViewModel>.reactive(
        viewModelBuilder: () => CounterViewModel(),
        builder: (context, CounterViewModel viewModel, child) {
          return Scaffold(
            floatingActionButton: FloatingActionButton(
                onPressed: () => viewModel.incrementCounter(),
                child: const Icon(Icons.add)),
            body: Center(
              child: Text(viewModel.counter.toString()),
            ),
          );
        });
  }
}

class CounterViewModel extends BaseViewModel {
  int counter = 0;

  void incrementCounter() {
    counter++;
    notifyListeners();
  }
}

We have not only reduced our code and removed boilerplate code but we have a very simple and easy to understand state management platform. Stacked package is actively maintained and regularly updated. There are so many functions and classes that would fit your use case so you can check them out here. I am not affliated to them in any way but i would highly recommend them to any flutter dev of any experience level. Cheers and happy coding!

Data Structures And Algorithms For Not So 'Algorithmic' Languages 2: Merge Sorted Array(Easy)

Patrick Obafemi — Sat, 25 Sep 2021 00:26:08 +0000

Hello everyone and I'm glad you are here. In our last post we did a basic intro to what algorithms are and what we aim to achieve with this thread. Today we will be looking at our first algorithm and that is the merge sorted algorithm.
In this algorithm you're given two integer arrays nums1 and nums2, sorted in non-decreasing order, and two integers m and n, representing the number of elements in nums1 and nums2 respectively.

Merge nums1 and nums2 into a single array sorted in non-decreasing order.

The final sorted array should not be returned by the function, but instead be stored inside the array nums1. To accommodate this, nums1 has a length of m + n, where the first m elements denote the elements that should be merged, and the last n elements are set to 0 and should be ignored. nums2 has a length of n.

Basically you are to fill the first array up in non descending order with the values of nums1 and nums2.

The easiest approach is to add the nums2 array value to the end of the array and use a sort function to sort them but that is an O(klogk) where k is the value of m + n. An optimal solution is to use the two pointer approach. Just add a pointer to the last element of nums1 and another to nums2 and compare the values. Add the higher value to the end of nums1 array and decrement the pointer of the array with the highest value.

here is the javascript code

    var merge = function(nums1, m, nums2, n) {
    p1 = m - 1; p2 = n - 1; i = m + n - 1;
    while(p2 >= 0) {
        if(p1 >= 0 && nums1[p1] > nums2[p2]) {
                nums1[i--] = nums1[p1--];
            } else {
                nums1[i--] = nums2[p2--];
            }
        }
    };

And the php implementation

     function merge(&$nums1, $m, $nums2, $n) {
        $p1 = $m - 1; $p2 = $n - 1; $i = $m + $n - 1;
        while($p2 >= 0) {
            if($p1 >= 0 && $nums1[$p1] > $nums2[$p2]) {
                $nums1[$i--] = $nums1[$p1--];
            } else {
                $nums1[$i--] = $nums2[$p2--];
            }
        }
    }

So in our next post we will look at a medium difficulty question. If you got any questions or contributions hit me up in the comments. Happy coding!

Data Structures And Algorithms For Not So 'Algorithmic' Languages 1: Introduction

Patrick Obafemi — Wed, 04 Aug 2021 07:08:27 +0000

Okay so before you say "Not another post about data structures!" stay with me. So i might have to be cliche and say, the importance can never be overemphasized. Algorithms basically controls the world. Okay so not in the way the illuminati does(if you believe in conspiracy theories!) but basically in a "make things run smoothly" manner. Every piece of software out there are working because someone very smart wrote a very efficient algorithm. And contrary to beliefs, it's not that hard to write algorithms. And algorithms can make you lots of money. Yup you heard that right!

So this post and other subsequent post would be to introduce you to the world of data structures and algorithms, but we will be writing looking at them in languages that you'd not normally write algorithms in. I mean languages like java, c++, c# and other big boys are the go to languages for data structures and algorithms courses as they have some of the datastructures we would be looking at out of the box. So people who actually write in the so called low level languages sometimes feel left out. As a PHP and dart developer i feel that way sometimes.

So this thread will be for these left out languages. Even though the concepts of data structures and algorithms are the same across all languages, seeing a piece of code in a language you are familiar has this level of peace it gives. The way it will work is any algorithm we are going to look at will first be explained, then we will write the algorithm in php, dart, python and javascript. Also we will look at the big O notation of these algorithms too. Note that these algorithms are usually questions gotten from leetcode, hackerrank and so on.

So sit back, relax and stay tuned. I will try so put out posts regularly. As we all know every developer is busy so indulge me if you can. Also no one is an island of knowledge so if i miss something kindly point me to it in the comments. See you soon!