DEV Community: Nikki Eke

Flutter CI/CD Guide: Choose the Right Workflow and Automate Your App Releases

Nikki Eke — Wed, 04 Mar 2026 14:26:34 +0000

If you are still building and releasing your Flutter apps manually, you are likely spending hours every week on tasks that could be fully automated. Setting up CI/CD can dramatically reduce that effort, freeing your time to focus on building features, experimenting with ideas, or even launching that side project you have been postponing.

The challenge, however, is deciding which CI/CD option is right for your team. With so many tools available, making the right choice can feel overwhelming.

In this article, you will learn the key benefits of CI/CD, the major CI/CD options available for Flutter teams, their pros and cons, and practical recommendations to help you choose the setup that best fits your product and workflow. Let’s dive in.

What is Flutter CICD

CICD (Continuous Integration / Continuous Delivery) is simply automating the building, testing and deployment of software by integrating code changes frequently and automatically while validating them through a pipeline.

Flutter CICD is specifically CICD for Flutter applications.

Key Benefits of Flutter CICD

Faster release cycles: CICD automates build and deployment steps, allowing teams to release updates more frequently instead of waiting for manual processes.
Easier deployment: Releasing mobile apps involves complex setup steps that include app signing, dependency setup, build configurations. These complex steps are automated by CICD, freeing up the developers to focus on shipping new features.
Continuous monitoring: Integrating error monitoring and automatic testing to the CICD workflow helps the team catch bugs before and after release.

Major CICD Options for Flutter

There are many CICD options for Flutter apps available. Below you will find a breakdown of these options, their pros and cons and the kind of teams they are best fit for.

Codemagic (Flutter-focused CI/CD)

Codemagic is a CI/CD platform designed specifically for Flutter and mobile development, with ready-to-run workflows.

Pros

Built specifically for Flutter, so minimal configuration required
Automatically builds Android and iOS with default workflows
Supports publishing directly to Play Store and App Store
Easier setup compared to general CI platforms

Cons

Less flexible for complex multi-service pipelines

Best for: Flutter first teams wanting fast setup and minimal configuration.

Bitrise (mobile-focused CI/CD)

Bitrise is a mobile-focused CI/CD platform with ready-made steps for mobile workflows including Flutter.

Pros

Strong mobile ecosystem (Android + iOS optimized workflows)
Pre-configured steps for signing, testing, and deployment
Good support for device testing and automation

Cons

More complex setup than Codemagic
Build times are slower for Flutter than in Codemagic

Best for: Mobile focused teams needing deep third‑party integration support and workflow control.

Appcircle (mobile-focused CI/CD)

Appcircle is also a mobile-focused CI/CD platform with default workflow templates

Pros

Built specifically for mobile apps (supports Flutter workflows)
Automates code signing and provisioning profile management
Provides a Workflow Marketplace where you can drag-and-drop workflow steps into your pipeline

Cons

Might require slightly more initial configuration for deploying Flutter apps.

Best for: Mobile focused teams needing fast setup for building and distribution.

GitHub Actions

A cloud CI/CD service integrated directly into GitHub repositories, widely adopted because of its seamless repository integration.

Pros

Native integration with GitHub repositories
Highly customizable pipelines
Large marketplace of reusable workflow actions
No need to manage build servers

Cons

Requires more manual setup for Flutter pipelines
YAML configuration complexity can cause setup challenges

Best for: Teams already hosting code on GitHub wanting flexible automation.

GitLab CI/CD

Overview:

CI/CD system integrated into GitLab repositories with built-in security scanning and pipeline tooling.

Pros

Integrated CI/CD inside GitLab platform
Built-in security testing and DevOps features
Flexible pipeline configuration

Cons

More configuration required compared to Flutter-specific platforms
Setup complexity for mobile signing and deployment

Best for: Organizations already using GitLab and want to maintain it for their entire DevOps lifecycle.

CircleCI / Travis CI (general CI tools)

Overview:

General-purpose CI/CD systems capable of running Flutter builds in containerized environments.

Pros

Fast parallel builds (CircleCI)
Language-agnostic pipelines
Mature ecosystem of integrations

Cons

Flutter workflows require manual configuration

Best for: Teams already using these CI platforms for backend or web services and want to maintain it for their entire DevOps lifecycle.

Pricing Breakdown

Most CICD platforms already offer generous free tiers that allow you spin up and deploy your projects with ease. However, depending on your project needs, team size and frequency of releases you may need to pay to use certain CICD features. Understanding the pricing helps you make the right choice that’ll be beneficial for you and your team on the long run.

CICD tools generally charge for the following:

Artifact storage
Build logs retention
Additional team members
macOS machines

Here is the pricing breakdown of some CICD tools:

CICD Tool	Free Tier	Paid plans	Enterprise
Codemagic	500 min/month	Pay-as-you-go per minute	Annual fixed plans (~$3k)
Bitrise	Free deployment with limited build credits	~$89–$225/mo	Enterprise plan
Appcircle	Free tier available (limited build minutes & concurrency)	Team plans starting from ~$49/month	Custom enterprise pricing
GitHub Actions	2,000 min/month (private repos), unlimited for public repos	~$4/user/mo	Starting at ~ $21/user/mo
GitLab CI/CD	400 min/mo	~$29/user/mo	Enterprise plan
CircleCI	$0/mo	$15/mo	Enterprise plan

Release Automation Tools

Release automation tools sit at the CD layer of your pipeline and help you automate other processes required before the app is released. They help you manage processes like app signing, distribution, and store submission, plug them into your CICD tool to fully automate your release workflow.

Here some release automation tools you can use:

Fastlane

Fastlane is an open-source automation tool that automates the process of building, signing, and releasing mobile apps to app distribution platforms.

What it automates

App signing
Screenshot generation
Uploading to:
- App Store Connect
- Google Play Store
- Firebase App Distribution
TestFlight deployment
Version number updates

Firebase App Distribution

Firebase App Distribution is a service that allows you to distribute pre-release versions of your mobile apps to testers.

What it automates

Internal testing distribution
Uploading APKs, AABs, or IPAs
Tester invitations
Release notes distribution
Build notifications

Most release automation tools use Appstore connect API and Google Play Developer API to carry out actions under the hood. However, you can still use this APIs in custom scripts on your CICD workflows to carry out release automation tasks.

Shorebird

Shorebird is a Flutter-specific post release automation tool that introduces Code Push to mobile apps. With it your users can get new updates over-the-air (OTA) without having to download from the appstore or playstore. Its only limitation is that you can’t push native code changes, just Flutter and dart code changes.

What it automates

Code Push Updates
Patch Distribution
Update Delivery
Patch Rollbacks

It’s especially useful for hotfix production crashes.

Resources

Selecting a tool for your team or product is an important decision to be made after careful consideration. Personally I am biased to Codemagic and Firebase app distribution as these are the tools I currently use and they get the job done.

Below are a short collection of links to articles to help you configure your CICD workflows.

Most CICD platforms also provide docs and quick start guides, check those out as well.

What makes a great workflow?

The basic use of a CICD workflow is to automate your integration and deployment processes to save you hours of manual work. However there are certain steps you could add to your workflow to help you and your team become more effective, improve the quality of your releases and shorten your release cycles. Let’s look at a couple of steps you can add to your workflow to move it from basic to great.

Selecting the right CICD option

Selecting the right CICD option is obviously a very important step. Considering your team size, your organization structure and your product needs should drive the decision you end up making. Certain choices may seem good at first but end up causing you to rack up unnecessary expenses in the long run.

Set up workflow triggers

Setting up workflow triggers helps you cut down on the manual work of running the CICD workflow yourself. You can setup your workflow to listen for triggers to run then depending on your setup, simply make a PR or push to a certain branch and the workflow begins to run independently.

Incorporate code quality checks

When working with a team, it’s important to set up code quality standards using linters. This helps enforce the same standard on every code being pushed. Then by using the Flutter analyze command in your workflow ensure that only code that meets the standard set is being accepted.

Integrate automated testing

Incorporating automated testing in your workflow enhances quality assurance. This helps you ensure that you aren’t deploying code with failing tests. Integrate jobs to run unit, widget and integration tests in your workflow, reducing the chances of shipping bugs in your code. During CI once any tests fails, ensure you have notifications set to up to ping those responsible for fixing them through channels like slack and email.

Set up release automation for both Android and iOS

Depending on your product needs and the CICD option you choose, you might still need to integrate release automation tools like Firebase distribution, Fastlane or Shorebird with your CICD tool. While this is optional it can help speed up your releases and iterations.

Set up flavored workflows

When working on live projects, it highly recommended to create different working environments. This approach helps you save time in the long run. Using the same codebase you can test different configurations, have different release tracks, catch issues before they show up on production etc.

When you have set up flavored environments for your project then you can set up CICD workflows for those different flavors (environments).

Personally, I use Firebase distribution for staging releases. This approach helps me catch any existing bugs during testing while on the staging environment before the apps even get to the store.

If you don’t know about flavors? check these references to get started:
Build flavors in Flutter (Android and iOS) with different Firebase projects per flavor

Mastering Flutter Flavors: Tailoring Your App for Multiple Environments

Set up automated build versioning and release notes creation

Manually updating your app versions for each release can be error prone and time consuming, however this task can be automated right in your workflow. In your workflow you can handle this with a script that checks the latest build released and increments build number by 1. This is possible by using the app store, google play and Firebase distribution APIs available.

You can also generate release notes from your commits by extracting the commit messages from your last set of commits or from the last git tag. While at this you can use AI to further simplify the release notes so that it’s easier for QA or any non technical member of the team to know what the newest release currently covers.

You can do this by calling an AI endpoint, passing the extracted commit messages, right there in your workflow using a script. After this you then save in a file, which you pass to your CICD tool to submit alongside the apps to the distribution platform.

Set up build notifications

To keep your team informed on the status of your releases, it is important to set up build notifications to alert your team on platforms like slack, teams or email.

With this in place, you can easily share the status of any release with the rest of your team. You don’t have to manually make announcements each time a build is deployed.

Integrate error monitoring to your workflow

Many times, when a crash happens in production and is picked by your error monitoring tool; the stacktrace is unreadable and because of this it makes it difficult to debug. However, you can fix this issue, by adding a step to your workflow that basically uploads debug symbols to your error monitoring tool after the app is built. With this when a crash happens in prod, the error monitoring tool is able to de-obfuscate the stack trace and now you can see exactly what broke. Sentry and crashlytics work well for this.

OTA Automated rollbacks

Sometimes software can act unpredictably and a release might suddenly start crashing in prod. Instead of scrambling to fix and submit a new build on the store. You can automate your rollbacks using Shorebird and an error monitoring tool like Sentry. Add a scheduled CI job that checks Sentry’s metrics and if the crash rates exceed a particular threshold, it then automatically triggers a shorebird rollback.

Sample Codmagic Workflow Script

This is a sample Flutter iOS workflow script that:

Runs only when last commit contains ticket Id
Auto-increments build numbers
Generates AI-powered release notes
Sets up Flutter and iOS project environments
Builds the IPA
Uploads it to TestFlight

workflows:
  ios_staging:
    name: iOS Staging Build
    max_build_duration: 60
    instance_type: mac_mini_m2

    integrations:
      app_store_connect: YOUR-APPSTORE-CONNECT-API-KEY-NAME

    triggering:
      events:
        - push
      branch_patterns:
        - pattern: "staging"
          include: true
          source: true
      cancel_previous_builds: true

    environment:
      ios_signing:
        provisioning_profiles:
          - PROFILE-NAME-ON-CODEMAGIC
        certificates:
          - CERT-NAME-ON CODEMAGIC

      groups:
        - GROUP-NAME

      flutter: stable
      xcode: latest
      cocoapods: default

      vars:
        APP_ID: APPLE-APP-ID
        VERSION_NAME: "1.0.1"

    scripts:
      - name: Exit build if keyword not defined
        script: |
          set -e
          set -x
          COMMIT_MSG=$(git log -1 --pretty=%B)
          echo "$COMMIT_MSG"

          if [[ $COMMIT_MSG != *"OA-"* && $COMMIT_MSG != *"OH-"* ]]; then
            echo "Commit needs to include ticketID in its message."
            exit 1
          else
            echo "Commit message includes ticketID, moving forward..."
          fi

      - name: Fetch build number
        script: |
          BUILD_NUMBER=$(($(app-store-connect get-latest-testflight-build-number "$APP_ID") + 1))
          echo "BUILD_NUMBER=$BUILD_NUMBER" >> $CM_ENV

      - name: Generate AI release notes with Claude Haiku 4.5
        script: |
          set -eo pipefail
          VERSION_NAME=${VERSION_NAME:-"Unknown"}
          BRANCH_NAME=${CM_BRANCH:-"unknown"}
          COMMITS=$(git log -10 --pretty=format:"%s" --no-merges || echo "")

          write_release_notes() {
            local TEXT="$1"
            jq -n --arg text "$TEXT" \
              '[{"language": "en-US", "text": $text}]' > release_notes.json
            cat release_notes.json
          }

          if [ -z "$COMMITS" ]; then
            echo "No commits → fallback basic notes"
            FALLBACK="APP\n\nVersion: $VERSION_NAME ($BUILD_NUMBER)\nBranch: $BRANCH_NAME\n\nNo significant changes detected in this build."
            write_release_notes "$FALLBACK"
            exit 0
          fi

          PAYLOAD=$(jq -n \
            --arg commits "$COMMITS" \
            '{
              model: "claude-haiku-4-5",
              max_tokens: 800,
              temperature: 0.2,
              messages: [{
                role: "user",
                content: ("Create concise plain text release notes from these commits:\n\n" + $commits + "\n\nInclude Features, Improvements, Bug Fixes sections. Do not use < or > symbols.")
              }]
            }')

          RESPONSE=$(curl --silent --show-error \
            -H "Content-Type: application/json" \
            -H "x-api-key: $ANTHROPIC_API_KEY" \
            -H "anthropic-version: 2023-06-01" \
            --data "$PAYLOAD" \
            https://api.anthropic.com/v1/messages) || true

          echo "$RESPONSE" > claude_raw.json
          NOTES=$(jq -r '.content[0].text // empty' claude_raw.json 2>/dev/null)

          if [ -z "$NOTES" ]; then
            echo "Claude failed → fallback"
            FALLBACK=$(printf "APP\n\nVersion: %s (%s)\nBranch: %s\n\nRecent commits:\n%s" \
              "$VERSION_NAME" "$BUILD_NUMBER" "$BRANCH_NAME" \
              "$(git log -10 --pretty=format:'- %s' --no-merges)")
            write_release_notes "$FALLBACK"
          else
            write_release_notes "$NOTES"
          fi

      - name: Set up code signing settings on Xcode project
        script: |
          xcode-project use-profiles

      - name: Get Flutter packages
        script: |
          flutter pub get

      - name: Install CocoaPods
        script: |
          pod install --project-directory=ios

      - name: Build iOS IPA
        script: |
          flutter build ipa \
            --release \
            --build-name=$VERSION_NAME \
            --build-number=$BUILD_NUMBER \
            --export-options-plist=/Users/builder/export_options.plist

    artifacts:
      - build/ios/ipa/*.ipa

    publishing:
      app_store_connect:
        auth: integration
        submit_to_testflight: true

Best practices for CICD

Keep pipelines fast: long pipelines slow teams down and delay adoption. Cache dependencies, run jobs in parallel and avoid rebuilding unchanged components.
Automate everything that is repeatable: reducing manual steps lowers human error and improves reliability. Automate jobs like versioning, store deployment, lint checks etc
Use flavored environments: this is recommended Devops practice as it helps you manage the workflows for the different environments, improving testing and reducing errors.
Secure your pipeline: use encrypted secrets and least privileged access for your workflows. Store your secrets in CI secret managers.
Keep your workflows maintainable: Avoid massive monolithic scripts. Keep the workflow file readable.

Conclusion

Setting up CICD for your Flutter apps will improve your quality of life as a Flutter developer. No more long hours spent in manually building and distributing your Flutter apps on different platforms. You can now build once, push your code and go for a coffee break, then come back to find the app waiting in the stores.
For any questions, you can find me on X, LinkedIn and Github.

Efficient CRUD Operations in Flutter: A Guide to Implementing HTTP Requests with Clean Architecture and Dio

Nikki Eke — Wed, 17 May 2023 17:56:52 +0000

In the dynamic world of Flutter app development, the ability to perform efficient CRUD operations is a game-changer. Seamlessly integrating HTTP requests with the power of Clean Architecture and the Dio library can elevate your Flutter applications to new heights of performance and productivity. In this in-depth guide, we unveil the strategies and techniques for implementing smooth and optimized HTTP requests using Clean Architecture and Dio. By following the principles of Clean Architecture, you'll establish a solid foundation that enhances code maintainability, scalability, and modularity. Combined with the versatility of Dio, a battle-tested HTTP client library, this will equip you with a powerful toolset to conquer complex networking challenges. Get ready to elevate your Flutter development with optimized HTTP requests. Let's dive in!

Understanding Clean Architecture

Clean Architecture is a software design pattern. It emphasizes the separation of concerns and the independence of the components that make up a software system. It is a helpful pattern for building scalable and maintainable apps because it provides a clear, structured architecture that promotes separation of concerns, testability, and flexibility.

Clean Architecture advocates for layered architecture, and there are clear boundaries between each layer. The outermost layer is the presentation layer, which handles the user interface and user interaction with the application. The domain layer handles the core business logic of the application. It is independent of any specific implementation directly concerning the database or user interface. Finally, the innermost layer is the infrastructure or data layer, which handles the business logic for storing and retrieving data in the application.

Benefits of Dio for Flutter App Networking

Dio is a powerful HTTP client library that simplifies the process of making HTTP requests and handling responses in Dart-based applications. Here are some of its many benefits:

Simplified HTTP request handling: Dio provides an easy-to-use API, which abstracts away the complexities of making network requests in Flutter. It simplifies the networking process and allows developers to focus on app logic.
Customization: Dio allows developers to customize various aspects of network requests, such as headers, timeouts, and response formats. This flexibility allows for greater control over the networking behavior of the app.
Efficient Caching: Dio supports various caching strategies that can help reduce network traffic and improve app performance. It is helpful for apps that rely heavily on network requests, as it can reduce the number of requests and improve app responsiveness.
Error Handling: Dio provides a robust error-handling mechanism that can help detect and handle network errors gracefully and consistently. It ensures that the app behaves correctly in the face of network errors and provides a better user experience.

Overall, Dio is a powerful and flexible tool for networking in Flutter apps that can help developers build more robust, scalable, and efficient apps with less effort and better results.

CRUD API Implementation with Dio

We will now go ahead to create a simple Flutter app. In which we will implement the CRUD APIs.

At the end of this tutorial, we should be able to

GET - Get all Users
POST - Create New User
PUT - Update User data
DELETE - Delete User data

We will use

the REQ | RES API in this example because it provides us with the methods we need.
Dio for the app networking,
Clean architecture and Feature-first approach for managing the project structure,
and finally, Riverpod for state management.

This is the result:

Add Required Dependencies

Create a Flutter app, then go to your Pubspec.yaml file and add the following dependencies for Dio and Riverpod. You can find these dependencies on Pub.dev

dependencies:
  dio: ^5.1.1
    flutter_riverpod: ^2.3.6

Implement the Project Structure

Following the Clean Architecture and Feature-first approach, we will create the folders we need and name them accordingly. Your project structure should look like this.

Here, we can see that we have implemented clean architecture. It comprises of structuring the project into domain, infrastructure, and presentation. Also, following the feature-first approach, in which each feature contains its domain, infrastructure, and presentation folders, the CRUD feature we are implementing has all these folders.

State your API endpoints

As stated earlier we are using the REQ | RES API in the example, you can check it out to see all the methods it provides. Now, go to the core/internet_services/ create a dart file and name it paths.dart, this will contain the baseurl and endpoint.

String baseUrl = "https://reqres.in/api";
String users = "/users";

Set up DioClient

Next, in your core/internet_services/ folder, you create a dart file and name it dio_client.dart. To send a request to the server, we must first set up the DioClient. Setting up a DioClient provides a convenient and efficient way to manage network requests in your application. It offers customization options, simplifies request management, and much more. Here we will create a DioClient singleton class to contain all the Dio methods we need and the helper functions.

/// Create a singleton class to contain all Dio methods and helper functions
class DioClient {
  DioClient._();

  static final instance = DioClient._();

  final Dio _dio = Dio(
      BaseOptions(
          baseUrl: baseUrl,
          connectTimeout: const Duration(seconds: 60),
          receiveTimeout: const Duration(seconds: 60),
          responseType: ResponseType.json
      )
  );

  ///Get Method
  Future<Map<String, dynamic>> get(
      String path, {
          Map<String, dynamic>? queryParameters,
          Options? options,
          CancelToken? cancelToken,
          ProgressCallback? onReceiveProgress
        }) async{
          try{
                final Response response = await _dio.get(
                 path,
                 queryParameters: queryParameters,
                 options: options,
                 cancelToken: cancelToken,
                  onReceiveProgress: onReceiveProgress,
                );
                if(response.statusCode == 200){
                  return response.data;
                }
                throw "something went wrong";
            } catch(e){
            rethrow;
          }
  }

  ///Post Method
  Future<Map<String, dynamic>> post(
      String path, {
        data,
        Map<String, dynamic>? queryParameters,
        Options? options,
        CancelToken? cancelToken,
        ProgressCallback? onSendProgress,
        ProgressCallback? onReceiveProgress
      }) async{
    try{
      final Response response = await _dio.post(
        path,
        data: data,
        queryParameters: queryParameters,
        options: options,
        cancelToken: cancelToken,
        onSendProgress: onSendProgress,
        onReceiveProgress: onReceiveProgress,
      );
      if(response.statusCode == 200 || response.statusCode == 201){
        return response.data;
      }
      throw "something went wrong";
    } catch (e){
      rethrow;
    }
  }

  ///Put Method
  Future<Map<String, dynamic>> put(
      String path, {
        data,
        Map<String, dynamic>? queryParameters,
        Options? options,
        CancelToken? cancelToken,
        ProgressCallback? onSendProgress,
        ProgressCallback? onReceiveProgress
      }) async{
    try{
      final Response response = await _dio.put(
        path,
        data: data,
        queryParameters: queryParameters,
        options: options,
        cancelToken: cancelToken,
        onSendProgress: onSendProgress,
        onReceiveProgress: onReceiveProgress,
      );
      if(response.statusCode == 200){
        return response.data;
      }
      throw "something went wrong";
    } catch (e){
      rethrow;
    }
  }

  ///Delete Method
  Future<dynamic> delete(
      String path, {
        data,
        Map<String, dynamic>? queryParameters,
        Options? options,
        CancelToken? cancelToken,
        ProgressCallback? onSendProgress,
        ProgressCallback? onReceiveProgress
      }) async{
    try{
      final Response response = await _dio.delete(
        path,
        data: data,
        queryParameters: queryParameters,
        options: options,
        cancelToken: cancelToken,

      );
      if(response.statusCode == 204){
        return response.data;
      }
      throw "something went wrong";
    } catch (e){
      rethrow;
    }
  }

}

From the code snippet above, we can see that we did the following:

Created a singleton class For DioClient which will ensured that only one instance of the class can exist throughout the application and provides a global point of access to that instance.
In the BaseOptions in Dio:
- Stated the baseUrl, which we had initially added to the project in the paths file
- Stated the connectTimeout which just refers to the maximum amount of time Dio will wait to establish a connection with the server before it is considered a failed request
- Stated the receiveTimeout which specifies the maximum amount of time Dio will wait to receive a response from the server after the connection has been established before it is considered a failed request.
- Stated the responseType which allows you to easily work with the response in the desired format, whether it's JSON, a stream, or raw text, based on your specific requirements.
You can check out the BaseOptions, for more options based on your project requirements.
Next, we created the various methods for GET, POST, PUT DELETE and added several parameters for customization and fine-tuning of the network request. Here's an explanation of each parameter:
- data: The data parameter represents the payload or body of the request. As you can see it was not added to the GET method because it does not need a body.
- queryParameters: The queryParameters parameter allows you to include query parameters in the URL of the request.
- options: The options parameter is an instance of the Options class that allows you to specify additional configuration options for the request. It includes properties like headers and followRedirects
- cancelToken: The cancelToken parameter is used to cancel the request if needed.
- onSendProgress: The onSendProgress parameter is a callback function that is called periodically during the sending phase of the request. It allows you to track the progress of the request being sent, which can be useful for displaying progress indicators or implementing upload progress tracking.
- onReceiveProgress: The onReceiveProgress parameter is a callback function that is called periodically during the receiving phase of the response. It enables you to track the progress of the response being received.

Create DioException Class for ErrorHandling

In the core/internet_services/ folder, create a file for the DioException class and name it dio_exception.dart. This class will enhance error handling, provide meaningful error messages, and tailor exception handling to suit your application's requirements.

    class DioException implements Exception{
      late String errorMessage;

      DioException.fromDioError(DioError dioError){
        switch(dioError.type){
          case DioErrorType.cancel:
            errorMessage = "Request to the server was cancelled.";
            break;
          case DioErrorType.connectionTimeout:
            errorMessage = "Connection timed out.";
            break;
          case DioErrorType.receiveTimeout:
            errorMessage = "Receiving timeout occurred.";
            break;
          case DioErrorType.sendTimeout:
            errorMessage = "Request send timeout.";
            break;
          case DioErrorType.badResponse:
            errorMessage = _handleStatusCode(dioError.response?.statusCode);
            break;
          case DioErrorType.unknown:
            if (dioError.message!.contains('SocketException')) {
              errorMessage = 'No Internet.';
              break;
            }
            errorMessage = 'Unexpected error occurred.';
            break;
          default:
            errorMessage = 'Something went wrong';
            break;
        }
        }
      String _handleStatusCode(int? statusCode) {
        switch (statusCode) {
          case 400:
            return 'User already exist ';
          case 401:
            return 'Authentication failed.';
          case 403:
            return 'The authenticated user is not allowed to access the specified API endpoint.';
          case 404:
            return 'The requested resource does not exist.';
          case 500:
            return 'Internal server error.';
          default:
            return 'Oops something went wrong!';
        }
      }

      @override
      String toString()=> errorMessage;
      }

Here, we can see that by using DioErrorType, we have created a very robust error-handling class, which you can customize even further to suit your use case.

Create Model Class

Next, we will create a model class in the domain/model folder, for the data obtained from the server to parse it to a dart readable format and for easy JSON Serialization/Deserialization. We will create a User Model for getting a list of users and a New User Model for creating, updating, and deleting a new user. You can name the files user.dart and new_user.dart respectively.

    class User {
      int? id;
      String? email;
      String? firstName;
      String? lastName;
      String? avatar;

      User({this.id, this.email, this.firstName, this.lastName, this.avatar});

      User.fromJson(Map<String, dynamic> json) {
        id = json['id'];
        email = json['email'];
        firstName = json['first_name'];
        lastName = json['last_name'];
        avatar = json['avatar'];
      }

      Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = <String, dynamic>{};
        data['id'] = id;
        data['email'] = email;
        data['first_name'] = firstName;
        data['last_name'] = lastName;
        data['avatar'] = avatar;
        return data;
      }
    }

    class NewUser {
      String? name;
      String? job;
      String? id;
      String? createdAt;
      String? updatedAt;

      NewUser({this.name, this.job, this.id, this.createdAt, this.updatedAt});

      NewUser.fromJson(Map<String, dynamic> json) {
        name = json['name'];
        job = json['job'];
        id = json['id'];
        createdAt = json['createdAt'];
        updatedAt = json['updatedAt'];
      }

      Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = <String, dynamic>{};
        data['name'] = name;
        data['job'] = job;
        data['id'] = id;
        data['createdAt'] = createdAt;
        data['updatedAt'] = updatedAt;
        return data;
      }
    }

You can generate this easily, by pasting your API response from the REQ | RES API in this json to dart converter

Wrap `MyApp` with `ProviderScope`

As we will be using Riverpod for state management, dependency injection, and much more, we need to wrap MyApp in the main.dart with ProviderScope widget because this is necessary for the Widgets in the app to read providers.

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

Create User Repository

In the domain/repository folder, create the repository abstract class and name the file user_repository.dart, this will contain all the different methods to be implemented for GET, POST, PUT, and, DELETE.

abstract class UserRepository{
  Future<List<User>>getUserList();
  Future<NewUser>addNewUser(String name, String job);
  Future<NewUser>updateUser(String id, String name, String job);
  Future<void>deleteUser(String id);
}

Create User Repository Implementation class

Now, in the infrastructure/repository folder, create a file for user repository implementation class and name it user_repository_implementation.dart. In this class, we will implement all the methods in the user repository we just created.

class UserRepositoryImpl implements UserRepository{

  @override
  Future<NewUser> addNewUser(String name, String job) async {
    try{
      final response = await DioClient.instance.post(
        users,
           data: {
             'name': name,
             'job': job,
           },
      );
      return NewUser.fromJson(response);
    }on DioError catch(e){
      var error = DioException.fromDioError(e);
      throw error.errorMessage;
    }
  }

  @override
  Future<void> deleteUser(String id) async{
    try{
      await DioClient.instance.delete('$users/$id');
        }on DioError catch(e){
          var error = DioException.fromDioError(e);
          throw error.errorMessage;
        }
  }

  @override
  Future<List<User>> getUserList() async {
    try {
      final response = await DioClient.instance.get(users);
      final userList = (response["data"] as List).map((e) => User.fromJson(e)).toList();
      return userList;
    }on DioError catch(e){
      var error = DioException.fromDioError(e);
      throw error.errorMessage;
    }
  }

  @override
  Future<NewUser> updateUser(String id, String name, String job)async {
    try{
      final response = await DioClient.instance.put(
        '$users/$id',
        data: {
          'id': id,
          'name': name,
          'job': job,
        },
      );
      return NewUser.fromJson(response);
    }on DioError catch(e){
      var error = DioException.fromDioError(e);
      throw error.errorMessage;
    }
  }
}

From the code snippet above, we can see that.

We implemented the methods in the abstract class user repository using the GET, POST, UPDATE, and DELETE methods previously defined in the dio client class.
Using the DioException class, we can get better-defined error messages.

Create Provider class

Still, in the infrastructure/repository folder, we will create a provider class using Riverpod for this user repository implementation class. It provides a global point of access for the class. You can name this file provider.dart.

final userListProvider = Provider<UserRepository>((ref){
  return UserRepositoryImpl();
});

final newUserProvider = Provider<UserRepository>((ref){
  return UserRepositoryImpl();
});

final updateUserProvider = Provider<UserRepository>((ref){
  return UserRepositoryImpl();
});

final deleteUserProvider = Provider<UserRepository>((ref){
  return UserRepositoryImpl();
});

Create UseCase class

In the domain/usecase folder, create a file for user usecase and name it user_usecase.dart. The usecase class abstracts the details of external dependencies, such as data sources or APIs. They provide a clean interface for interacting with these dependencies, allowing the use case to remain agnostic of the specific implementation details.

abstract class UserUseCase{
  Future<List<User>> getAllUsers();
  Future<NewUser>createNewUser(String name, String job);
  Future<NewUser> updateUserInfo(String id, String name, String job);
  Future<void> deleteUserInfo(String id);
}

class UserUseCaseImpl extends UserUseCase{
  final UserRepository userRepository;

  UserUseCaseImpl(this.userRepository);

  @override
  Future<List<User>> getAllUsers() async{
    return await userRepository.getUserList();
  }

  @override
  Future<NewUser> createNewUser(String name, String job)async {
   return await userRepository.addNewUser(name, job);
  }

  @override
  Future<NewUser> updateUserInfo(String id, String name, String job) async{
    return await userRepository.updateUser(id, name, job);
  }

  @override
  Future<void> deleteUserInfo(String id)async {
    return await userRepository.deleteUser(id);
  }

}

On studying the code snippet above, we can see that we did the following:

We created an abstract class for the user usecase containing all the different methods we will implement. We also named it differently from those in the user repository to prevent any issues.
In the user usecase implementation class, we can see that, for the different methods, we returned the functions from the user repository, we have successfully abstracted our code using clean architecture. Now it is easier to add, modify, or remove functionality without affecting the rest of the codebase.

Create Provider class

In the same domain/use case folder, create another file for the provider class and name it provider.dart. It will be for the use case implementation class, as we did for the user repository implementation class.

final usersListProvider = Provider<UserUseCase>((ref){
  return UserUseCaseImpl(ref.read(userListProvider));
});

final createUserProvider = Provider<UserUseCase>((ref){
  return UserUseCaseImpl(ref.read(newUserProvider));
});

final updateUserDataProvider = Provider<UserUseCase>((ref){
  return UserUseCaseImpl(ref.read(updateUserProvider));
});

final deleteUserDataProvider = Provider<UserUseCase>((ref){
  return UserUseCaseImpl(ref.read(deleteUserProvider));
});

Here, we can see that with this provider, we can have access to the user usecase implementation class which will in turn allow us access the user repository implementation providers that we created earlier.

Create View Model

Finally, we are ready to plug all this into the UI. In the presentation/view_model folder, create a file for the user_list provider class and name it user_list_provider.dart. This provider will feed data to the UI. Now in the user list screen, we will get the list of all the users from the server. For brevity, you can check GitHub for the completion of the other methods, as we will be taking only GET all users in this section.

class UserListProvider extends ChangeNotifier{
  final ChangeNotifierProviderRef ref;
  List<User>list = [];
  bool haveData = false;

  UserListProvider({required this.ref});

  Future<void>init()async{
    list = await ref.watch(usersListProvider).getAllUsers();
    haveData = true;
    notifyListeners();
  }
}

final getUsersProvider = ChangeNotifierProvider<UserListProvider>((ref) => UserListProvider(ref: ref));

From the code snippet, we can see that:

We have a method, which we named init, that loads the list of users using the use case provider
Then using the ChangeNotifierProvider, we can access the UserListProvider class and use it to feed the UI.

Create the User_List UI and add the provider

In this section, we will see our API response displayed in the UI. 💃🏽 In the presentation/screens folder, create a ConsumerStatefulWidget class for the user list UI, and name the file user_list.dart.

class UserList extends ConsumerStatefulWidget {
  const UserList({Key? key}) : super(key: key);

  @override
  ConsumerState<UserList> createState() => _UserListState();
}

class _UserListState extends ConsumerState<UserList> {
  late UserListProvider provider;
  @override
  Widget build(BuildContext context) {
    provider = ref.watch(getUsersProvider);
    provider.init();

    return Scaffold(
      appBar: AppBar(title: const Text("Get User list"),),
      body: provider.haveData?
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 20,horizontal: 20),
        child: SingleChildScrollView(
          child: Column(
            children: [
              ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: provider.list.length,
                  itemBuilder: (context, index){
                    return ListTile(
                      leading:  ClipRRect(
                          borderRadius: BorderRadius.circular(50),
                          child: Image.network("${provider.list[index].avatar}")
                        ),
                      title: Text('${provider.list[index].firstName}'),
                      subtitle: Text('${provider.list[index].lastName}'),
                    );
                  })
            ],
          ),
        ),
      ):
          const Center(child: CircularProgressIndicator())
    );
  }
}

Here, we can see that:

UserList class is a ConsumerStateful widget, this is required by riverpod to ensure the seamless passing of the ref property.
Using ref.watch we can have access to the getUsersProvider which we used to get user list

To view the complete folder structure and access the remaining code for the other methods, please refer to this GitHub link.

After implementing the other methods, this is our result:

Conclusion

Congratulations, you have come to the end of this tutorial. You should have learned

How to structure your files using clean architecture and feature first approach
How to use Dio for app networking
How to implement a CRUD API
How to use Riverpod for state management and dependency injection

You can study the Dio docs to explore the many things you could achieve using Dio. If you liked this tutorial and found it helpful, drop a reaction or a comment and follow me for more related articles.

Maximizing Your Flutter App's Performance with (Async)NotifierProvider, Freezed & Riverpod Code Generators

Nikki Eke — Sat, 25 Mar 2023 11:05:00 +0000

Maximizing the performance of your Flutter app is crucial for delivering a seamless user experience. As software developers, we constantly seek out tools that can enhance our coding experience while improving the efficiency and quality of our code. This beginner's guide focuses on utilizing the power of AsyncNotifierProvider and NotifierProvider from Riverpod, together with the Riverpod code generator, for efficient state management. By incorporating these tools, you can generate providers faster, simplify the process of passing ref property around, and streamline debugging. The guide includes simple examples that demonstrate how to use these providers in your project and leverage the benefits of the Freezed and Riverpod code generators.

Prerequisites

Basic knowledge of dart
A basic understanding of flutter and state management.
A code editor ( Android Studio or VScode recommended)
A mobile device or emulator to build on.
You’ve read the first article in this series or have at least a basic knowledge of how Riverpod works 👇🏽

Mastering Riverpod in Flutter: The Ultimate Guide for Flutter Beginners

Nikki Eke ・ Feb 10 '23

#flutter #riverpod #dart

Scope of this tutorial

In this tutorial, we will cover the following:

Examples to show the implementation of the Notifier and AsyncNotifier Providers.
How to use code generation tools like Freezed and Riverpod code generator.
How to use AsyncValue to handle loading state
How to use copyWith when working with an immutable class.

Installation of Dependencies

First, you will need to get to your pubspec.yaml and add the following packages

dependencies:
  flutter_riverpod: ^2.1.3
  riverpod_annotation: ^1.1.1
  freezed_annotation: ^2.2.0
  freezed: ^2.3.2

dev_dependencies:
  build_runner:
  riverpod_generator: ^1.1.1

Then run flutter pub get

You have successfully added the necessary dependencies to your project.

Why use code generation tools?

If you choose to work without code generation tools, your Riverpod providers will still be fully functional. However, Riverpod greatly recommends using code generation tools. Code generation is using a tool to generate code. In dart, once you add the code generation syntax and compile, your code is automatically generated. Doing this saves you the time and energy you would have used to write that code, especially when you are working on a big project and need to handle those tasks repeatedly. Code generation will help prevent those errors that can happen when doing the same task repeatedly. It makes debugging better and generally makes your life easier.

Freezed Code Generator

Freezed is a code generation package that helps you create data classes with dart. With the use of Freezed you can generate models, unions and much more. Freezed allows you to focus on the definition of your data class, instead of writing long lines of code that may be error-prone.

Read more on what you can do with Freezed.

Riverpod Code Generator

With the Riverpod code generation package, it is now easier to declare providers. You no longer need to write your providers by hand or wonder which particular provider will suit your use case.

All you need to do is follow the syntax for defining your Riverpod code generator and annotate your code, then with build_runner you can generate all your providers.

For instance, this is the code generation syntax for these different Riverpod providers

For Providers:

@riverpod
int foo(FooRef ref) => 0;

For FutureProviders:

@riverpod
Future<int> foo(FooRef ref) async {
  return 0;
}

For StateProviders

@riverpod
class Foo extends _$Foo {
  @override
  int build() => 0;
}

You can notice that there is a pattern for creating the providers. Once you put the correct syntax you can generate the providers just like that.

Notifier Provider

Riverpod 2.0 came with the addition of two new provider types, the NotifierProvider, and the AsyncNotifierProvider. Riverpod recommends you use the NotifierProvider instead of the ChangeNotifier and StateNotifier providers, so we are focusing on these two.

The NotifierProvider is used to listen to and expose a Notifier. A Notifier exposes a state that can change over time.

Let’s consider a simple example 👇🏽

We will build a random string generator with two buttons, one to generate a new string and the other to clear the entire list of strings. In this example, we will also be using the Riverpod code generator.

First, using Riverpod annotation and the code syntax below, we will create a NotifierProvider. We will also add the functions for adding a random string and clearing the list of strings. We will add the name of the file to be generated by specifying with part as seen in the code.

Note: The name of the file to be generated is the same as the name of the current file you are working on. When specifying it with part you will need to add .g.dart as that is how Riverpod-generated files are named.

import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'notifier_list_provider.g.dart';

@riverpod
class RandomStrNotifier extends _$RandomStrNotifier{
  @override
  List<String> build() {
    return [];
  }
//using Dart's spread operator we create a new copy of the list
  void addString(String randomStr){
    state = [...state, randomStr];
  }

  void removeStrings(){
    state = [];
  }
}

From our code, we can see that the RandomStrNotifier returns an empty List, then we added the two functions to add to the list and clear the list. NotifierProvider and AsyncNotifierProvider support immutable state, because our state is immutable, we can not say state.add or state.remove. So we create a new copy of the list. state is used for updating the UI state.

To run the code generator, run this command on the terminal:

flutter pub run build_runner watch --delete-conflicting-outputs

After it has successfully run, you can see your generated provider file, in your project tab, in your code editor.

From the image above you can see how the generated file will look like.

Note: If you get the error Could not find a file named "pubspec.yaml" in "C:\Users\… then run the dart pub get command on your terminal.

Moving on, let’s add this provider and the functions to our UI

Widget build(BuildContext context, ref) {
        // rebuid the widget when there is a change
    List<String> randomStrList = ref.watch(randomStrNotifierProvider);
    final random = Random();
    return Scaffold(
      appBar: AppBar(
        title: const Text("RiverPod Notifier Example App"),
        backgroundColor: Colors.brown,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Column(
              children: [
                                //map to a list
                ...randomStrList.map((string) =>
                    Container(
                      alignment: Alignment.center,
                      margin: const EdgeInsets.only(bottom: 10,top: 5),
                      height: 30,
                        width: 300,
                        color: Colors.brown,
                        child: Text(string.toString(),
                          style: const TextStyle(
                            color: Colors.white
                          ),
                        )))
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton.icon(
                  icon: const Icon(Icons.add),
                  label: const Text('Generate'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.brown, // Background color
                  ),
                  onPressed: () {
                                    //add string to list function
                    ref.read(randomStrNotifierProvider.notifier).addString("This is the "
                        "random String ${5  + random.nextInt( 1000 + 1 - 5)}");
                  },
                ),

                ElevatedButton.icon(
                  icon: const Icon(Icons.clear),
                  label: const Text('Clear'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.brown, // Background color
                  ),
                  onPressed: () {
                                    //clear list function
                    ref.read(randomStrNotifierProvider.notifier).removeString();
                  },
                )
              ],
            )
          ],
        ),
      ),
    );
  }

As you can see the Riverpod code generator, generated a matching randomStrNotifierProvider

When you run the app it should look like this 👇🏽

AsyncNotifierProvider

The AsyncNotifierProvider is used to listen to and expose an asyncNotifier. The AsyncNotifier is a notifier that is asynchronously initialized.

Let’s dive into the example

We will be building a simple app that loads a list of products after a time duration of 3 seconds with a button to clear the list of products.

First, we will use the Freezed code generator tool to create our product class. Then using the copyWith method we will create the product objects that will be going into our list. We will add the name of the file to be generated by specifying with part as seen in the code. The name of the generated file is the current name of your file and .freezed.dart This is how the freezed files are named.

import 'package:freezed_annotation/freezed_annotation.dart';
//replace with part 'name_of_your_file.freezed.dart';
part 'async_notifier_list_provider.freezed.dart';

@freezed
class Product with _$Product{
  const Product._();
  const factory Product({
    String? name,
    String? description,

  }) = _Product;

}

  const Product _product1 =  Product(name: "Dart course for beginners",
                            description: "This is course will make you a dart star");
  final Product _product2 = _product1.copyWith(description: "This course will make you a pro");
  final Product _product3 = _product1.copyWith(name: "Ultimate Dart course for beginners");

final products = [
              _product1,
              _product2,
              _product3,
];

We can run this command on the terminal to generate the freezed file

flutter pub run build_runner watch --delete-conflicting-outputs

The image above shows how the Freezed generated file will look like.

We used the copyWith method to create new objects of product that we added to the list. The copyWith method is used for returning a new object with the same properties as the original but with the values you have specified, it is used when working with immutable structures like Freezed.

Now we will go ahead and add our Riverpod provider class, which will be fetching the list of products after 3 seconds. We will also add the function to clear the list of products as well.

//replace with part 'name_of_your_file.g.dart';
part 'async_notifier_list_provider.g.dart';

@riverpod
class AsyncProducts extends _$AsyncProducts {
  Future<List<Product>> _fetchProducts() async {
    await Future.delayed(const Duration(seconds: 3));
    return products;
  }

  @override
  FutureOr<List<Product>> build() async {
    return _fetchProducts();
  }

  Future<void>clearProducts()async {
    state = const AsyncValue.loading();
    state = await AsyncValue.guard(() async{
      await Future.delayed(const Duration(seconds: 3));
      return [];
    });
  }

}

The asyncNotifierProvider returns a future list of products. To modify the UI we will now create the clearProducts function, using AsyncValue class we can easily manage the loading, error state, and data state.

Looking at the AsyncValue class, AsyncValue.guard is used to transform a Future that can fail into something safe to read, it is recommended to use this instead of try and catch blocks. it will handle both the data and error states.

Next, run this command on the terminal to generate the necessary Freezed and Riverpod code

flutter pub run build_runner watch --delete-conflicting-outputs

Let’s add this provider and function to our UI

Widget build(BuildContext context, WidgetRef ref) {
    final productProvider = ref.watch(asyncProductsProvider);
    return Scaffold(
        appBar: AppBar(
            title: const Text("AsyncNotifier"),
            actions: [
              IconButton(
                icon: const Icon(
                  Icons.clear,
                  color: Colors.white,
                ),
                onPressed: () {
                  ref.read(asyncProductsProvider.notifier).clearProducts();
                },
              )
            ]
        ),

      body: Container(
        child: productProvider.when(
          data: (products)=> ListView.builder(
              itemCount: products.length,
              itemBuilder: (context, index){
                return Padding(
                  padding: const EdgeInsets.only(left: 10,right: 10,top: 10),
                  child: Card(
                    color: Colors.blueAccent,
                    elevation: 3,
                    child: ListTile(
                      title: Text("${products[index].name}",style: const TextStyle(
                          color: Colors.white,  fontSize: 15)),
                      subtitle: Text("${products[index].description}",style: const TextStyle(
                          color: Colors.white,  fontSize: 15)),
                    ),
                  ),
                );
              }),
          error: (err, stack) => Text("Error: $err",style: const TextStyle(
              color: Colors.white,  fontSize: 15)),
          loading: ()=> const Center(child: CircularProgressIndicator(color: Colors.blue,)),
        ),
      ),
    );
  }

Here we can see that by calling ref.watch we can access our provider, then we add the clear product function to the onPressed by calling ref.read. Now we can handle the different states of the response, using productProvider.when

When you run the app it should look like this 👇🏽

Recap

We have come to the end of this tutorial. Here we have learned that:

The NotifierProvider listens to and exposes a notifier, when there is a change in state, it automatically updates the UI. AsyncNotifierProvider is used to listen and expose a notifier that is asynchronously initialized.
Using code generation tools like Freezed and Riverpod code generators, we can easily generate data and provider classes with very little code.
The copyWith method used to create a new object but with values you specified, when working with immutable classes.
Finally, the AsyncValue class is used to efficiently handle data, loading, and error states.

Conclusion

Congratulations, you have successfully learned how to use Riverpod’s newest providers, NotifierProvider and AsyncNotifierProvider to manage state, how to use code generation tools to generate code, and how to use copyWith method and AsyncValue class. If you enjoyed this article, do well to leave a reaction and follow me for more content. If you have any questions or spot any errors, please do leave feedback.

References

Riverpod Docs

Mastering Riverpod in Flutter: The Ultimate Guide for Flutter Beginners

Nikki Eke — Fri, 10 Feb 2023 13:27:56 +0000

Are you building an app with Flutter? You will need to know and choose a state management technique. This is because you will need to share state across different parts of your app, especially as your app gets large and more complex. You will need to efficiently manage the state in your app to avoid having bugs and difficulty maintaining your app. State management may seem complicated when you are just a beginner, especially because Flutter has a huge range of state management choices. However, using Riverpod for state management will make a lot of things easier for you. With Riverpod you can manage your state elegantly, effectively separate your UI and logic code, and lots more. This beginner’s guide will take you through how to manage state in your app using the different providers that Riverpod offers.

Prerequisites

Basic knowledge of dart
A basic understanding of flutter and state management.
A code editor ( Android Studio or VScode recommended)
A mobile device or emulator to build on.

What is Riverpod?

Riverpod is a reactive caching and data binding framework. It is an upgrade of the Provider state management package. Riverpod is highly versatile, built intentionally to avoid depending on Flutter’s Buildcontext. It has one widget which is used to store the state of all it’s providers in your flutter app. The use of Riverpod brings about the proper separation of concerns, that is, separation of the UI from logic, and it improves testing.

Advantages of Riverpod

It does not depend on Flutter or it’s BuildContext. The providers in Riverpod are global variables and can be accessed from anywhere on the widget tree, you can work with your providers without having any dependency on BuildContext.
It ensures compile safety and also supports multiple providers of the same type.
There is improved performance because of the added features in Riverpod and an integrated caching system.
Providers can be auto-disposed.

Let’s talk about Providers

In Riverpod, Providers are the core of everything (Note that the provider types used in Riverpod and those used in the Provider's package are different). According to the Riverpod documentation, a provider is an object that encapsulates a piece of state and allows listening to that state.

Importance of Providers in Riverpod

Providers can be used as a complete replacement for design patterns such as dependency injection, service locators, inherited widgets, singletons.
Your code will be easier to test and you can override any Provider to behave differently during a test, to test for specific behavior.
App performance will be optimized because with Providers you can ensure that only what is affected by a state change is recomputed.
It allows easy integration with advanced features like pull to refresh.

Provider Types in Riverpod

These are the various providers and their use cases, you can consult this list to know which provider best suits what you want to achieve.

Provider Type	Use Cases
Provider	A service class / computed property (filtered list)
StateProvider	A simple state object/ filter condition
FutureProvider	A result from an API call
StreamProvider	A stream of results from an API
StateNotifierProvider	A complex state object that is immutable except through an interface
ChangeNotifierProvider	A complex state object that requires mutability

In this article, we will be looking at various examples which will help show you how to use the following providers:

Provider
StateProvider
FutureProvider
StreamProvider

Install the Riverpod package

Before we dive into the examples, you should have the following set up:

Add the Riverpod package to your pubspec.yaml as seen below. There are different variants of Riverpod but for this tutorial, we will be using the flutter_riverpod.

environment:
  sdk: ">=2.17.0 <3.0.0"
  flutter: ">=3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.1.3

Then run flutter pub get

You have successfully added the Riverpod package to your project.

Next, in your main.dart you will need to wrap MyApp() with the ProviderScope as seen below, this widget stores the state of all your providers.
```
void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}
```

Create a Provider

Let’s look at a simple example of a provider:

// provider that returns a string value
final nameProvider = Provider<String>((ref) {
  return 'Nikki';
});

This provider is made up of three things:

nameProvider is the global variable used to access the state of this provider.
Provider<String> tells us the kind of provider and the type of state it holds.
A function that creates the state, this function will always receive a ref object as a parameter.

Since Riverpod Providers have an additional ref object, there are different ways to access them in the widget tree:

Using a Consumer
Using ConsumerStatefulWidget & ConsumerState
Using a ConsumerWidget

Using Consumer

Assuming we want to display a title text using the Provider, we can wrap the text widget with the Consumer . When you run the app, it is just the text widget that rebuilds. Doing this will optimize performance on a large scale.

Here is an example:

//We can put the title provider in a different file, and still be able to access it on the Titlepage
final title = Provider<String>((ref) => "This is our title");

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.lightBlue,
        appBar: AppBar(
          title: const Text("RiverPod Example App"),
        ),
        body: Center(
          child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Consumer(
              builder: (context, ref, child) {
                  final titleText = ref.watch(title).toString();
                return Text(titleText,
                    style: const TextStyle(
                        color: Colors.white, height: 10, fontSize: 18));
              },
            ),
          ],
         ),
       )
    );
  }
}

The Consumer has the builder, which takes the context, ref, and child parameters. Before reading a provider, you need to obtain a ref object. The ref object is what allows us interact with the providers. Here, the ref object watches the title Provider you have in the other file. You can have access to the title provider by just calling watch. ref.watch is used to obtain the value of a provider and listen to changes, such that when the value changes, it will rebuild the widget or the provider subscribed to its value.

Using ref.watch, you can access the value in the provider and put it in our text widget. Once done, you have successfully used the consumer method to access your title provider.

Using ConsumerStatefulWidget

In this case instead of extending the StatefulWidget we can extend the ConsumerStatefulWidget & ConsumerState. Doing this helps us access the ref object in the widget tree, which is what we need to read our providers.

Here is an example:

//We can put the title provider in a different file, and still be able to access it on the Titlepage
final title = Provider<String>((ref) => "This is our title");


class Titlepage extends ConsumerStatefulWidget {
  @override
  ConsumerState<Titlepage> createState() => _TitlepageState();
}
class _TitlepageState extends ConsumerState<Titlepage> {
  @override
  void initState() {
    super.initState();
    // we can choose to read the provider inside initstate if necessary
    final titleText = ref.watch(title).toString();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.lightBlue,
        appBar: AppBar(
          title: const Text("RiverPod Example App"),
        ),
        body: Center(
          child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
           Padding(
                padding: const EdgeInsets.only(top: 30,bottom: 30),
                child: Text(titleText,
                        style: const TextStyle(
                            color: Colors.white,fontSize: 30)),
               ),
            ],
         ),
       )
    );
  }
}

Here, we can see that, by sub-classing from ConsumerState, we can access the ref object inside the widget because the ConsumerState has the Widget Ref as a property. Now we can put the titleText variable holding the instance of the title provider in the text widget and have the title display when the app is run.

For the final method which is the ConsumerWidget, we will be using it for all our examples. It is the most common method and it is recommended that you use it except where there is a need to use any of the others.

Simple Counter App

Let’s look at a simple Counter app. The counter app will consist of the following,

The title
Three buttons to add, subtract and reset the counter
The counter in the text widget. It will change its value when you click the buttons.

For this Simple Counter app example, we will use ConsumerWidget. We will extend ConsumerWidget instead of StatelessWidget:

//This is the file containing our providers

//This is the Provider, we are using it because we need to access the title text
final title = Provider<String>((ref) => "Simple Counter");
//we are using StateProvider here because the counter will be changing in state
final counter = StateProvider((ref) => 0);

class Counterpage extends ConsumerWidget {
  const Counterpage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ref) {
    final titleText = ref.watch(title);
    final counterProvider = ref.watch(counter);

    return Scaffold(
        backgroundColor: Colors.lightBlue,
        appBar: AppBar(
          title: const Text("RiverPod Example App"),
        ),
        body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
              Padding(
                padding: const EdgeInsets.only(top: 30,bottom: 30),
                child: Text(titleText,
                        style: const TextStyle(
                            color: Colors.white,fontSize: 30)),
              ),

               Text(
                counterProvider.toString(),
                style: const TextStyle(color: Colors.white, height: 5, fontSize: 23),
              ),
          Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8),
                  child: ElevatedButton.icon(
                    icon: const Icon(Icons.add),
                     label: const Text('Add'),
                      onPressed: ()=> ref.watch(counter.notifier).state++,
                ),
                ),

                Padding(
                  padding: const EdgeInsets.all(8),
                  child: ElevatedButton.icon(
                    icon: const Icon(Icons.remove),
                    label: const Text('Minus'),
                    onPressed: ()=> ref.watch(counter.notifier).state--,
                  ),
                ),
              ],
            ),
            ElevatedButton.icon(
              icon: const Icon(Icons.replay),
              label: const Text('Refresh'),
              onPressed: ()=> ref.watch(counter.notifier).state = 0,
            ),
          ],
         ),
            )
            );
      }
}

Because we used ConsumerWidget, you can see that the widget build method comes with an additional ref property which is to be used to watch the providers. Using the ref, we can access the counter and the title providers, as seen in the code above. To perform the increment, decrement, and, reset functions to the counter, we use ref.watch(counter.notifier).state to access its state and carry out the operations accordingly.

We can see how we effectively used the Provider and StateProvider to achieve a simple counter app. Run this code and you should have your counter app working. It should look like this:

Simple Product List

Next, we will look at an app with a simple list of products that you can filter by name or price at the click of a dropdown button.

The app will consist of

A Listview that displays all the products.
A dropdown button on the app bar for filtering the products according to name or price.

First, we would create a Product class and a list of the products.

class Product{
  Product({required this.name, required this.price});

  final String name;
  final double price;
}

final _products = [
  Product(name: "Spagetti", price: 10),
  Product(name: "Indomie", price: 6),
  Product(name: "Fried Yam", price: 9),
  Product(name: "Beans", price: 10),
  Product(name: "Red Chicken feet", price: 2),
];

Next, to sort the list of product items using the dropdown, we will need an Enum, explicitly stating the two sorting types.

enum ProductSortType{
  name,
  price,
}

We will need to use a StateProvider to synchronize the state of the dropdown with our Provider.

//This is the default sort type when the app is run
final productSortTypeProvider = StateProvider<ProductSortType>((ref) => 
ProductSortType.name);

Then we will need to create a FutureProvider that will show the list of products after every 3 seconds, then update the FutureProvider with the StateProvider to handle the sorting of the products.

final futureProductsProvider = FutureProvider<List<Product>>((ref) async {
  await Future.delayed(const Duration(seconds: 3));
  final sortType = ref.watch(productSortTypeProvider);
switch (sortType) {
    case ProductSortType.name:
       _products.sort((a, b) => a.name.compareTo(b.name));
       break;
    case ProductSortType.price:
       _products.sort((a, b) => a.price.compareTo(b.price));
}
  return _products;
});

From the code above we are saying:

⇒ Provide the List of product items in 3 seconds and then use the switch case function to alternate between when:

productSortTypeProvider = StateProvider<ProductSortType>((ref) => ProductSortType.name);

And when:

productSortTypeProvider = StateProvider<ProductSortType>((ref) => ProductSortType.price);

If neither of the two cases is true, then it just returns the products as we have them on the list.

We have been able to use both the StateProvider and FutureProvider to achieve our goal, this can be seen as the logic part of our project and we can put the whole code in one file.

You can see that using Riverpod we have successfully been able to separate our logic code from UI. Now let’s look at the UI part of the code.

We will need:

an AppBar for holding our dropdown buttons for the sorting of the products
a listview containing the list of products

appBar: AppBar(
          title: const Text("Future Provider Example"),
          actions: [
            DropdownButton<ProductSortType>(
              dropdownColor: Colors.brown,
              value: ref.watch(productSortTypeProvider),
                items: const [
                  DropdownMenuItem(
                    value: ProductSortType.name,
                    child: Icon(Icons.sort_by_alpha),
                ),
                  DropdownMenuItem(
                    value: ProductSortType.price,
                    child: Icon(Icons.sort),
                  ),
                ],
                onChanged: (value)=> ref.watch(productSortTypeProvider.notifier).state = value!
            ),
          ],
        ),

Here, we can see that by using ref.watch on our productSortTypeProvider we can access its value and each of the buttons of the dropdown can have either of the values so that when you click on it, the sorting action is performed. Next, let’s look at the List of products in the Listview:

final productsProvider = ref.watch(futureProductsProvider);

productsProvider.when(
            data: (products)=> ListView.builder(
                itemCount: products.length,
                itemBuilder: (context, index){
                  return Padding(
                    padding: const EdgeInsets.only(left: 10,right: 10,top: 10),
                    child: Card(
                      color: Colors.blueAccent,
                      elevation: 3,
                      child: ListTile(
                        title: Text(products[index].name,style: const TextStyle(
                            color: Colors.white,  fontSize: 15)),
                        subtitle: Text("${products[index].price}",style: const TextStyle(
                            color: Colors.white,  fontSize: 15)),
                      ),
                    ),
                  );
                }),
            error: (err, stack) => Text("Error: $err",style: const TextStyle(
                color: Colors.white,  fontSize: 15)),
            loading: ()=> const Center(child: CircularProgressIndicator(color: Colors.white,)),
        ),

Here, we can see that using the ref.watch we can access the FutureProvider. Riverpod also provides a very elegant method of handling a future response using a .when which returns data, loading, and error, in this way every possible response is handled. When the data response is gotten in the listview we can now access the products list and have it show in the list view as shown above.

This is the full UI code

class ProductPage extends ConsumerWidget {
  const ProductPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ref) {
    final productsProvider = ref.watch(futureProductsProvider);

    return Scaffold(
        appBar: AppBar(
          title: const Text("Future Provider Example"),
          actions: [
            DropdownButton<ProductSortType>(
              dropdownColor: Colors.brown,
              value: ref.watch(productSortTypeProvider),
                items: const [
                  DropdownMenuItem(
                    value: ProductSortType.name,
                    child: Icon(Icons.sort_by_alpha),
                ),
                  DropdownMenuItem(
                    value: ProductSortType.price,
                    child: Icon(Icons.sort),
                  ),
                ],
                onChanged: (value)=> ref.watch(productSortTypeProvider.notifier).state = value!
            ),
          ],
        ),
      backgroundColor: Colors.lightBlue,
      body: Container(
        child: productsProvider.when(
            data: (products)=> ListView.builder(
                itemCount: products.length,
                itemBuilder: (context, index){
                  return Padding(
                    padding: const EdgeInsets.only(left: 10,right: 10,top: 10),
                    child: Card(
                      color: Colors.blueAccent,
                      elevation: 3,
                      child: ListTile(
                        title: Text(products[index].name,style: const TextStyle(
                            color: Colors.white,  fontSize: 15)),
                        subtitle: Text("${products[index].price}",style: const TextStyle(
                            color: Colors.white,  fontSize: 15)),
                      ),
                    ),
                  );
                }),
            error: (err, stack) => Text("Error: $err",style: const TextStyle(
                color: Colors.white,  fontSize: 15)),
            loading: ()=> const Center(child: CircularProgressIndicator(color: Colors.white,)),
        ),
      )
    );
  }
}

When you run your code, it should look like this:

Simple Timer

Finally, let's take an example of a Stream Provider, where we will have a simple timer, that on each second strike, changes the colour of the background randomly.

First, we will need to create a StreamProvider and use the stream.periodic to execute a timer function every second. Let’s look at this in code.

Duration duration = const Duration();

final timer = StreamProvider.autoDispose((ref) => Stream.periodic(
  const Duration(seconds: 1), (_) => addTimer(ref)
)
);
final addSeconds = StateProvider((ref) => 1);

void addTimer(ref){
  final seconds = ref.watch(addSeconds.notifier).state + duration.inSeconds;
  duration = Duration(seconds: seconds );

}

Here, we can see that using the StreamProvider, at every second the Stream.periodic executes the addTimer function. Then using the StateProvider, in the addTimer function we can increase the duration by 1 every 1 second. We also appended the .autoDispose modifier to dispose the provider when it’s not in use.

Let’s look at the UI code:

class TimerPage extends ConsumerWidget {
  const TimerPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ref) {
    final streamCount = ref.watch(timer);
    String twoDigits(int n,)=> n.toString().padLeft(2,"0");
    String minutes = twoDigits(duration.inMinutes.remainder(60));
    String seconds = twoDigits(duration.inSeconds.remainder(60));
    String hours = twoDigits(duration.inHours);
    final _backGroundColor = Colors.primaries[Random().nextInt(Colors.primaries.length)];

    return Scaffold(
      backgroundColor: _backGroundColor,
      appBar: AppBar(
        title: const Text("Stream Provider"),
      ),
      body: Column(
          children: [
            streamCount.when(
            data: (value){
              return Container(
                alignment: Alignment.center,
                margin: const EdgeInsets.only(left: 40,right: 40,top: 50,bottom:20 ),
                height: 300,
                width: 300,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(
                      color: Colors.white,
                      width: 5,
                    )),
                child:  Text(
                  "$hours:$minutes:$seconds",
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                  ),
                ),
              );
    },
            error: (error, stackTrace) => Text(error.toString()),
            loading: () => const Center(child: CircularProgressIndicator(color: Colors.white,)),
        ),

Here, we can see that using ref.watch we can access the timer StreamProvider. Then we use the twoDigits function to format the stream response to two digits. From the twoDigits function, we can get our Minute, Second, and Hour formatted respectively. Then for the background color, we create a variable _backGroundColor that will hold the value for the background color which would change at random every second. In the StreamProvider we can also handle our response neatly, when we use the .when which returns data, loading, and error, we can simply show what we would like to have for any of these responses as we did in the code above.

When you run your code, it should look like this:

Recap

We have come to the end of this tutorial. So far, we have learned that,

Riverpod is an improved version of the Provider package and takes care of most of the Provider’s shortcomings.
Riverpod has different provider types for various use cases, so before you choose a particular provider, you should be sure it will help you accomplish your goal.
You can use Consumer, ConsumerWidget or ConsumerStatefulWidget to access providers in your app.
The ref object is what lets us interact with the providers.

Conclusion

Congratulations!!💃🏽 You have learnt how to use most of Riverpod Providers. The others will be covered in the next article for the sake of brevity. With all you have learnt on Riverpod, go out there and create magic!

Do well to like if the content was of help to you. If you spot any mistakes, you can kindly let me know. I’m looking forward to seeing your feedback. Cheers!

You can reach me on Twitter for more updates.

References

Riverpod Docs

Flutter Riverpod2.0: The Ultimate Guide

Quick & Simple Explanation of how the internet works.

Nikki Eke — Tue, 13 Dec 2022 13:33:16 +0000

Imagine waking up with a start and suddenly you are in the 1930s. You have no internet, no network signal, no phone and, of course, no social media. Now you can’t even tweet about your current predicament. All you can do is try to survive whatever the 1930s was like in your country.

That doesn’t sound very fun, does it? It’s weird to imagine a life without the internet but there was once a life without it. Have you ever wondered how we got here? How do our devices connect to the internet? How do we text and stream videos with no physical connection? Well, me too!

History of the Internet

It all began in the 1960s. The Soviet Union and the United States both wanted to be the first to launch the first Satellite. However, the Soviet Union won, launching the Sputnik satellite before the U.S. could. This later spurred the U.S.'s creation of the Advanced Research Projects Agency Network (ARPANET) during the cold war between the U.S. and the Soviet Union so that they wouldn't miss out entirely on being the "first" to do something.

ARPANET was built for sharing information using the Transfer Control Protocol (TCP). This protocol is the set of rules governing the transmission of data, but as it evolved, a new communication protocol was established called Transfer Control Protocol/Internet Protocol (TCP/IP). This lets different kinds of computers on various networks communicate with each other.

Your Device and the Internet

A network of networks is called internetwork, or simply the internet. It is a huge system of interconnected computer networks that uses the Internet Protocol Suite (TCP/IP) to communicate between networks and devices. It is the largest network in the world. Presently, the Internet is implemented using IPv4 because of the need for more IP address spaces, however, it is migrating from IPv4 to IPv6. The Internet helps its users share and access a huge amount of information globally. It uses WWW, FTP, email services, audio and video streaming etc.

What Happens When You Search on Google?

Your PC is connected through a modem and/or router. Your router enables many computers to join the same network while a modem connects to your Internet Service Provider (ISP) which provides you with either cable or Digital Subscriber Line/Loop (DSL) internet.
On Google, after typing in a web address, also known as Uniform Resource Locator (URL), your query is pushed to your ISP.

Note: your ISP has a record of every site you visit, it doesn't matter if you turn on incognito mode or not.
The Domain Name System (DNS) then translates the text-based domain name you typed into the number-based IP address. For instance: https://www.google.com/ becomes 173.194.215.138
If the IP address of the website is not in the ISP cache, the DNS initiates a DNS query to find the IP address of the server that hosts the domain name.
When it’s found, your browser initiates a connection using TCP/IP, and then it sends a Hypertext Transfer Protocol (HTTP) request to the target server to send a copy of the website.

Note: HTTP is an application layer protocol and it is one of the TCP/IP protocols. This is where the network communication of the TCP/IP begins, there would be a further explanation of this as you read on.
The server approves the request and sends a status code “200 OK” message to your computer. Then, the server sends website files to the browser in the form of data packets.
As your browser reassembles the data packets, the website loads.
Your search results are now available!

Network Communication

Network communication is a set of protocols i.e. rules that allow application programs to communicate with each other independently of their hardware and operating system (hardware & OS agnostic). The Open Systems Interconnection (OSI) model is a reference model of network communication. It defines how data is encoded, formatted, encapsulated, and segmented so that it can be transmitted over networks, while TCP/IP is an implementation of the OSI model which helps you to determine how a specific computer should be connected to the internet and how data can be transmitted.

How data moves through the OSI model

The OSI Model is a reference and logical model that defines network communication used by systems open to interconnection and communication with other systems.

How this works;

From the application layer, the message is received, passed and encrypted in the presentation layer.
Then the session layer handles the network connection and authorization/authentication.
The Transport layer deals with the transport of the message as data segments using either Transmission Control Protocol (TCP) or User Datagram Protocol (UDP).TCP is a connection-oriented protocol that ensures your data is delivered and maintains the order of data using the sequence number. On the other hand, UDP is a connectionless protocol, your data may or may not be delivered completely or in the correct order, but it is typically used because it’s faster.
The network layer deals with the transmission of data. Its main function is to transfer data as packets from the source to the destination. It also manages data traffic problems such as switching, routing and congestion control.
In the Data link layer, the data packets are broken into frames and sent to the physical layer. The physical layer is the lowest layer of the OSI reference model. The frames received from the datalink layer are broken into bits (binary data) for data transmission.

How does the TCP Model Work?

TCP/IP is a communication protocol/rule that determines how a specific computer should be connected to the internet and how data can be transmitted between them. TCP ensures that the transfer of data is dependable. It makes sure no packets are lost, no delay affecting the quality of data, and that packets are organized in the right order. IPs are the rules that control how information is sent from one computer to another over an internet connection.

The application layer is the component that interfaces with the end user, this is the layer that the user directly interacts with when using internet services. For instance, sending an email.
The transport layer defines the various ports and it differentiates the different activities from a single user. You may be surfing the internet, texting and listening to music on one computer. It is the work of the transport layer to differentiate these different activities and ensure that the data segments are sent or received in the same sequence as it was sent by the sender.
The internet/network layer divides the data received from the transport layer in the form of packets. it controls the flow of data from source to destination, it is also concerned with reassembling data packets at their destination.
The network access layer combines the physical & datalink layer of the OSI model. it handles the mechanics of how data is physically transmitted through the networks, which is how these signals (binary data) are transmitted through cables or airwaves.

Data Signal Transmission - How Are We Connected?

When we interact with the internet i.e. sending messages, streaming videos, surfing the web, etc. data is transmitted from the source to the destination. This is made possible by the transmission of data signals. Signals are the electric or electromagnetic current that is used to transmit data from one network to the other. This data can be transmitted through cables or airwaves referred to as Transmission Media.

Transmission Media are of two types:

Guided Media
Unguided Media

Guided Media

In Guided media, signals are transmitted through a narrow pathway using physical links. A good use case is the Submarine cable system. While we live in a seemingly wireless world, a significant part of that connectivity depends on underwater internet cables, known as submarine cables. These submarine cables are responsible for almost all international telecommunications traffic connecting different continents. They generally use optical fibre cables and carry most of the world’s cross-continent data traffic, they are the most valued cables for mega companies from Amazon to Google. You can see an overview of the submarine cable system here.

Unguided Media

It is referred to as Wireless or Unbounded transmission media. No physical medium is required for the transmission of electromagnetic signals. Its use cases are:

For short ranges ⇒ Bluetooth and Wi-Fi
For longer ranges ⇒ 3G, 4G LTE, 5G

Conclusion

In summary, when someone sends something over the internet, it goes from the application layer, the data is encapsulated then it leaves the physical layer, but, when someone receives something from the internet it comes from the physical layer and the data is decapsulated and it shows up on the application layer.

This is just a basic overview of computer networking. If you are interested in the mechanics of networking I encourage you to keep making research on the subject. It is very deep and extensive. If you have suggestions, corrections, questions or you learned something new, you can send in your comments, as I would like to know your thoughts.

Hope you found this article helpful! Cheers.

Install Kali Linux in Oracle's Virtual Box

Nikki Eke — Mon, 28 Nov 2022 22:50:06 +0000

The thought of having to install and setup your Kali Linux operating system using Virtualization software might seem daunting at first, especially when you are new to the use of Linux in a virtual system. If this your first time, you will need a clear and simple guide, because any mistake in the installation and setup might cause the software to malfunction.

This blog covers the step by step guide on how to download and install Kali Linux Operating System in your Oracle VirtualBox.

Introduction to Linux

Linux is an open source Operating System (OS). An OS is a system software that manages all of the software and hardware on the computer. Most of the time, several different computer programs could be running at the same time, and they all need to access your computer's central processing unit (CPU), memory, and storage. The operating system coordinates all of this to make sure each program gets what it needs.

The term open source means that the source code is available to anyone and can be modified and distributed by anyone around the world. So this makes the Linux Operating system available in different versions. These versions are called distributions (or, in the short form, “distros''). You get to choose a distro depending on what you want to achieve.

Nearly every distribution of Linux can be downloaded for free, burned onto disk (or USB thumb drive), and installed (on as many machines as you like).

Popular Linux distributions include:

LINUX MINT
MANJARO
DEBIAN
UBUNTU
ANTERGOS
SOLUS

Kali Linux is a Debian-derived Linux distribution designed for digital forensics and penetration testing. It is maintained and funded by Offensive Security.

Kali Linux is mainly used for advanced Penetration Testing and Security Auditing. Kali contains several hundred tools which are geared towards various information security tasks, such as Penetration Testing, Security research, Computer Forensics and Reverse Engineering.

Download Kali Linux Image

First, you will need to download Kali Linux to your computer. You can download Kali from here

On the home page, click the Downloads link at the top section of the page. On the downloads page get to the Installer Images section. You can choose between the options of Kali for 64bit or 32bit processor.
To determine the processor type on your computer go to Control Panel > System and Security > System

You have the choice of downloading directly or via torrent. If you click the download icon, Kali will download directly to your system , and will be placed on your download folder. The torrent download option is the peer-to-peer download used by many file-sharing sites. You will need BitTorrent for this. The Kali file will then be downloaded to the folder that the torrent application stores its downloads.

What is Virtual Machine

A Virtual Machine is a software that allows you to run multiple operating systems on your computer without affecting your computer’s operating system. This means that you can have a Windows or Mac OS computer and still be able to run a virtual machine of Kali Linux inside that operating system. You don't need to overwrite your existing OS.
Many virtual machine options are available, but here you will get to see how to download and install Oracle’s free VirtualBox

Download & Installation of VirtualBox

You can download VirtualBox here

Then click Downloads on the Downloads page and select the VirtualBox package for your current operating system, make sure you download the latest version.

When the download is completed, click the setup file and it opens up to the setup wizard. Click Next and you should see a Custom Setup Screen. From this Screen, simply click Next. Keep clicking Next until you get to the network interfaces screen warning and then click Yes.
Click install to begin the process. When the installation is complete, click Finish.

Setup of VirtualBox

Your VirtualBox should be open once it's installed. If not, open it and you should see the VirtualBox Manager. Since you will be creating a new virtual machine with Kali Linux.

Click New in the upper right corner. This opens a Create a Virtual Machine dialog. Give your machine a name, You can call it “Kali”.
Select Linux from the Type drop-down menu. Then select Debian(64-bit) from the Version on the menu unless you are using the 32-bit version of Kali, then you will need to select Debian(32-bit).
Click on Next, You will see a small screen where you will need to select how much RAM you want to allocate to this virtual machine.

It is advisable to use just 25% of your total system’s RAM. That means if you have 4GB on your physical system then select just 1GB for your virtual machine. If you have 16GB on your physical system then select 4GB for your virtual machine and so on.

Click on Next and you will get to the Hard Disk Screen. Choose create Virtual HardDisk and click Create, then on the next Screen select Virtual HardDisk (VHD) out of the other options.
On the next screen select Dynamically Allocated as you want the space on the virtual hard drive to be available until it's needed. Click on Next and you will choose the amount of hard drive space to allocate to the VM and the location of the VM. The default is 8GB, but it's recommended that you allocate 20 - 25GB at least.

Remember if you choose to dynamically allocate hard drive space, it won’t use the space until needed. This is better than having to expand your hard drive after it has already been allocated.
Click on Create and you're ready to go!

Installing Kali on the Virtual Box

At this time, you should see a screen like this and the indication that the Kali VM is powered off.

To install the Kali, first click the Start button (The green icon). The VirtualBox will ask where to find the startup disk. You should have already downloaded the Kali Linux disk image with the extension .iso following the steps outlined above. It should be located in your Downloads folder, unless you used torrent to download then it should be in the downloads folder of your torrent application. Click the folder icon to the right, navigate to the downloads folder and select the Kali image file. Then click Start.

Congratulations, you have just installed Kali Linux on a virtual machine!

If you get an error while installing Kali into your VirtualBox, then it's likely because you don't have virtualization enabled in your system’s BIOS. Each system and its BIOS is slightly different so it's best you make a quick search online to get virtualization enabled in your system or to shut down any other competing virtualization software.

Setting Up Kali

Kali will now open a screen showing you several startup choices. Graphical Install is ideal for beginners, because it gives you Desktop access instead of just the terminal. You should select graphical install, use your keyboard keys to navigate the menu.

You will be asked to select Language, ensure you select a language that you will be comfortable working with then click Continue. Next select your location and click Continue and then select the keyboard layout based on your preference.
The setup will now probe your network interfaces, and next the screen prompts you to enter a hostname for your system. You can name it anything you want or leave the default “kali”
Next you will be asked to provide a Domain name, this is optional, so you can click Continue to skip.
Next you will need to create the user account for the system (Full name, username and a strong password).
Next you will need to set your Time Zone.
After this, you will need to choose from the partition disks options. Choose Guided - use entire disk, and Kali will detect your hard drives and set up a partitioner automatically.
Next click Continue to select the disk to be partitioned and ignore the warning from Kali that states that all the data on the disk will be erased because the disk is new and empty, so it won't erase anything.
Depending on your needs, you can choose to keep all your files in a single partition or to have separate partitions for one or more of the top-level directories. For beginners it's recommended that you choose a single partition, so simply select All files in one partition.
Next you will have the chance to go through your options on disk configuration once again, once satisfied, click Yes and Continue.

Kali will now begin installing the operating system, this could take a while.

Once completely installed, you will be prompted to enter proxy information, you can leave it blank and click Continue.
Next, on the software selection screen, click Continue as the default selections have already been made.
Next confirm to install the GRUB boot loader, you will be prompted to choose whether you want to install the GRUB bootloader automatically or manually, select Enter Device Manually then select the available hard drive for the installation and click Continue.
Click to the next screen and you should see that the installation is completed.

Congratulations you have successfully installed and completed the set up of Kali Linux on your Virtual Machine!

Kali will attempt to reboot and after a little while you should see Kali’s login screen, enter your Username and Password.
After logging in you should see the Kali Linux Desktop screen!

Conclusion

Now, you have a virtual machine running a Linux OS within your host OS. You can now choose to learn the basic commands in Linux and play around with it a bit.

I hope you found this article helpful. Kindly let me know what you think as this is my first tech article.

Cheers!

DEV Community: Nikki Eke

Flutter CI/CD Guide: Choose the Right Workflow and Automate Your App Releases

What is Flutter CICD

Key Benefits of Flutter CICD

Major CICD Options for Flutter

Codemagic (Flutter-focused CI/CD)

Bitrise (mobile-focused CI/CD)

Appcircle (mobile-focused CI/CD)

GitHub Actions

GitLab CI/CD

CircleCI / Travis CI (general CI tools)

Pricing Breakdown

Release Automation Tools

Fastlane

What it automates

Firebase App Distribution

What it automates

Shorebird

What it automates

Resources

What makes a great workflow?

Selecting the right CICD option

Set up workflow triggers

Incorporate code quality checks

Integrate automated testing

Set up release automation for both Android and iOS

Set up flavored workflows

Set up automated build versioning and release notes creation

Set up build notifications

Integrate error monitoring to your workflow

OTA Automated rollbacks

Sample Codmagic Workflow Script

Best practices for CICD

Conclusion

Efficient CRUD Operations in Flutter: A Guide to Implementing HTTP Requests with Clean Architecture and Dio

Understanding Clean Architecture

Benefits of Dio for Flutter App Networking

CRUD API Implementation with Dio

Add Required Dependencies

Implement the Project Structure

State your API endpoints

Set up DioClient

Create DioException Class for ErrorHandling

Create Model Class

Wrap MyApp with ProviderScope

Create User Repository

Create User Repository Implementation class

Create Provider class

Create UseCase class

Create Provider class

Create View Model

Create the User_List UI and add the provider

Conclusion

Maximizing Your Flutter App's Performance with (Async)NotifierProvider, Freezed & Riverpod Code Generators

Prerequisites

Mastering Riverpod in Flutter: The Ultimate Guide for Flutter Beginners

Nikki Eke ・ Feb 10 '23

Scope of this tutorial

Installation of Dependencies

Why use code generation tools?

Freezed Code Generator

Riverpod Code Generator

Notifier Provider

AsyncNotifierProvider

Recap

Conclusion

References

Mastering Riverpod in Flutter: The Ultimate Guide for Flutter Beginners

Prerequisites

What is Riverpod?

Advantages of Riverpod

Let’s talk about Providers

Importance of Providers in Riverpod

Provider Types in Riverpod

Install the Riverpod package

Create a Provider

Using Consumer

Using ConsumerStatefulWidget

Simple Counter App

Simple Product List

Wrap `MyApp` with `ProviderScope`