DEV Community: Md. Mobin

Native iOS App Updater in Flutter: How Zomato, Swiggy, and Others Do It

Md. Mobin — Sun, 29 Sep 2024 10:53:47 +0000

After a long break, we're back—because let's face it, as developers, the work never really stops. Today, we're talking about something we all deal with but don't always talk about: app updates. You know, those little notifications that users often ignore, but we desperately want them to notice.

You've been there—you build an awesome app, push new features, fix bugs... and then just hope users update. But what if they didn’t have to go to the App Store or Play Store to do it manually?

Some of the biggest apps, like Zomato and Swiggy, manage to keep things updated without users having to do anything. It’s not magic, though—it’s all about native app updaters, and if you’re using Flutter for iOS, it’s easier than you might think.

Let’s dive into how it works and how you can do it too.

Table of content

Introduction
App Updates on Android
Challenges with App Updates on iOS
Creating a Native App Updater for iOS
Demo

Introduction

Updating apps is a bit like flossing—something everyone knows should be done, but most users put off until it’s absolutely necessary. For developers, this can be frustrating. New features are rolled out, bugs are fixed, and the app runs smoother than ever, yet a large chunk of users are still on outdated versions.

In the world of Flutter development, Android makes automated updates a breeze. But iOS? That’s a different story. iOS tends to make things a bit more complicated, requiring extra effort to ensure users get the latest version of the app.

Fortunately, apps like Zomato, Swiggy and other apps have cracked the code, delivering seamless updates without users having to manually visit the App Store. And the good news? Native iOS app updaters in Flutter make it possible to do the same. Ready to see how? Let’s get started!

App Updates on Android

Before diving into the coding and technical aspects, let’s discuss how to update a Flutter app—or even force an update—without making users leave the app.

Fortunately, Google provides the In-App Updates toolkit. This handy tool opens a native interface for downloading app updates right within the app itself. It handles everything from force updates to optional updates, making the process seamless for users. Plus, it takes care of managing the state after an update, ensuring a smooth transition to the latest version without any hiccups.

How to Integrate In-App Updates into Flutter

To integrate in-app updates in Flutter, you can use the in_app_update package for handling Android updates.

Steps

Add the package to your pubspec.yaml:
```
in_app_update:<latest_version>
```

Or run the following command:
flutter pub add in_app_update

Check for updates:

Future<void> checkForUpdate() async {
  InAppUpdate.checkForUpdate().then((info) {
    setState(() {
      _updateInfo = info;
    });
  }).catchError((e) {
    // Handle error
  });
}

Download the Updated App:

Future<void> downloadUpdatedApp() {
  if (_updateInfo?.updateAvailability == UpdateAvailability.updateAvailable) {
    InAppUpdate.performImmediateUpdate()
        .catchError((e) {
          showSnack(e.toString());
          return AppUpdateResult.inAppUpdateFailed;
        });
  }
}

For more details, check out the example

Challenges with App Updates on iOS

As we know, iOS has strict policies and guidelines regarding user experience, making it challenging to implement force updates for apps. While Google provides the in_app_updates toolkit to handle updates seamlessly, iOS doesn’t offer a similar solution.

If you search online for ways to force an iOS application update, you’ll likely find methods that involve displaying a dialog box redirecting users to the App Store. While this approach can work, it’s not always effective. Once users leave the application, there’s a significant chance they won’t return to update and reopen the app.

How to Check for Updates

To determine whether an update is available, there are a couple of options:

Option 1: Using the iTunes Lookup API

The iTunes Lookup API can be a useful tool for retrieving the latest version from the App Store. However, it comes with several limitations:

Data Consistency: The information returned may not always be up-to-date, leading to discrepancies between the API and the App Store.
Limited Metadata: The API provides only essential app details, lacking comprehensive information such as detailed changelogs or version history.
Country-Specific Restrictions: Responses can vary by country, which may lead to inconsistencies in the app's availability or metadata.
Empty Responses: For some app IDs, the API may return empty data arrays ([]), indicating that no information could be found, which can be frustrating for users trying to retrieve app details.
Error Handling: The API can return ambiguous error messages, making it challenging to troubleshoot issues effectively.

Option 2: Best Solution

A more effective solution is to use server-side configuration, either via an API or remote configuration, to compare the app's local version with the latest version available. This approach provides greater control over the update process compared to relying on the iTunes API.

Other options, such as web scraping from the App Store URL, exist but are not efficient for this purpose.

Creating a Native App Updater for iOS

Using Platform Channels

For creating native app updates, Flutter uses platform channels. If you are not familiar with platform channels, think of them as a bridge between natively written code (in Swift, Java, Kotlin, or JavaScript) and the respective platforms (iOS, Android, Web, Windows).

For more information about platform channels.

StoreKit

To ensure a smooth in-app update experience for iOS, the StoreKit framework provided by Apple will be used. For a quick explanation, let's have a little chat with ChatGPT:

ChatGPT (Not Pro Version): Hello, I am ChatGPT. How can I help you?

Me: Explain StoreKit iOS.

ChatGPT (Not Pro Version): Giving your personal data to Sam Altman, thanks. Fetching...

ChatGPT (Not Pro Version): StoreKit is a framework provided by Apple that allows you to integrate in-app purchases (IAPs) and subscriptions into your iOS, macOS, watchOS, and tvOS applications. It provides the tools needed to manage products, handle transactions, and maintain user receipts.

Thinking this is enough to implement this, but if you want to explore more in detail, check out StoreKit.

Getting Started

Create a Flutter Project
Add the following dependencies for getting the app's local version. You can either add this to pubspec.yaml:

   dependencies:
     package_info_plus: <latestVersion>

Or run the following command:

   flutter pub add package_info_plus

Now open your app in Xcode:

   cd ios && open Runner.xcodeproj

Open the AppDelegate.swift file and add the following content to create a platform channel for using StoreKit.

In Flutter, check if an update is available:

If an update is available, call the platform-specific method:

That's it! Run your application.

Demo

For demonstration purposes, I am using the Bitwarden app ID because Apple won’t allow me to publish my to-do app on the** App Store**.

Source code

flutter_ios_in_app_updator

Follow me:

Unlocking the Future: Passwordless Authentication(Passkey) With Flutter and Node.js

Md. Mobin — Sun, 16 Jun 2024 14:45:31 +0000

Welcome Back, Fellow Coders!

Hey everyone! It’s been a hot minute since our last deep dive, but I’m thrilled to be back and diving headfirst into some seriously cool tech. Today, we’re tackling a topic that’s bound to make your life (and your users’ lives) a whole lot easier: passwordless authentication. Yes, you heard that right – we’re talking about a future where you’ll never have to remember another password again.

In this post, we’ll explore how to implement passwordless authentication in your Flutter app with the help of Node.js on the server side. It’s a powerful combo that promises to enhance security and improve user experience. So, grab your favorite coding beverage, get comfy, and let’s embark on this exciting journey together. Welcome back, and let’s get coding!

Introduction
Prerequisites
Setup Your Own WebAuthn Server
Integrate into Flutter
Outputs
Conclusion

Introduction

Passwordless Authentication: A New Era of Security

Passwordless authentication is an innovative approach to securing user accounts and sensitive data without relying on traditional passwords. Instead of requiring users to create and remember complex passwords, passwordless authentication leverages advanced technologies like biometrics, security tokens, and public key cryptography. This method not only enhances security but also improves user experience by simplifying the login process.

Benefits of Passwordless Authentication

Enhanced Security: Traditional passwords are prone to being weak, reused across multiple sites, and vulnerable to phishing attacks and data breaches. Passwordless methods, such as biometrics or hardware tokens, are significantly harder for attackers to compromise.
Improved User Experience: Users no longer need to remember complex passwords or go through cumbersome password recovery processes. This leads to a smoother and more pleasant authentication experience.

What is passkey ?

A passkey is a form of authentication credential used in passwordless authentication systems, typically based on the WebAuthn standard. It serves as a secure, user-friendly alternative to traditional passwords. Here are some key points about passkeys:

Digital Credential: A passkey is a digital credential stored securely on a user's device.
Public Key Cryptography: It utilizes public key cryptography to authenticate users. During registration, a key pair is generated: a private key stored securely on the user's device and a public key shared with the server.
Authentication Process: To authenticate, the user proves possession of the private key associated with their passkey. This can be done through biometric verification (e.g., fingerprint scan, facial recognition) or by unlocking the device.
Enhanced Security: Passkeys are more secure than traditional passwords because they are not susceptible to phishing attacks or credential stuffing. They also eliminate the risk of password reuse and theft.
User Convenience: Passkeys improve user experience by simplifying the authentication process. Users do not need to remember complex passwords or go through lengthy password reset procedures.

Prerequisites

Flutter : Basic knowledge
Node-js : Node js. is used server, you can use any backend language for framework.
MongoDB: we are using MongoDB for database,you can use whichever you find best.
Active Brain

Setup Your Own WebAuthn Server

Before starting setup webauthn server, lets talk about what is webAuthn and passkey.

Passkeys and WebAuthn complement each other rather than compete. WebAuthn serves as the framework that facilitates the functionality of passkeys.

Key difference

Passkeys act as digital credentials used for authentication, while WebAuthn is a set of rules enabling communication between browsers and websites for passkey-based authentication.

Once this communication setup is complete, WebAuthn instructs the browser on how to communicate with the relying party (the website where passkey authentication is used) for the authentication process.

Read more about pass key and WebAuthn here

How WebAuthn Works

WebAuthn operates through several essential phases to establish secure and passwordless authentication:

Registration Initiation: When a user initiates registration, the server generates an encoded challenge and sends it, along with other necessary data, to the client.
User Approval: During this phase, the user selects and registers a credential. This can be a passkey, biometric (like fingerprint or face-lock), USB key, Bluetooth device, or device security code. The user's approval is crucial to proceed.
Verification Process: Once the user approves the registration, the data returned by the approved credential is sent back to the server. This data includes the public key, the type of device used, and a unique device identifier.
Completion of Registration: After verification, the user's credentials are securely stored in the database. Key pieces of information such as the userId and publicCredentialId are recorded, enabling future authentication without the need for traditional passwords.

This process ensures a robust and user-friendly authentication method, leveraging modern security practices to safeguard user accounts effectively.

Understanding Relay Servers (rpId)

In the realm of WebAuthn (Web Authentication), the Relay Server, known as rpId, serves as a pivotal intermediary between the client device and the relying party (e.g., a website or service). Here’s a concise breakdown using two focal points:

Authentication Endpoint: The Relay Server functions as the designated endpoint for authentication requests originating from the client device. It facilitates a secure channel for communication between the client and the relying party.
Secure Challenge Management: Upon receiving an authentication request, the Relay Server generates and manages a cryptographic challenge. This challenge ensures the integrity of the authentication process, guarding against replay attacks and unauthorized access attempts.

Login using WebAuthn

Enough with theory, let's implement passkey.*

Setup Server with node JS

Add support for Digital Asset Links

To enable passkey support for your flutter Android app, associate your app with a website that your app owns. You can declare this association by completing the following steps:

Create a Digital Asset Links JSON file. For example, to declare that the website https://signin.example.com and an Android app with the package name com.example can share sign-in credentials, create a file named assetlinks.json with the following content:

[
  {
    "relation" : [
      "delegate_permission/common.handle_all_urls",
      "delegate_permission/common.get_login_creds"
    ],
    "target" : {
      "namespace" : "android_app",
      "package_name" : "com.example.android", //packageId
      "sha256_cert_fingerprints" : [
        SHA_HEX_VALUE
      ]
    }
  }
]

Host the Digital Assets Link JSON file at the following location on the sign-in domain:
```
https://domain[:optional_port]/.well-known/assetlinks.json
```
on Sending GET request following data should be return

> GET /.well-known/assetlinks.json HTTP/1.1
> User-Agent: curl/7.35.0
> Host: signin.example.com

< HTTP/1.1 200 OK
< Content-Type: application/json

You can validate digital assets link json from here.

server.js for hosting digital assetslink

import express from 'express';
const app = express();

app.use('/.well-known', express.static('public'));

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

Setup Node server

Installing following packages

npm install @simplewebauthn/server base64url dotenv express jsonwebtoken mongodb uuid

Connect to MongoDB in src/utils/db.ts
Util for managing user in src/utils/userManager.ts

We need to store every challenge string generated by the backend during registration or login. This stored data will allow us to verify whether a given challenge is valid or not. Additional data such as expiryTime can be included with each challenge, but for simplicity, we are only storing strings.

src/utils/challengerManagers.ts

When registration is completed, we receive the following in the response: credentialID, credentialPublicKey, rpID, origin, and other parameters. We need to store these values alongside the userId for the purpose of verifying sign-ins.

src/utils/passkey.ts

Create basic http server using node

import express, { Request, Response } from 'express';
import { connectToMongoDB } from './utils/db';

// Constants
const rpID = "<domain>.com"; // Replace with your actual rpID
const androidHashKey="<hashKey">; //android release signing app hashapp 

const origin = [
    rpID,
androidHashKey

];

// Initialize Express app
const app = express();
const port = process.env.PORT || 8080;
app.use(express.json());

// Connect to MongoDB
connectToMongoDB();

// GET endpoint for /
app.get('/', (req: Request, res: Response) => {
    res.send('Hello World!');
});

// Start server
const localIp = process.env.LOCAL_IP || 'localhost';
app.listen(port, () => {
    console.log(`Express is listening at http://${localIp}:${port}`);
});

export default app;

Generate Android hash key either

keytool -printcert -jarfile app.apk

------------------ OR ---------------------------------------

keytool -printcert -file CERT.RSA

Create middleware for verify jwt token:

src/api/middleware.ts

Now we will create following endpoints:

/register/start: Initiates the registration process.
/register/complete: Verifies passkey data, stores the user in the database, deletes the challenge once sign-in or user creation is completed, and sends requested data with a JWT token.
/login/start: Returns the payload needed to start the login flow on the client side.
/login/complete: Verifies data returned by the client with passkey data from MongoDB and returns requested data with a JWT token.
/me: An auth-protected route that requires a JWT token to return the user object.

app.ts :

We are done with server side integration.

Integrate into Flutter

Add Following packages into flutter app:
- Credential Manager : Credential Manager is a Jetpack API that supports multiple sign-in methods, such as username and password, passkeys, and federated sign-in solutions (such as Sign-in with Google) in a single API, thus simplifying the integration for developers.

flutter pub add credential_manager

Note: I am author of this package and it is currently support Android platform for flutter.

More about Compose Credential Manager:
https://developer.android.com/identity/sign-in/credential-manager
- HTTP: For implementing server APIs
flutter pub add http

Note: I am going talk about screens and UI component we will integrate direct.

Initialise Credential Manager:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (AuthService.credentialManager.isSupportedPlatform) { //check if platform is supported
    await AuthService.credentialManager.init(
      preferImmediatelyAvailableCredentials: true,
    );
  }
  runApp(const MyApp());
}

Create userModel in dart

Create Authentication Service for calling APIs:

Certainly! Here's the markdown file with the corrected content:

Registration

Get required payload for /register/start endpoint:

  final res = await AuthService.passKeyRegisterInit(username: username!);

Send the payload to Credential Manager to start the user approval flow for registration:

  final credResponse = await AuthService.credentialManager.savePasskeyCredentials(request: res);

After user approval, send the data to /register/complete API for verification and user creation:

  final user = await AuthService.passKeyRegisterFinish(
      username: username!,
      challenge: res.challenge,
      request: credResponse,
  );

Sign-In

Make a GET request to /login/start endpoint to retrieve challenge and other payload:

  final res = await AuthService.passKeyLoginInit();

Initiate the user approval flow for sign-in by sending the request data from /login/start to CredentialManager:

  final credResponse = await AuthService.credentialManager.getPasswordCredentials(
      passKeyOption: CredentialLoginOptions(
          challenge: res.challenge,
          rpId: res.rpId,
          userVerification: res.userVerification,
      ),
  );

Verify the user by sending the data returned from getPasswordCredentials method to /login/complete/ endpoint to retrieve the user object:

  final user = await AuthService.passKeyLoginFinish(

      challenge: res.challenge,

      request: credResponse.publicKeyCredential!,

  );

Outputs

Conclusion

In conclusion, exploring passkey authentication with WebAuthn integration for a seamless login experience in Flutter has been insightful. This technology offers a secure and user-friendly alternative to traditional password-based authentication methods. By leveraging cryptographic authentication mechanisms and user verification processes, passkey authentication enhances security while simplifying user interactions.

Throughout this article, we've delved into the foundational concepts of passkey authentication, including its integration with WebAuthn for server-side operations using Node.js. We've explored essential endpoints for user registration and login, demonstrating how to initiate and complete these processes securely.

Moreover, the content of this article has been refined using AI-powered tools to ensure clarity and grammatical accuracy. This approach underscores the importance of leveraging technology to enhance content quality and readability.

For those interested in implementing passkey authentication in their projects, the provided code snippets and explanations serve as a practical guide. Each step, from initiating registration to verifying credentials during login, has been detailed to facilitate smooth integration into Flutter applications.

More info about credential manager read following blog:

Bringing seamless authentication to your apps with passkeys using Credential Manager API

Source code :

Follow me on

By leveraging AI for grammar correction and clarity enhancement, this article aims to provide a polished and informative guide to passkey authentication in Flutter. All credits for the code snippets and technical insights go to the authors and contributors of the referenced resources.

WTF is Grpc? Part 3: Real time Chat ft. Flutter and Golang

Md. Mobin — Fri, 27 Oct 2023 18:30:00 +0000

Welcome back, dear readers, to the world of "Wtf is gRPC?" – where we turn tech into a comedy show! 🚀

In Part 3, we're diving into real-time chat with the grace of caffeine-fueled squirrels and the humor of rubber chickens at a stand-up gig!

Get ready to leave slow chats in the dust and make your app as snappy as a squirrel on roller skates. Grab your code editor, sense of humor, and let's chat it up in style. Part 3 is gonna be chat-tastic! 🍰💬😄

Table of Contents: Part 3 - Real-Time Chat Extravaganza 🎉

Introduction to gRPC Bi-directional: The Magic of Two-Way Chats
Setup Your Server: Where the Real-Time Chat Spells Begin
Start with Flutter Application: Embark on Your Chatting Adventure
Outputs: The Hilarious Messages of Success

Introduction to gRPC Bi-directional: The Magic of Two-Way Chats

As we've journeyed through gRPC, we first delved into unary communication, which is essentially one-way communication from the client to the server. Then, we ventured into the world of server-side streaming.

Now, let's dive into gRPC Bi-directional communication. This is where things get really interesting! In Bi-directional streaming RPC, both the client and server engage in a lively conversation by sending a continuous stream of messages back and forth.

Here's how it works:

The client initiates the action by setting up an HTTP stream with some initial header frames.
Once this connection is established, both the client and the server can send messages simultaneously, without waiting for the other party to finish. It's like a dynamic chat where no one has to take turns.

Think of gRPC as the superhero chat line. It's like Tony's suit and Bruce's lab assistant, J.A.R.V.I.S., having a direct line to each other.

Socket vs. gRPC Bi-directional: A Cinematic Showdown" 🍿🎥

Aspect	Socket	gRPC Bi-directional	Top-Rated Movie Comparison
Setup Complexity	Generally low, traditional sockets require less setup	Requires setting up gRPC services and protocols, which can be more complex	Like the simplicity of "The Shawshank Redemption"
Communication Type	Low-level and can be used for any data format	High-level, designed for structured data transmission	Similar to the plot intricacies of "The Godfather"
Performance	Can be efficient for simple data exchange	Optimized for high-performance, especially in microservices	Like the action-packed "Mad Max: Fury Road"
Bi-directional	Possible with added complexity and custom handling	Inherently supports efficient bi-directional communication	Much like "Pulp Fiction's" non-linear storytelling
Error Handling	Requires custom error handling	Provides built-in status codes and error handling	Comparable to the suspense in "The Silence of the Lambs"
Cross-Language	Supports multiple programming languages	Multi-language support with protocol buffers	Like the multilingual charm of "Inglourious Basterds"
Integration Ease	Requires more manual integration	Easier integration into gRPC-compatible systems	Much like the seamless blend in "The Dark Knight"

Setup Your Server: Where the Real-Time Chat Spells Begin

Let's continue code from part 2,where we left.



git clone git@github.com:Djsmk123/Wtf-is-grpc.git

Switch to part-2 branch(for starter code) ```

git switch part2

- As we are going to create Chat one to one service for that we required to get all the users and then communicate.

- Create profobuf for getting users(`rpc_users.proto`)


  



Add GetUsers rpc service in GRPCServerService

// add this line to import
import "rpc_users.proto";

service GrpcServerService {
// add this line too
rpc GetUsers(UsersListRequest) returns (ListUserMessage) {};
}


- Generate equivalent code for server(`Golang`)

protoc --proto_path=proto --go_out=pb --go_opt=paths=source_relative \
--go-grpc_out=pb --go-grpc_opt=paths=source_relative \
proto/*.proto


- Add function in `auth` package `get_users.go`



  



Let's call this function in grpc-server interface(package gapi) and add this function in auth.go.



  



We are done with this. But we required users so that we can send message so don't, I am providing list of users (around 35), just load them into mongodb.


users-data.json

> Note: Password for each user is 12345678.

  
  
  Setting Up Your Chat Service:


Establishing a chat service is a straightforward procedure.



RPC Service Creation : Creating an RPC (Remote Procedure Call) service is at the core of this setup.

Bidirectional Message Stream: Implement a bidirectional stream of messages.Messages are initiated by the client and sent to the server.

Bidirectional Response Stream: Create a bidirectional stream for responses.Responses are generated by the server and sent back to the client.

Acknowledgment Mechanism: Before actual communication begins, an acknowledgment mechanism is necessary to connect both the client and the server.This mechanism helps ensure a successful connection.

Database Handling: Notably, the acknowledgment message is designed to be transient and is not stored in the database.
Confirmation of Connection: The acknowledgment message serves as a confirmation of a successful connection.
Setting up protos: Setup proto for Sending message and get messages



  



Add these rpc function into service

service GrpcServerService {
//add these lines
rpc SendMessage(stream SendMessageRequest) returns (stream Message){};
rpc GetAllMessage(GetAllMessagesRequest) returns (GetAllMessagesResponse){};
}

- Generate equivalent code

protoc --proto_path=proto --go_out=pb --go_opt=paths=source_relative \
--go-grpc_out=pb --go-grpc_opt=paths=source_relative \
proto/*.proto


- We need JWT-based authentication for both receiving and sending messages. While there are two types of interceptors available, namely `unary interceptors` and `stream interceptors`, we currently utilize the `unary interceptor` as our middleware and lets add middleware for stream service too.

![user-auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uze08vugtzoi7h5mkqw2.jpg)

- update `middleware.go` in `gapi` package.


  



Register middleware in main.go

//update this line
grpcServer := grpc.NewServer(
grpc.UnaryInterceptor(server.UnaryAuthInterceptor),
grpc.StreamInterceptor(server.StreamAuthInterceptor),
)


- Now create `Message` Object for `mongodb` collection


  



Update MongoCollection

type MongoCollections struct {
Users *mongo.Collection
Chats *mongo.Collection
}


- Before going to into complex part to listen message and store them into db, lets deal with simple rpc function `GetAllMessage` from db and `SendMessage` to store the message.


  



Now we are going to use go-routine to listen and send message to the client


> We are using goroutines and channels to listen for changes in the database. If you want to learn more about goroutines, you can read this blog


Let's Define SendMessage and GetAllMesasge for grpc server interface.



  


> Note: To make connection b/w two users, its required to send first message Join_room so that other user can get acknowledgment.

  
  
  Testing gRPC in CLI




  
  
  Start with Flutter Application: Embark on Your Chatting Adventure



Add following dependency into your project:

flutter pub add intl



- Generate equivalent code for dart from `protos`.

protoc --proto_path=proto --dart_out=grpc:lib/pb proto/*.proto


- As it is known issue dart does not generate code `google/protobuf/timestamp.pb.dart`,[read here](https://github.com/google/protobuf.dart/issues/483). So download this file [google_timestamp.pb.dart](https://gist.github.com/Djsmk123/83025e60cbf2c5a931ffefdf2b3a5b7e) and update the generated code as required(just change import path)

- Before starting chat service we need to display all the users into home screen so that we can send message to other users

> PS: I am not going to talk about basic UI building for showing the list of users.

- Add function to get all users in `AuthService` class

class AuthServices{
//keep same, add this function
static Future> getUsers(
{int pageNumber = 1, String? search}) async {
final res = await GrpcService.client.getUsers(
UsersListRequest(pageSize: 10, pageNumber: pageNumber, name: search),
options: CallOptions(metadata: {'authorization': 'bearer $authToken'}));
return res.users.map((e) => UserModel(e.id, e.username, e.name)).toList();
}
}

- Call this function in `HomeScreen()`,for reference use [this ui](https://gist.github.com/Djsmk123/3c39818c3a00c0b01ad8eadb36486102) or create your own.

- Let's Create chat service to get messages(History)

class ChatService {
static Future> getMessages(String username) async {
final res = await GrpcService.client.getAllMessage(
GetAllMessagesRequest(
reciever: username,
),
options: CallOptions(
metadata: {'authorization': 'bearer ${AuthService.authToken}'}));
return res.messages;
}
}


- Let's listen for messages,send message and fetch history.


  


> Note: UI component maybe missing or you create your own. for reference check source code


Let's talk about what we did in above class.


In initState() we are starting to listen message by sending first message Join_room to make connection and another function fetchChatsHistory() as name suggested, getting earlier messages by calling grpc unary service.
on sending message we are adding message data to stream-controller to send stream of message to the server.




  
  
  Outputs: The Hilarious Messages of Success



  width="710"

  height="399"

  src="https://www.youtube.com/embed/93dg_-RDV_k"

  allowfullscreen

  loading="lazy">



  
  
  End of the series


Thank you to everyone who has supported me throughout this series. I promise to be more consistent next time. The blog series titled 'Wtf is gRPC?' comes to an end with this post. In Part 1, we delved into authentication and authorization using unary gRPC communication. In Part 2, we had some fun creating a custom notification service in Flutter, along with server-side streaming gRPC. And now, in the grand finale, Part 3, we explored bi-directional gRPC to create a simple real-time chat application. Thanks again, and remember, gRPC isn't as mysterious as it sounds – it's just a protocol! Stay tuned for more tech adventures!

  
  
  Thank for 2k+ Followers on dev.to






  
  
  Source code :


Github Repo

  
  
  Follow me on



Twitter
Instagram
Github
linkedin
dev.to
Medium

Wtf is Grpc? Part 2: Custom Notification(without Firebase) in Flutter and Golang.

Md. Mobin — Sat, 30 Sep 2023 08:22:57 +0000

Welcome back, intrepid tech explorers! If you survived the roller-coaster of gRPC, Flutter, and Golang from our last adventure, congratulations! You're now ready for Part 2: "Wtf is gRPC? Part 2: Custom Notification (without Firebase) in Flutter and Golang." 🎉

In this next thrilling installment, we'll tackle custom notifications without the Firebase safety net. Get ready to dive into the world of Flutter and Golang, where we'll craft notifications that are as unique as your favorite coding quirks. So, fasten your seatbelts and keep your code close; it's going to be a wild ride through the land of tech enchantment! 🚀💻✨

Table of Contents: Navigating the Streaming Circus 🎪

The Streaming Showdown: gRPC Unleashed
Let's Play with Data: The Streaming Playground
Setting Up the Golang Server: Where Code Meets Magic
Fluttering into Action: Your Magical Streaming App

The Streaming Showdown: gRPC Unleashed

In simple words A server-streaming RPC is similar to a unary RPC, except that the server returns a stream of messages in response to a client’s request. After sending all its messages, the server’s status details (status code and optional status message) and optional trailing metadata are sent to the client. This completes processing on the server side. The client completes once it has all the server’s messages.

Unary vs. Server Streaming: The Tech Battle of the Century

In this epic tech showdown, I am going to compare Unary Streaming and Server Streaming, with a touch of TV series for better understanding.

Aspect	Unary Streaming	Server Streaming	TV Series Comparison
Data Transfer	Single requests	Continuous data stream	The Office (Episode-by-episode)
Communication Overhead	Less	Slightly more	Friends (Constant chatter)
Real-time Updates	Not suitable	Ideal for real-time	Stranger Things (Always suspenseful)
Complexity	Simpler	More complex	Black Mirror (Mind-bending)
Scalability	Limited by requests	Highly scalable	Game of Thrones (Vast world)
Use Cases	Simple operations	Real-time data streaming	Breaking Bad (Intense)
Resource Consumption	Lower	Higher	The Mandalorian (High production)
Parallel Processing	Limited	Effective	The Big Bang Theory (Many characters)
Error Handling	Simple	Handling errors in streams	The Twilight Zone (Mysterious)
Performance	Suitable for small-scale	Suitable for large-scale	The Walking Dead (Epic)
Winner	Suitable for specific tasks	Ideal for real-time data	Server Streaming Showdown!

Let's Play with Data: The Streaming Playground

Let's play with streaming! Imagine that the client is a stand-up comedian whose job is to tell jokes, and the server, representing the audience, responds with laughter until they've had enough."

Let's create required message and service.

joke.proto



syntax = "proto3";

package pb;
option go_package="github.com/djsmk123/server/pb";
//Response send by standup comedian to audience 
message Joke{
    string joke=1;
}
// Response Recieved by standup comedian from audience
message JokeResponse{
    string laugh_intensity=1;
};

rpc_services.proto:



syntax="proto3";
package pb;
option go_package="github.com/djsmk123/server/pb";
import "joke.proto";
service GrpcServerService {
    rpc ThrowAJoke(Joke) returns(stream JokeResponse){};
}

Implement ThrowAJoke() function in golang.



func (s *Server) ThrowAJoke(joke *pb.Joke, stream pb.GrpcServerService_ThrowAJokeServer) error {
    for i := 1; i <= 10; i++ {
        response := &pb.JokeResponse{
            LaughIntensity: fmt.Sprintf("LOL %d", i),
        }
        if err := stream.Send(response); err != nil {
            return err
        }
        time.Sleep(1 * time.Second)
    }
    return nil
}

Let's call service now.

Setting Up the Golang Server: Where Code Meets Magic

We are going to create a notification service that will listen to a notification-gRPC streaming service in the background. If any new user is added to the MongoDB collection named users, we will send data to the listener, which will then display notifications in the application.

Let's continue code from part 1,where we left.

git clone git@github.com:Djsmk123/Wtf-is-grpc.git

Create a new message for the notification response that has to be returned by the server.

rpc_notification.proto



syntax="proto3";
package pb;

option go_package="github.com/djsmk123/server/pb";


message NotificationMessage{
    int32 id=1;
    string title=2;
    string description=3;
}

Create new rpc in rpc_services.proto. ```

//keep everything same
//import NotificationMessage
import "rpc_notifications.proto";
//same
service GrpcServerService {
//keep same
// create new rpc function here
rpc GetNotifications(EmptyRequest) returns (stream NotificationMessage){}
}

- Create equivalent code for golang from proto.

protoc --proto_path=proto --go_out=pb --go_opt=paths=source_relative \
--go-grpc_out=pb --go-grpc_opt=paths=source_relative \
proto/*.proto


- Create new package called `services` in root folder(`server`).

> We are using **goroutines** and **channels** to listen for changes in the database. If you want to learn more about goroutines, you can read this [blog](https://betterprogramming.pub/golang-how-to-implement-concurrency-with-goroutines-channels-2b78b8077984)

- Create new services `notification.go`.

  




Now just have to define rpc GetNotification in gapi. so create a new file notification.go in package gapi.





Wait, we can't listen change stream in mongodb without converting standalone to replica set more info here.
In terminal open path (windows)


cd C:\Program Files\MongoDB\Server\&lt;mongo-version&gt;\bin


Execute this command

mongod --port 27017 --dbpath="C:\Program Files\MongoDB\Server<mongo-version>\data" --replSet rs0 --bind_ip localhost

- Re-run mongo service

`rs.initiate()`

- Run server and let's test in `evans-cli`.






## Fluttering into Action: Your Magical Streaming App

- Add following dependencies to flutter project

dependencies:
flutter_background_service: ^5.0.1
flutter_local_notifications: ^15.1.1
flutter_background_service_android: ^6.0.1


- Create equivalent code for dart

protoc --proto_path=proto --dart_out=grpc:lib/pb proto/*.proto

- Create new services,called `notification.dart`


  



Call notification service function in splash_screen.dart

Future initAsync() async {
try {
await NotificationServices.initializeService();
//keep same
} catch (e) {
log(e.toString());
navigateToLogin();
}
}


- Let's build application and listen for new user.

![flutter notification without firebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osm2tlvnlp35mxhj2f1v.jpg)

Thank you for joining us on this journey so far! We've covered a lot in this series, from setting up the server-side of our application in Golang, handling notifications, to building a foundation for communication.

In the next and final part of this series, we'll explore one of the most exciting features of gRPC: bi-directional streaming. We'll be implementing a real-time chat service using Flutter and Golang. Get ready for a dynamic and interactive experience that showcases the power and flexibility of gRPC.

So, stay tuned and keep coding! We can't wait to see you in the last part of this series where we'll bring it all together and create a fully functional chat application.

If you have any questions or feedback, please feel free to reach out. Happy coding, and see you in the next installment!



## Source code : 
[Github Repo](https://github.com/Djsmk123/wtf-is-grpc/tree/part2)

## Follow me on 

- [Twitter](https://twitter.com/smk_winner)

- [Instagram](https://www.instagram.com/smkwinner/)

- [Github](https://www.github.com/djsmk123)

- [linkedin](https://www.linkedin.com/in/md-mobin-bb928820b/)

- [dev.to](https://dev.to/djsmk123)

- [Medium](https://medium.com/@djsmk123)

Wtf is Grpc? Part 1: Authentication and Authorization in Flutter and Golang.

Md. Mobin — Mon, 04 Sep 2023 13:53:10 +0000

Greetings, fellow tech enthusiasts, and welcome to a tech journey like no other! 🚀 Today, we're embarking on a roller-coaster ride through the fascinating world of gRPC, Flutter, and Golang, but with a twist – we've spiced it up with a generous serving of humor. Buckle up; it's going to be a wild ride!

In our three-part series, we'll explore the ins and outs of gRPC, the delightful dance between Flutter and Golang, and discover how these technologies can come together to create harmonious applications that can bring a smile to even the most stoic developer's face.

Introduction
- gRPC: A Not-So-Boring Bookish and Slightly Amusing Definition
- gRPC vs REST: The Iron Throne of APIs
- Types of gRPC
Prerequisites
- Create project
- Setup Database model
- Password Hashing
- Environment
- JWT
Basic of Protocol Buffer
- Service
- Message
Setup Basic Project in Golang
Create Protocol Buffers
Generate Golang code
Authentication in Go
Setup Server and Middleware
Start Server
Flutter Project
- Setup Project
- Output
Conclusion
- Source Code
- Follow Me

A Quick Peek

Part 1: Authentication & Authorization
Part 2: Custom Flutter Notifications
Part 3: Chat Applications with gRPC

gRPC: A Not-So-Boring Bookish and Slightly Amusing Definition

Alright, time to don our academic spectacles and approach this with a hint of whimsy. Imagine you're at a fancy library soirée, and someone asks, "What, pray tell, is gRPC?" You respond with a grin:

"Gentlefolk, gRPC, which stands for 'Google Remote Procedure Call,' is like the telegraph system of the digital realm. It's a meticulously structured, high-tech method for different programs to chit-chat with each other, just like sending telegrams back in the day, but without the Morse code."

"But wait, there's more! Instead of tapping out dots and dashes, gRPC uses Protocol Buffers, which is like encoding your messages in secret spy code, only it's not so secret. This makes your data compact and zippy, perfect for today's speedy world."

"Picture it as a virtual switchboard operator connecting your apps with finesse. Plus, it plays nice with HTTP/2, which is like giving your data a sleek, sports car to zoom around in, making it super fast."

"So, in essence, gRPC is the gentleman's agreement between software, ensuring they can communicate efficiently and reliably, like two well-mannered tea-drinking robots having a chat. It's the technological equivalent of a courteous bow, allowing different systems to exchange information harmoniously."

gRPC vs REST: The Iron Throne of APIs

Aspect	gRPC	REST
Protocol	Uses HTTP/2 for communication.	Typically uses HTTP/1.1, but can use HTTP/2.
Data Serialization	Uses Protocol Buffers (ProtoBuf) for efficient binary serialization.	Uses human-readable formats like JSON or XML.
Communication Patterns	Supports unary, server streaming, client streaming, and bidirectional streaming.	Primarily supports request-response (HTTP GET, POST, etc.).
Payload Size	Smaller payload due to binary serialization, making it more efficient.	Larger payload due to text-based serialization.
Performance	High performance and low latency, suitable for microservices.	Slightly slower due to text-based serialization.
Language Agnostic	Supports multiple programming languages, making it polyglot.	Can be used with any language, but not as standardized.
Code Generation	Generates client and server code automatically from Protobuf definitions.	No automatic code generation for client or server.
Error Handling	Uses status codes and detailed error messages for robust error handling.	Typically relies on HTTP status codes and custom error messages.
Tooling	Well-documented and supported by various libraries and tools.	Widely supported with many tools and libraries available.

Types of gRPC

Here are the primary types of gRPC communication:

Unary RPC (Request-Response): This is the simplest form of gRPC communication. The client sends a single request to the server and waits for a single response. It's similar to traditional request-response interactions.
Server Streaming RPC: In this pattern, the client sends a single request, but the server responds with a stream of messages. It's useful when the server needs to push multiple pieces of data to the client, such as real-time updates.
Client Streaming RPC: Here, the client sends a stream of messages to the server, and the server responds with a single message. This can be beneficial for scenarios like uploading large files.
Bidirectional Streaming RPC: In this type, both the client and server can send a stream of messages to each other concurrently. It's ideal for interactive and real-time applications like chat or gaming.

In this we are going to explore unary gRPC using login,signup and get-user request.

Prerequisites

Basic understanding of Golang,Flutter and MongoDb.
Excitement to learn something new.

Setup Basic Project in Golang

Create new project ```

go mod init

- Install Mongo package for go

go get go.mongodb.org/mongo-driver

- Setup Database Model
    - Create package `db` 
      - Create Struct to access database
        
  


  - Create new model `user.go`




  




Password hashing : we are going to create function for hashing password and check password, Never store password in simple text.


Create package utils in root.
Install required package go get golang.org/x/crypto/bcrypt.
Create HashPasword and CheckPassword function in password.go






  




Setup Environment: We required few environment variable like server_address,mongodburl and jwt_key etc.



Install Viper package for loading app.env.


go get github.com/spf13/viper

for more information read about viper

Create function in utils to load app.env file.

Create app.env in root folder.



DB_NAME=grpc 
DB_SOURCE=mongodb://localhost:27017
RPC_SERVER_ADDRESS=0.0.0.0:9090
GIN_MODE=debug
TOKEN_SYMMETRIC_KEY=12345678123456781234567812345678
ACCESS_TOKEN_DURATION=600m

Setup Jwt: We need authorization in few requests so its going to bearer token based authentication.
- Install required Jwt package



     go get github.com/dgrijalva/jwt-go

Note: Not Going to cover Jwt Basics.

Create new package token and create interface to create token and verify token.

Basic of Protocol Buffer (`.proto`).

Service: A unary service in gRPC involves a single request from the client to the server, which then sends a single response back to the client. To define a unary service, you need to create a .proto file that describes the service and the message types it uses.
Message: A message is a data structure that represents the information being sent between the client and server. It's defined in your .proto file using the message keyword. Here's a simple example:

syntax = "proto3";

message MyRequest {
string name = 1;
int32 age = 2;
}

message MyResponse {
string greeting = 1;
}

In this example, we have two messages, `MyRequest`and `MyResponse`. `MyRequest` has two fields, name and age, while `MyResponse` has a single field, greeting.

- Importing Data Structures from Another Package:

import "other_package.proto";

message MyRequest {
other_package.SomeMessage some_data = 1;
}


## Create Protocol buffers for our project:

- Services: We will have following services called `login`, `signup` and `get-user`. 

- Create `user.proto`, User object to return to the client.

syntax = "proto3";

package pb;
option go_package="github.com/djsmk123/server/pb";

message User{
int32 id=1;
string username=2;
string name=3;
}


- Create `rpc_login.proto`, it will have LoginRequestMessage and LoginReponseMessage

syntax="proto3";
package pb;
import "user.proto";
option go_package="github.com/djsmk123/server/pb";

message LoginRequestMessage{
string username=1;
string password=2;
}

message LoginResponseMessage{
User user=1;
string access_token=2;
}


- Same for `rpc_signup.proto`:

syntax="proto3";
package pb;
import "user.proto";
option go_package="github.com/djsmk123/server/pb";

message SignupRequestMessage{
string username=1;
string password=2;
string name=3;
}

message SignupResponseMessage{
User user=1;

}

- To create message `rpc_get_user.proto`:

syntax="proto3";
package pb;
import "user.proto";
option go_package="github.com/djsmk123/server/pb";

message GetUserResponse{
User user=1;
}


- Create service `rpc_services.proto`

syntax="proto3";
package pb;
option go_package="github.com/djsmk123/server/pb";
import "empty_request.proto";
import "rpc_get_user.proto";
import "rpc_login.proto";
import "rpc_signup.proto";

service GrpcServerService {
rpc SignUp(SignupRequestMessage) returns (SignupResponseMessage){};

rpc login(LoginRequestMessage) returns (LoginResponseMessage){};
rpc GetUser(EmptyRequest) returns (GetUserResponse) {};

}
message EmptyRequest{

}


## Generate code for Golang

- Create `pb` package in root folder.
- Run command to generate equivalent code for golang

protoc --proto_path=proto --go_out=pb --go_opt=paths=source_relative \
--go-grpc_out=pb --go-grpc_opt=paths=source_relative \
proto/*.proto


![image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrjl4bhl3vh8woq1pzsv.png)

## Create Basic Auth function
- Create `Auth` Package: This package has basic function like `get-user`,`login`, `signup`,`tokenCreation` and function to convert MongoDB userModel to gRPC `user` Messsage.

- Create `converter.go` in `auth` package.

  




Create token_generate.go to generate token.






Create login.go





Create signup.go



  



Create get-user.go






  
  
  Setup Server and Middlware



Create server.go in gapi package struct to register GrpcServiceServer.



  



For creating middlware for Authentication, we will need Unary Interceptors but before that we will check,if request service required authentication or not, we will list all method that are not required token.
> Note by default all the method have restriction for auth token.


Create services.go


  



Create middlware.go




  


  
  
  Connect whole and start server


finally we are going to main function in main.go,lets load environment, connect database(MongoDb) and RunServer.


  


  
  
  Run Server

go run .


## Test server

You can test gRPC services using [`evans-cli`](https://github.com/ktr0731/evans).
- Start CLI Tool

evans --host localhost --port 9090 -r repl


- Call `login` service

call login




![output1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkdhip9jx584ne8z3h8p.png)

!!!Oops,we forgot to define `login`,`get-user` and `signup` from `pb` interface.


- Create `auth.go` in `gapi` package.


  


  
  
  Try again






  
  
  Flutter Project



This Flutter application features four key pages: SplashScreen, LoginScreen, SignUpScreen, and HomeScreen.
SplashScreen: This initial page verifies the user's authentication status. If authenticated, it communicates with the gRPC server using the get-user service and redirects the user to the HomeScreen. Otherwise, it navigates to the LoginScreen.
LoginScreen: The LoginScreen presents fields for entering a username and password. Upon pressing the submit button, the application invokes the login service to authenticate the user. The access_token is saved to local storage, and the user is redirected to the HomeScreen.
SignUpScreen: The SignUpScreen offers fields for name, username, password, and confirmpassword. When the user submits the form, the application calls the signup service on the gRPC server.


> Note: Not going to create whole UI and remaining Login,but only will cover required parts. You are free to create your own ui or can refer from whole in github repo.

  
  
  Setup Project



Add following dependencies into pubspec.yaml

shared_preferences: ^2.2.1
protobuf: ^3.1.0
grpc: ^3.2.3

- Install `protoc_plugin` for dart.

dart pub global activate protoc_plugin


- Copy `.proto` files from server to root folder of the flutter project.

- Created equivalent code in dart

protoc --proto_path=proto --dart_out=grpc:lib/pb proto/*.proto

- Create channel for gRPC services `services/grpc_services.dart`

  



Create AuthServices for different method like login,signup and get-user




  



We are done just call function in presentation layer and add your own logic.


  
  
  OUTPUT














Thanks for joining me on this tech adventure! We hope you've enjoyed the journey through gRPC, Flutter, and Golang as much as I have. But wait, the fun doesn't stop here!

Stay tuned for my upcoming blogs, where I'll sprinkle more humor, insights, and tech wizardry into your day. Who knows, in my next episode, we might just unveil the secret to debugging code with a magic wand (disclaimer: we can't actually do that, but a coder can dream, right?).

Until then, keep coding, keep laughing, and keep those fingers ready on the refresh button because the next tech tale is just around the corner! 🚀✨"

  
  
  Source code


Github Repo

  
  
  Follow me on



Twitter
Instagram
Github
linkedin
dev.to
Medium

Hydrated Bloc: Persist your App State.

Md. Mobin — Mon, 07 Aug 2023 06:52:33 +0000

Quench your app's thirst with the magic of Flutter and the power of "Hydrated Bloc" - the ultimate elixir to keep your application state hydrated and happy! 🧊💧

"Hydrated Bloc" simplifies state persistence in Flutter, making it effortless to store and restore your app's state. Say goodbye to manual state serialization and deserialization – this nifty extension takes care of it all! With Hydrated Bloc, you can focus on crafting your app's features and delighting your users without worrying about state management complexities.

What is Hydrated Bloc and How Does it Work?

Hydrated Bloc is a powerful extension built on top of the bloc package in Flutter. It automates the process of state persistence and restoration, making it easy to maintain your app's state across different sessions. When you create a BlocProvider, Hydrated Bloc automatically leverages the fromJson method to retrieve the stored state from the local storage.

Whenever the bloc's state changes, the toJson method comes into play. It converts the current state into a Map<String, dynamic> format, which is then stored in the local storage. This ensures that your app's state is always up-to-date and ready to be restored when needed, even if the app is closed or the user navigates between screens.

Hydrated Bloc streamlines the process of state persistence, preventing the hassle of handling manual serialization and deserialization. By automating state management, it enhances your app's reliability and eliminates the risk of state loss.

Benefits of Hydrated Bloc Over Traditional Bloc

	Hydrated Bloc	Bloc
State Persistence	Automates state persistence and restoration.	Manual state serialization and deserialization.
Package Dependency	Built as an extension to package:bloc.	Directly uses package:bloc.
Complexity	Simplifies state management with automatic persistence.	Requires additional handling for state persistence.
Initialization	HydratedBloc initializes from stored state if available.	Bloc starts with initial state on each launch.
Storage	Utilizes local storage(`hive`[No SQL]) to persist the states.	No built-in state storage, left to developers.
App Reliability	Enhances app reliability by preventing state loss.	Prone to state loss if not handled properly.

Getting Started with Hydrated Bloc

Using Hydrated Bloc is a breeze! You have two options to get started:

By Extending: You can use Hydrated Bloc by extending the existing bloc class.

sealed class CounterEvent {}
final class CounterIncrementPressed extends CounterEvent {}

class CounterBloc extends HydratedBloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<CounterIncrementPressed>((event, emit) => emit(state + 1));
  }

  @override
  int fromJson(Map<String, dynamic> json) => json['value'] as int;

  @override
  Map<String, int> toJson(int state) => { 'value': state };
}

Using HydratedMixin:

class CounterBloc extends Bloc<CounterEvent, int> with HydratedMixin {
  CounterBloc() : super(0) {
    on<CounterIncrementPressed>((event, emit) => emit(state + 1));
  }

  @override
  int fromJson(Map<String, dynamic> json) => json['value'] as int;

  @override
  Map<String, int> toJson(int state) => { 'value': state };
}

To access and manipulate the storage object in Hydrated Bloc, follow these steps:

Create a custom storage class by extending the Storage class.

class MyHydratedStorage implements Storage {
  @override
  dynamic read(String key) {
    // TODO: implement read
  }

  @override
  Future<void> write(String key, dynamic value) async {
    // TODO: implement write
  }

  @override
  Future<void> delete(String key) async {
    // TODO: implement delete
  }

  @override
  Future<void> clear() async {
    // TODO: implement clear
  }
}

Set the custom storage implementation:

HydratedBloc.storage = MyHydratedStorage();

Inside the custom storage class, you can implement methods to read, write, delete, and clear data. These methods allow you to interact with the local storage and manage data for the Hydrated Bloc.

Let's Create a Simple To-Do Application

Create a Flutter project and add the required dependencies to your pubspec.yaml file.

dependencies:
  hydrated_bloc: ^9.1.2  //hydrated bloc
  path_provider: ^2.0.15  // for getTemporaryDirectory
  flutter_easyloading: ^3.0.5 // Helpful for showing loading without context
  flutter_bloc: ^8.1.3 //flutter bloc

for more information hydrated_bloc

Define the To-Do model for JSON serialization.

Create the Todo repository to manage tasks.

Define the possible states and events for the Todo Bloc.

Implement the Todo Bloc with Hydrated Bloc.

Initialize the Hydrated Bloc storage in main.dart.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  HydratedBloc.storage = await HydratedStorage.build(
    storageDirectory: kIsWeb
        ? HydratedStorage.webStorageDirectory
        : await getTemporaryDirectory(),
  );
  runApp(const MyApp());
}

Now we are remaining with UI and widgets for that you can create own or refer to github-repo.

Various function to manipulate Todo List

Adding New Todo:


 if (formKey.currentState!.validate()) {
BlocProvider.of<TodoBloc>(context).add(TodoAdd(TodoModel.fromJson({
                        'id': DateTime.now().millisecondsSinceEpoch+
                            Random().nextInt(9999999),
                        'title': titleText.text,
                        'description': description.text,
                        'is_completed': false,
                        'created_at': DateTime.now().toUtc().toIso8601String(),
                        'updated_at': DateTime.now().toUtc().toIso8601String()
                      })));
     Navigator.pop(context);
                    }

Update ToDo:

BlocProvider.of<TodoBloc>(context).add(TodoUpdate(task.id, value!));

Remove ToDo:

BlocProvider.of<TodoBloc>(context).add(TodoRemove(task.id));

OUTPUT

Certainly! My gratitude goes out to the amazing authors and contributors of the hydrated_bloc package, including Felix Angelovand others, for their brilliant work in developing this powerful tool for state management in Flutter.

Source code :

Github Repo

Follow me on

Connecting the Dots: Exploring Flutter Deep-linking for Seamless User Experiences without Firebase.

Md. Mobin — Sun, 25 Jun 2023 16:14:58 +0000

Welcome, fellow Flutter enthusiasts, to a whimsical world where widgets dance, hot reloads rule, and bugs tremble in fear of the mighty Flutter framework! Prepare yourself for a journey through the land of code and laughter as we unravel the hilarious side of Flutter development. So put on your debugging cape, grab a cup of virtual coffee, and get ready to flutter your way through this delightful adventure!.

We are about to embark on a journey to learn and implement Deep-linking in Flutter. But before we set sail, let's take a moment to review the basics.

What is Deep-linking?

Let's face it: humans are inherently lazy creatures. We want everything instantly, at the snap of our fingers, or rather, the tap of our screens. When we stumble upon an intriguing post or a captivating cat video on social media, the last thing we want is to be redirected to some random website in a browser. Deep linking swoops in to save the day, allowing us to seamlessly transition from our social media feeds to the juicy content we crave, all within the confines of our favorite apps.

Difference between App-link and Deep links?

Note we will started with App Links and deep-links will be integrated in next part using firebase dynamic link.

Getting Started with App links

So basically we are going to use blog website with react js,hosted on vercel which will have following routes:

'/': Home routes,basic dummy data.
'/blogs': will list all the blogs from dev.to/api/articles?username=name
and on click will navigate to route '/blog/:id'.
'/blog/:id': will show html content from the following API https://dev.to/api/articles/id.

This is completely web framework independent you can you use any web technology for website.

Setup Website:

You can create website own your own or just copy following content for example.

As mentioned above, App Links require digital assets links hosted on your website.

for more information

Create /.well-known/assetlinks.json file and it should be accessible with following url your-domain.com/.well-known/assetlinks.json. (for ReactJS add this file in public folder)

[
    {
        "relation": [
            "delegate_permission/common.handle_all_urls"
        ],
        "target": {
            "namespace": "android_app",
            "package_name": "package_name",
            "sha256_cert_fingerprints": [
               "SHA256KEY"
            ]
        }
    }
]

package_name: Add your flutter application package name.

sha256_cert_fingerprints: Add your SHA256 keys. How to create?

Now make this file accessible

Deploy your project.

We are done with website part.

Setup Flutter Project

For flutter, we are not going to create project from starting, I am just going to share how link is handled.

Add following dependencies:

dependencies:
  uni_links: ^0.5.1

For Android

Uni Links supports two types of Android links: "App Links" and "Deep Links".

- App Links only work with https scheme and require a specified host, plus a hosted file - assetlinks.json. Check the Guide links below.
- Deep Links can have any custom scheme and do not require a host, nor a hosted file. The downside is that any app can claim a scheme + host combo, so make sure yours are as unique as possible, eg. HST0000001://host.com.

You need to declare at least one of the two intent filters in android/app/src/main/AndroidManifest.xml:

<manifest ...>
  <!-- ... other tags -->
  <application ...>
    <activity ...>
      <!-- ... other tags -->

      <!-- Deep Links -->
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->
        <data
          android:scheme="[YOUR_SCHEME]"
          android:host="[YOUR_HOST]" />
      </intent-filter>

      <!-- App Links -->
      <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with https://YOUR_HOST -->
        <data
          android:scheme="https"
          android:host="[YOUR_HOST]" />
      </intent-filter>
    </activity>
  </application>
</manifest>

Note: The android:host attribute is optional for Deep Links.

For iOS: It requires valid apple associated domain, you can refer to this for iOS.

Lets Dive into App Link

if you are using on generated routes which match/exact same as link shared then you do not need to handle Link, it will automatically redirect you to received route. but if you are not using or want to handle link manually then we have

getInitialLink(): Returns the link that the app was started with, if any.

You should handle this very early in your app's life and handle it only once.

import 'dart:async';
import 'dart:io';

import 'package:uni_links/uni_links.dart';
import 'package:flutter/services.dart' show PlatformException;

// ...

  Future<void> initUniLinks() async {
    // Platform messages may fail, so we use a try/catch PlatformException.
    try {
      final initialLink = await getInitialLink();
      // Parse the link and warn the user, if it is not correct,
      // but keep in mind it could be `null`.
    } on PlatformException {
      // Handle exception by warning the user their action did not succeed
      // return?
    }
  }

// ...

Listen for links:


import 'dart:async';
import 'dart:io';

import 'package:uni_links/uni_links.dart';

// ...

  StreamSubscription _sub;

  Future<void> initUniLinks() async {
    // ... check initialLink

    // Attach a listener to the stream
    _sub = linkStream.listen((String? link) {
      // Parse the link and warn the user, if it is not correct
    }, onError: (err) {
      // Handle exception by warning the user their action did not succeed
    });

    // NOTE: Don't forget to call _sub.cancel() in dispose()
  }

// ...

Testing Your Deep Links

Testing for Android

Use the ADB tool to send test deep-links to your app and verify that they open the correct content.

adb shell 'am start -W -a android.intent.action.VIEW -c android.intent.category.BROWSABLE -d "unilinks://host/path/subpath"'

Testing for iOS

Use Xcode to simulate test deep-links and verify that they open the correct content.

/usr/bin/xcrun simctl openurl booted "unilinks://host/path/subpath"

Let's Look into Sample Project:

Using Material onGeneratedRoutes in Flutter as follow:

Link Share: Using share_plus package to share the link.

 onPressed: () {
                Share.share(
                    'check out my blog "https://blogs-deeplink-example.vercel.app/blog/${blog?.id}');
              },

Link Handling or listening for AppLinks:

OUTPUT

React Website:

Flutter Application:

PART 2 Soon !!!!!

Source code :

Github Repo

Follow me on

Flutter CC-Avenue Payment Gateway Integration ft. PHP

Md. Mobin — Sun, 28 May 2023 08:25:19 +0000

In today's digital era, businesses are constantly seeking secure and reliable payment gateways to facilitate seamless transactions. CCAvenue is a popular payment gateway in India, offering a wide range of payment options for online businesses. In this blog, we will explore how to integrate CCAvenue into a Flutter application using PHP server.

Note: There is no official SDK available for flutter, so we are going to integrate through Flutter Webview.

Prerequisites:

Before we begin, make sure you have the following requirements in place:

Flutter SDK installed on your machine
Basic knowledge of Flutter and PHP
CCAvenue merchant account credentials

Note: CCAvenue does not allow payment transaction in live or test mode until you whitelist your Domain/IP. For Whitelisting your domain, you can email them.

Lets understand how does transaction Handle through CCAvenue?

CCAvenue has two phase for completing transaction

Initiate Payment : In this step,client send amount and currency and other required details to server and than server encrypt these values to a single encrypted(lets says enc_val) string and send enc_val and access_code to client.

Note: When your CCAvenue approved and whitelisted for transaction then you can get following access_code,working_key and merchant_id from CCAvenue.

Generate enc_val: Merchant need to encrypt following set of parameters using encryption tool provided by CCAvenue(We will use PHP)

We will encrypt following String:



merchant_id=123&order_id=123456redirect_url=www.amazonaws.com/payment
/ccav_resp.phpcancel_url=www.amazonaws.com/payment/ccav_resp.phpamount=1.00&currency=INR

after encryption we will get string like



a5eed2d2a51358773bb1de741b0b2f1261308043c2a8f78bf59d9d3d5081f785792599d64876
220964ebdd1578ce633aae959b804f2b2d53cda3821baf5480b3a082ea89a0e6784af4fef98e0
54f3a5c78f0ec9e611a01dd7666e9903e6b5d62c7a11d8db869d665c0077a292cfa6aba80a1ab
a94882168ede009b2c3806a4b08c781e2e5a7d54411b5a288ff28d499bc9de

Parameter Name	Description	Type (length)
Merchant Id	Merchant Id is a unique identifier generated by CCAvenue for each activated merchant.	Numeric
Order Id	This ID is used by merchants to identify the order. Ensure that you send a unique id with each request. CCAvenue will not check the uniqueness of this order id. As it generates a unique payment reference number for each order which is sent by the merchant.	Alphanumeric (30)
Redirect Url	CCAvenue will post the status of the order along with the parameters to this URL.	Alphanumeric (100)
Cancel Url	CCAvenue will redirect the customer to this URL if the customer cancels the transaction on the billing page.	Alphanumeric (100)
Amount	Order amount	Numeric (12, 2)
Currency	Currency in which you want to process the transaction. AED - Arab Emirates dirham USD - United States Dollar SAR - Saudi Arabia Riyal INR – Indian Rupee SGD – Singapore Dollar GBP – Pound Sterling EUR – Euro, official currency of Eurozone	Alphabets (3)

Note: we will talk about cancel_url and redirect_url in the next steps.

Start payment in WebView: you can start payment in webview through following url



https://secure.ccavenue.com/transaction.do?command=initiateTransaction&encRequest=enc_val&access_code=access_code

Note for testing replace secure.ccavenue.com to test.ccavenue.com.

Response Handler: When a user completes a payment, either in case of failure or success, CCAvenue will send an encrypted string to either the redirect_url or cancel_url using a POST request.
- redirect_url: It refers to a webpage hosted on your server's domain/IP, which must be whitelisted by CCAVenue. This webpage will handle the necessary steps after the payment request is completed, including handling both failure and success scenarios.
- cancel_url: Similar to the redirect_url, the cancel_url is also hosted on your server's domain/IP. However, it specifically handles requests where the user cancels the payment.

Now we will use decryption tool to decrypt string given by CCAvenue
after payment complete.

Lets Start Integration (Server Side)

We need encryption and decryption function to encrypt and decrypted request.

create crypto.php and with following content:

Install required Library:



sudo apt-get install php7.4-openssl

Now we need to create a page that accept POST request and return enc_val and access_code.

ccAvenueRequestHandler.php

Note: you can edit page as per your requirement,but later on flutter side you need JavaScript function to get desired result.

We also need to create a page like above which accept POST request and return decrypted data.

ccavResponseHandler.php

Note: Following url should be accessible through whitelisted domain https://your-domain/ccavResponseHandler.php.

Integration in Flutter(Client):

Adding following to pubspec.yaml ```

dependencies:
http: ^0.13.6
webview_flutter: ^2.0.6
html:


- Android Configuration: Change in `build.gradle`(android/app)

android {
defaultConfig {
minSdkVersion 19
}
}


- Create Payment handler Screen with following content: 
lets say `payment_screen.dart`:


  




isTesting (Variable):


Description: A boolean variable used to indicate whether the application is in testing mode or production mode.
Type: bool




jsChannels (Variable):


Description: A set of JavascriptChannel objects that define the JavaScript channels available for communication between the Flutter app and the WebView.
Type: Set&lt;JavascriptChannel&gt;




initPayment (Method):


Description: This method is responsible for initializing the payment by making an HTTP POST request to the requestInitiateUrl with the specified amount.
Parameters:



amount (Type: String): The amount for the payment.


Returns: A Future object that resolves to the payment data in JSON format.
Type: Future&lt;dynamic&gt;




onPageFinished (Method):


Description: This method is called when the WebView finishes loading a page.
Parameters:



url (Type: String): The URL of the loaded page.


Returns: void

Type: void




navigationDelegate (Method):


Description: This method is used to control the navigation behavior of the WebView based on the requested URL.
Parameters:



nav (Type: NavigationRequest): The navigation request object containing information about the requested URL.


Returns: A NavigationDecision that determines whether to allow or prevent the navigation.
Type: NavigationDecision







  
  
  Source code :


Github Repo

  
  
  Follow me on



Twitter
Instagram
Github
linkedin
dev.to
Medium

Create Switch Case Kind Widget in Flutter

Md. Mobin — Wed, 17 May 2023 17:15:30 +0000

Welcome back guys,Today we are going to learn some new quick technique by which we can enhance our flutter code readability.

We are going to create own Switch-Case like conditional widgets or same like bloc state (builder).

We will be going through basics,

What is Switch-Case?

In Dart, the switch statement is used for conditional branching based on the value of a variable. It provides a convenient way to execute different code blocks based on the value of an expression. The structure of a switch statement in Dart is as follows



switch (expression) {
  case value1:
    // Code to execute if expression matches value1
    break;
  case value2:
    // Code to execute if expression matches value2
    break;
  // Additional cases
  default:
    // Code to execute if none of the cases match the expression
}

Conditional Widget

In flutter, for example on the basis of condition you have to hide or show some widget,for example loading indicator so for that we can use visibility widget,if-else, or ternary operators.

If we have options then why we need switch case widget

Visibility: we know that visible hide the specified on widget on given boolean value,for example ```

Visibility(
visible: false,
child: Text("Hello,world")),

it is obviously good option but it will not work on multiple choices  and it can be either Widget A or Widget B (if replacement specified).

- if else or ternary operator: if else/ternary operator are useful to show conditional widget but when the no of cases increase it become difficult to read.

## Solution ??

![meme 1](https://i.redd.it/if3ldk2w2j841.jpg)


for that we are going to create Switch-case like custom widget 

-  Creating Custom StatelessWidget `SwitchCaseWidget`:

class SwitchCaseWidget extends StatelessWidget {
final Widget? Function(T? t) stateBuilder;
final T activeState;

const SwitchCaseWidget({
super.key,
required this.stateBuilder,
required this.activeState,
});

@override
Widget build(BuildContext context) {
return stateBuilder(activeState) ?? const SizedBox.shrink();
}
}

Let's go through each part of the `SwitchCaseWidget` class and its functionality:

1. `class SwitchCaseWidget<T> extends StatelessWidget`: This line defines a Dart class named `SwitchCaseWidget` that is generic over a type `T`. It extends the `StatelessWidget` class, indicating that this widget does not have any mutable state.

2. `final Widget? Function(T? t) stateBuilder;`: It represents a function that takes a value of type `T` or nullable `T` and returns a widget or `null`. The function will be responsible for determining the widget to return based on the value passed to it.

3. `final T activeState;`: This line declares a final variable `value` of type `T`. It represents the value that will be passed to the `stateBuilder` function to determine the widget.

The purpose of the `SwitchCaseWidget` class is to simplify the process of creating widgets based on different cases or values. By providing a `cases` function and a value, you can dynamically determine and render different widgets based on the provided value.

- Before use it let's create states possible,
 for the following example I am going to have 3 states,
   - Loading State 
   - Error State
   - Data Loaded State
most commonly used states in flutter.

abstract class WidgetSwitchCase {}

class LoadingWidgetCase extends WidgetSwitchCase {}

class ErrorWidgetCase extends WidgetSwitchCase {
final String message;
ErrorWidgetCase({required this.message});
}

class DataLoadedCase extends WidgetSwitchCase {
List data = List.generate(12, (index) => index);
}

Here's an explanation of each state class:

1. `LoadingWidgetCase`: This class represents the loading state of the widget. It is a subclass of `WidgetSwitchCase`, indicating that it is one of the possible cases handled by the `WidgetSwitchCase`. It doesn't have any additional properties or methods.

2. `ErrorWidgetCase`: This class represents the error state of the widget. It is also a subclass of `WidgetSwitchCase`. It has an additional property `message` of type `String` that stores the error message. When an instance of `ErrorWidgetCase` is used, the error message can be passed to it via the constructor.

3. `DataLoadedCase`: This class represents the state when data is successfully loaded. It is also a subclass of `WidgetSwitchCase`. It has an additional property `data` which is a `List<int>` holding some sample data. In this example, it generates a list of integers from 0 to 11 using the `List.generate` method.

> Note : You can define your own custom states.

## Usage:

It has very easy usage and also good readability

SwitchCaseWidget(
activeState: switchCaseExample,
stateBuilder: (WidgetSwitchCase? value) {
if (value is LoadingWidgetCase) {
return const CircularProgressIndicator();
}
if (value is ErrorWidgetCase) {
return Text(
value.message,
style: const TextStyle(color: Colors.red, fontSize: 30),
);
}
if (value is DataLoadedCase) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: value.data
.map((e) => Text(
e.toString(),
style: const TextStyle(fontSize: 20),
))
.toList(),
),
);
}
//default case
return null;
}),



OUTPUT


- Loading state:
  ![loading state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8lumy44uoigoae65pum.png)

- Error State

![Error State](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1acdkghb2k6p6fgvs19.png)

- Data loaded State


![data loaded state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89qk5jc2oav41j390mo3.png)


> Note: it is not going to reduce if-else condition but add more readability then normal if else in Flutter State widget.

Flutter pagination ft. Bloc

Md. Mobin — Sat, 22 Apr 2023 14:52:16 +0000

Welcome back, everyone! Today, we will be learning about implementing pagination in Flutter using Bloc as our state management solution. To fetch products, we will be using a modified version of the fake-store APIs that includes pagination.

Let's begin with the basics before diving into Flutter-specific details.

Do not worry we are going to talk about bloc's basic

Why Pagination?

Pagination refers to the practice of dividing content into multiple pages to improve user experience and page load times. It is commonly used in websites and applications that feature long-form content such as articles, product listings, and search results.

Setup Project

Add the following dependency to your Flutter project(pubspec.yaml)

    flutter_bloc: ^8.1.2
    http: ^0.13.5
    dartz: ^0.10.1
    shimmer: ^2.0.0
    cached_network_image: ^3.2.3

darts: In Flutter, Dartz is a library that provides functional programming tools such as the Either data type. Either data type represents a value that can be one of two possible types, typically used to represent the success or failure of a computation.

shimmer: Shimmer library is being used for showing loading indicator link on LinkedIn, Twitter, Facebook etc.
cached_network_image: Flutter library, as its name suggests, is used for caching network images.
http: Flutter library for calling HTTP requests.

Project file Structure:

models: following folders will contain models that will be used in the application.
presentation: The following layer has been divided further into blocs,pages, and widgets.
- widgets: Widgets are the building blocks of the user interface in Flutter. They are reusable UI elements that can be combined to create complex layouts. Widgets can be stateless, meaning they do not change over time, or stateful, meaning they can change based on user interaction or other events.
- blocs: Blocs are a pattern for managing state in Flutter applications. They stand for Business Logic Components and are responsible for managing the flow of data between the presentation layer and the data layer.
- pages: Pages are the top-level UI elements in a Flutter application. Each page typically represents a separate screen or view.
repo: Stands for the repository which has logic for calling APIs it passes data to models.

Parsing APIs Data to Dart Model-Classes

Don't know how to parse JSON data to Dart class?

We are going to use a modified version of FakeStore APIs.

Base URL="https://flutter-pagination-api-djsmk123.vercel.app/api

Endpoint /get-products?page=1 by default page=1. How the response will look like?

  {

      "products": [
          {
              "id": 1,
              "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
              "price": 109.95,
              "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
              "category": "men's clothing",
              "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
              "rating": {
                  "rate": 3.9,
                  "count": 120
              }
          },
          {
              "id": 2,
              "title": "Mens Casual Premium Slim Fit T-Shirts ",
              "price": 22.3,
              "description": "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.",
              "category": "men's clothing",
              "image": "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
              "rating": {
                  "rate": 4.1,
                  "count": 259
              }
          },
          {
              "id": 3,
              "title": "Mens Cotton Jacket",
              "price": 55.99,
              "description": "great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.",
              "category": "men's clothing",
              "image": "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg",
              "rating": {
                  "rate": 4.7,
                  "count": 500
              }
          },
          {
              "id": 4,
              "title": "Mens Casual Slim Fit",
              "price": 15.99,
              "description": "The color could be slightly different between on the screen and in practice. / Please note that body builds vary by person, therefore, detailed size information should be reviewed below on the product description.",
              "category": "men's clothing",
              "image": "https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg",
              "rating": {
                  "rate": 2.1,
                  "count": 430
              }
          },
          {
              "id": 5,
              "title": "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet",
              "price": 695,
              "description": "From our Legends Collection, the Naga was inspired by the mythical water dragon that protects the ocean's pearl. Wear facing inward to be bestowed with love and abundance, or outward for protection.",
              "category": "jewelery",
              "image": "https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg",
              "rating": {
                  "rate": 4.6,
                  "count": 400
              }
          }
      ],
      "current_page": 1,
      "reach_max": false

  }

Let's Create Dart Class Model

ProductModel: create a new file in models named product_model.dart with the following content.

  import 'package:pagination_in_flutter/models/rating_model.dart';

  class ProductModel {
    final int id;
    final String title;
    final String description;
    final String category;
    final double price;
    final String image;
    final RatingModel rating;
    ProductModel({
      required this.id,
      required this.title,
      required this.description,
      required this.category,
      required this.price,
      required this.image,
      required this.rating,
    });
    factory ProductModel.fromJson(Map<String, dynamic> json) {
      return ProductModel(
        id: json['id'],
        title: json['title'],
        description: json['description'],
        category: json['category'],
        price: (json['price'] as num).toDouble(),
        image: json['image'],
        rating: RatingModel.fromJson(json['rating']),
      );
    }
    toJson() {
      return {
        "id": id,
        "title": title,
        "description": description,
        "category": category,
        "price": price,
        "image": image,
        "rating": rating.toJson(),
      };
    }
  }

RatingModel: same create a new dart file in the same folder with the named rating_model.dart and the content will be followed as.

  class RatingModel {
    final double rate;
    final int count;
    RatingModel({required this.rate, required this.count});
    factory RatingModel.fromJson(Map<String, dynamic> json) {
      return RatingModel(
          rate: (json['rate'] as num).toDouble(), count: json['count']);
    }
    toJson() {
      return {"rate": rate, "count": count};
    }
  }

ProductsListModel: The following model requires for parsing JSON data.

  import 'package:pagination_in_flutter/models/product_model.dart';

  class ProductsListModel {
    final List<ProductModel> products;
    final bool reachMax;
    final int currentPage;
    const ProductsListModel(
        {required this.products,
        required this.currentPage,
        required this.reachMax});
    factory ProductsListModel.fromJson(Map<String, dynamic> json) {
      return ProductsListModel(
          products: parseProducts(json['products']),
          currentPage: json['current_page'],
          reachMax: json['reach_max']);
    }
    Map<String, dynamic> toJson() {
      return {
        'products': products.map((e) => e.toJson()),
        'current_page': currentPage,
        'reach_max': reachMax
      };
    }

    static List<ProductModel> parseProducts(List<dynamic> p) {
      return List.generate(p.length, (index) => ProductModel.fromJson(p[index]));
    }
  }

Failure: The failure model will be used to throw errors in Either and following in models/error_model.dart

  class Failure { 
  final String message;
  const Failure({required this.message}); 
  }

Let's Call API

Create class ProductRepo for calling APIs which has getProducts static function which will return Either Failure (error) or ProductListModel.

  import 'dart:convert';

  import 'package:dartz/dartz.dart';
  import 'package:http/http.dart' as http;
  import 'package:pagination_in_flutter/models/error_model.dart';
  import 'package:pagination_in_flutter/models/product_list_model.dart';

  class ProductRepo {
    static Future<Either<Failure, ProductsListModel>> getProducts(
        {required int page}) async {
      try {
        Map<String, String> query = {"page": page.toString()};
        var uri = Uri.parse(
                "https://flutter-pagination-api-djsmk123.vercel.app/api/get-products")
            .replace(queryParameters: query);
        final response =
            await http.get(uri, headers: {"Content-Type": "application/json"});
        if (response.statusCode == 200) {
          var json = jsonDecode(response.body);
          ProductsListModel products = ProductsListModel.fromJson(json);
          return Right(products);
        } else {
          return const Left(Failure(message: 'Failed to parse json response'));
        }
      } catch (e) {
        return const Left(Failure(message: 'Something went wrong'));
      }
    }
  }

Before creating Blocs states, event and their implementation, Let's talk about Bloc's Basics.

Bloc's:

Flutter Widgets that make it easy to implement the BLoC (Business Logic Component) design pattern. Built to be used with the bloc state management package.

Not going to cover Cubit in Flutter Bloc

Bloc has three different components state, event and emit.

State: represents the current state of the application. a state is an immutable object that represents a snapshot of the application at a specific moment in time. When the State changes and the UI is rebuilt with the new state.
event: an Event is a message or signal that triggers a change in the State of the application. Event objects represent user actions, system events, or any other external change that affects the state of the application.
emit: emit method is used to notify the Bloc or Cubit that a new State has been produced. The emit method accepts a single argument, which is the new State object.

BlocBuilder:

a Flutter widget that requires a bloc and a builder function. BlocBuilder handles building the widget in response to new states. BlocBuilder is very similar to StreamBuilder has a more simple API to reduce the amount of boilerplate code needed. The builder function will potentially be called many times and should be a pure function that returns a widget in response to the state.

For more info

Let's Back to where were we.

Creating Blocs for product

You can create your bloc classes but it is time-consuming so use plugins

Android Studio: https://plugins.jetbrains.com/plugin/12129-bloc
Vs code

Keeping Bloc class as `ProductsBloc`

Events

We have only one event that is ProductLoadEvent so create a class for that

part of 'products_bloc.dart';

@immutable
abstract class ProductsEvent {}

class ProductsLoadEvent extends ProductsEvent {}

States

we could have multiple states like

Initial loading: Initially we have to show a loading indicator while the first page is keep fetching from APIs.

Initial Error: While fetching items from API, there could be an error.
Empty List: it might happen that we got an empty list in response.

Product fetch success: When you have successfully fetched data from API and now load more while keeping earlier data so it has conditional value, isLoading or hasError.

  part of 'products_bloc.dart';

  @immutable
  abstract class ProductsState {}

  class ProductsInitial extends ProductsState {}

  //State for initial Loading when current page will be 1
  class ProductsInitialLoading extends ProductsState {
    final String message;
    ProductsInitialLoading({required this.message});
  }

  class ProductInitialError extends ProductsState {
    final String message;
    ProductInitialError({required this.message});
  }

  class ProductsEmpty extends ProductsState {}

  class ProductsLoaded extends ProductsState {
    final ProductsListModel products;
    final LoadingMore? loading;
    final LoadMoreError? error;
    ProductsLoaded({
      required this.products,
      this.loading,
      this.error,
    });
  }
  // LoadingMore Model
  class LoadingMore {
    final String message;
    LoadingMore({required this.message});
  }
  // LoadingMoreError Model
  class LoadMoreError {
    final String message;
    LoadMoreError({required this.message});
  }

Let's implement Event and States

Add the following content in products_bloc.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:pagination_in_flutter/models/product_list_model.dart';
import 'package:pagination_in_flutter/repo/products_repo.dart';

part 'products_event.dart';
part 'products_state.dart';

class ProductsBloc extends Bloc<ProductsEvent, ProductsState> {
  ProductsListModel products = const ProductsListModel(
    products: [],
    currentPage: 1,
    reachMax: false,
  );
  ProductsBloc() : super(ProductsInitial()) {
    on<ProductsEvent>((event, emit) async {
      if (event is ProductsLoadEvent) {
        bool isInitial = products.currentPage == 1;
        isInitial
            ? emit(ProductsInitialLoading(message: 'Fetching products....'))
            : emit(ProductsLoaded(
                products: products,
                loading: LoadingMore(message: 'Fetching more products...')));
        final response =
            await ProductRepo.getProducts(page: products.currentPage);
        response.fold(
            (l) => isInitial
                ? emit(ProductInitialError(message: 'Failed to load products'))
                : emit(ProductsLoaded(
                    products: products,
                    error: LoadMoreError(
                        message: 'Failed to load more products'))), (r) {
          if (isInitial) {
            products = ProductsListModel(
                products: r.products,
                currentPage: r.currentPage + 1,
                reachMax: r.reachMax);

            if (products.products.isEmpty) {
              emit(ProductsEmpty());
            }
          } else {
            //Adding products to existing list
            products = ProductsListModel(
                products: products.products + r.products,
                currentPage: r.currentPage + 1,
                reachMax: r.reachMax);
          }
          emit(ProductsLoaded(products: products));
        });
      }
    });
  }
}

Done with Flutter Bloc

Let's Implement UI

create a new stateful class named ProductPage in /presentation/pages/ with the following content.

  import 'package:flutter/material.dart';
  import 'package:flutter_bloc/flutter_bloc.dart';
  import 'package:pagination_in_flutter/colors.dart';
  import 'package:pagination_in_flutter/models/product_model.dart';
  import 'package:pagination_in_flutter/presentation/blocs/products_bloc.dart';

  import '../widgets/widgets.dart';

  class ProductsPage extends StatefulWidget {
    const ProductsPage({Key? key}) : super(key: key);

    @override
    State<ProductsPage> createState() => _ProductsPageState();
  }

  class _ProductsPageState extends State<ProductsPage> {
    @override
    void initState() {
      BlocProvider.of<ProductsBloc>(context).add(ProductsLoadEvent());
      super.initState();
    }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(
            leading: Icon(
              Icons.menu,
              color: primaryColor,
              size: 30,
            ),
            title: Text(
              "Flutter Pagination",
              style: TextStyle(
                color: primaryColor,
                fontSize: 20,
              ),
            ),
            centerTitle: true,
          ),
          body: PaginationWidget<ProductModel>(
            loadMore: () {
              BlocProvider.of<ProductsBloc>(context).add(ProductsLoadEvent());
            },
            initialEmpty: const EmptyWidget(),
            initialLoading: const LoadingWidget(),
            initialError: const CustomErrorWidget(),
            child: (ProductModel productModel) {
              return ProductCard(product: productModel);
            },
          ));
    }
  }

Create PaginationWidget stateless class in widgets directory.

  class PaginationWidget<t> extends StatelessWidget {
    final Function() loadMore;
    final Widget initialError;
    final Widget initialLoading;
    final Widget initialEmpty;
    final Widget Function(t p) child;
    final Widget? onLoadMoreError;
    final Widget? onLoadMoreLoading;
    const PaginationWidget(
        {Key? key,
        required this.loadMore,
        required this.initialError,
        required this.initialLoading,
        required this.initialEmpty,
        this.onLoadMoreError,
        this.onLoadMoreLoading,
        required this.child})
        : super(key: key);

    @override
    Widget build(BuildContext context) {
      return BlocBuilder<ProductsBloc, ProductsState>(
        builder: (context, state) {
          if (state is ProductsLoaded) {
            List<ProductModel> products = state.products.products;
            return NotificationListener<ScrollEndNotification>(
                onNotification: (scrollInfo) {
                  scrollInfo.metrics.pixels ==
                              scrollInfo.metrics.maxScrollExtent &&
                          !state.products.reachMax
                      ? loadMore()
                      : null;
                  return true;
                },
                child: Column(
                  children: [
                    Expanded(
                        child: ListView.builder(
                            itemCount: products.length,
                            itemBuilder: (context, index) =>
                                child(products[index] as t))),
                    const SizedBox(
                      height: 20,
                    ),
                    //if error occured while loading more
                    if (state.error != null)
                      Expanded(child: onLoadMoreError ?? initialError),
                    if (state.loading != null)
                      Expanded(child: onLoadMoreLoading ?? initialLoading),
                  ],
                ));
          }
          if (state is ProductsInitialLoading) {
            return initialLoading;
          }
          if (state is ProductsEmpty) {
            return initialEmpty;
          }
          if (state is ProductInitialError) {
            return initialError;
          }
          return const SizedBox.shrink();
        },
      );
    }
  }

The PaginationWidget class is a Flutter stateless widget that renders a list of items with pagination support. It takes in several parameters through its constructor to configure its behavior and appearance.
The constructor for the PaginationWidget class has the following parameters:
- loadMore: a function that is called when the user reaches the end of the list and needs to load more items.
- initialError: a widget to display when an error occurs while loading the initial list of items.
- initialLoading: a widget to display while the initial list of items is being loaded.
- initialEmpty: a widget to display when the initial list of items is empty.
- child: a function that takes an item of type t and returns a widget that represents that item in the list.
- onLoadMoreError: a widget to display when an error occurs while loading more items.
- onLoadMoreLoading: a widget to display while more items are being loaded.

Empty List item Widget: create a widget in widgets/empty_widget

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

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

    @override
    Widget build(BuildContext context) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CachedNetworkImage(
              imageUrl:
                  "https://static.vecteezy.com/system/resources/previews/005/073/073/original/no-item-in-the-shopping-cart-add-product-click-to-shop-now-concept-illustration-flat-design-eps10-modern-graphic-element-for-landing-page-empty-state-ui-infographic-icon-vector.jpg",
              height: 200,
            ),
            const SizedBox(
              height: 30,
            ),
            Text("No products available",
                style: TextStyle(color: Colors.grey.shade500, fontSize: 24)),
          ],
        ),
      );
    }
  }

CustomErrorWidget: do the same with this, name error_widget.dart.

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

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

    @override
    Widget build(BuildContext context) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CachedNetworkImage(
              imageUrl: "https://gcdnb.pbrd.co/images/5Rz9dEYkdYdm.png?o=1",
              height: 200,
            ),
            const SizedBox(
              height: 30,
            ),
            Text("Error Occured,try again",
                style: TextStyle(color: Colors.grey.shade500, fontSize: 24)),
          ],
        ),
      );
    }
  }

LoadingWidget: For showing Loading, We are using shimmer widget.

import 'package:flutter/material.dart';
import 'package:pagination_in_flutter/colors.dart';
import 'package:shimmer/shimmer.dart';

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (c, i) => Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
        child: Card(
          elevation: 5,
          surfaceTintColor: Colors.grey,
          color: Colors.grey.shade300,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: Stack(
              children: [
                Column(
                  children: [
                    Row(
                      children: [
                        Flexible(
                            child: shimmerBuilder(
                          const CircleAvatar(
                            radius: 40,
                            backgroundColor: Colors.grey,
                          ),
                        )),
                        const SizedBox(
                          width: 20,
                        ),
                        Flexible(
                          child: shimmerBuilder(
                            Container(
                              height: 20,
                              width: 150,
                              color: Colors.black,
                            ),
                          ),
                        )
                      ],
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    Row(
                      children: [
                        shimmerBuilder(
                          const Icon(
                            Icons.favorite_border,
                            color: Colors.grey,
                          ),
                        ),
                        const SizedBox(
                          width: 10,
                        ),
                        shimmerBuilder(
                          Container(
                            height: 10,
                            width: 100,
                            color: Colors.black,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
                Positioned(
                    right: 0,
                    bottom: 0,
                    child: shimmerBuilder(
                      Container(
                        width: 125,
                        padding: const EdgeInsets.symmetric(
                            horizontal: 20, vertical: 5),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(8),
                          border: Border.all(color: primaryColor),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: const [
                            Icon(
                              Icons.shopping_cart_outlined,
                              color: Colors.grey,
                            ),
                          ],
                        ),
                      ),
                    ))
              ],
            ),
          ),
        ),
      ),
      itemCount: 5,
    );
  }

  Shimmer shimmerBuilder(child) {
    return Shimmer(
      gradient: LinearGradient(
        colors: [
          Colors.grey.shade300,
          Colors.grey.shade100,
          Colors.grey.shade50,
        ],
      ),
      child: child,
    );
  }
}

create a dart file named product_card.dart with the following content:

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:pagination_in_flutter/colors.dart';
import 'package:pagination_in_flutter/models/product_model.dart';

class ProductCard extends StatelessWidget {
  final ProductModel product;
  const ProductCard({Key? key, required this.product}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      child: Card(
        elevation: 5,
        surfaceTintColor: primaryColor,
        color: Colors.blueAccent,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Stack(
            //crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Column(
                children: [
                  Row(
                    children: [
                      Flexible(
                        child: CircleAvatar(
                          radius: 40,
                          backgroundColor: Colors.white,
                          child: ClipOval(
                            child: CachedNetworkImage(
                              width: double.maxFinite,
                              height: 130.0,
                              fit: BoxFit.scaleDown,
                              imageUrl: product.image,
                              placeholder: (context, url) => const SizedBox(
                                width: 10,
                                height: 10,
                              ),
                              errorWidget: (context, url, error) => Image.asset(
                                'assets/images/sinimagen.png',
                                height: 30,
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 20,
                      ),
                      Flexible(
                          child: Text(
                        product.title,
                        maxLines: 2,
                        style:
                            const TextStyle(color: Colors.white, fontSize: 14),
                      ))
                    ],
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Row(
                    children: [
                      const Icon(
                        Icons.favorite_border,
                        color: Colors.white,
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                      Text(
                        product.rating.count.toString(),
                        maxLines: 2,
                        style:
                            const TextStyle(color: Colors.white, fontSize: 14),
                      ),
                    ],
                  ),
                ],
              ),
              Positioned(
                right: 0,
                bottom: 0,
                child: Container(
                  width: 125,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: primaryColor),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(product.price.toString()),
                      const SizedBox(
                        width: 10,
                      ),
                      const Icon(Icons.shopping_cart_outlined),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Add the following content in main.dart

  import 'package:flutter/material.dart';
  import 'package:flutter_bloc/flutter_bloc.dart';
  import 'package:pagination_in_flutter/presentation/blocs/products_bloc.dart';
  import 'package:pagination_in_flutter/presentation/pages/products_page.dart';

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

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

    @override
    Widget build(BuildContext context) {
      return MultiBlocProvider(
          providers: [BlocProvider(create: (context) => ProductsBloc())],
          child: MaterialApp(
            title: 'Pagination Example with Flutter',
            debugShowCheckedModeBanner: false,
            theme: ThemeData(useMaterial3: true),
            home: const ProductsPage(),
          ));
    }
  }

Create colors.dart

  import 'package:flutter/material.dart';

  Color primaryColor = Colors.blueAccent;

OUTPUT

Fetching Items when No Error Occurred

Fetching items when the error occurred while loading more:

Hurry we successfully implemented Pagination in Flutter using Blocs.

Source code:

Flutter Github Repo: https://github.com/Djsmk123/flutter_pagination
Backend Repo: https://github.com/Djsmk123/flutter_pagination_api

Follow me:

Is your Flutter application Secured? Best Practices for Developing and Deploying Secure Flutter Apps

Md. Mobin — Fri, 03 Mar 2023 14:41:57 +0000

I have been working on flutter for more than 2 years and I have seen many flutter developers who are not aware of the security issues in a flutter. So I have decided to write this article to make flutter developers aware of the security issues in flutter and how can you make your application secure so let's start.

Securing API Keys

API stands for "Application Programming Interface". An API is a set of rules, protocols, and tools that define how software components should interact with each other. In other words, it is a way for different software applications to communicate and exchange information with each other.
we can secure API hard-coded either in dart or Native(Android, iOS, web)

API keys in Flutter code

for example, I have to use the API key in Dart code



void main(){
  String API_KEY="********"; //bad practice
}

for avoiding this, we can use String.fromEnvironment() or .env file.

`String.fromEnvironment()` implementation

Load API in Dart code ```

void main(){
String? apiKey = String.fromEnvironment('API_KEY', defaultValue: null); //get api key from environment
runApp(MyApp(apiKey: apiKey));
}


- While compiling code pass the API key as an environment variable

flutter build apk --dart-define==API_KEY=SECRET_KEY


## Load API key From `.env` file

for fetching API keys from the `.env` file use the following package:

[flutter_dotenv](https://pub.dev/packages/flutter_dotenv)

> Note Do not forget to add the `.env` file in the `.gitignore` file

## API keys in Native code

for example, Google Map API needs to be added to Android, iOS, and the web in respective files but APIs are not secured in `AndroidManifest.xml`, `info.plist`, and `index.html`.

[Adding Google Map to flutter](https://codelabs.developers.google.com/codelabs/google-maps-in-flutter#3)

## Android: 
- Insert your API key in  `local.properties `file

google.maps_api_key=SECRET_KEY


  - Add local.properties file in `.gitignore` file
  - Now read the API key from `local.properties` file in `build.gradle(app)` file.

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}
def googleMapsApiKey = localProperties.getProperty("google.maps_api_key")
android {
    defaultConfig {
        manifestPlaceholders = [
                googleMapsApiKey: googleMapsApiKey
        ]
    }
}


- and add it to your AndroidManifest.xml file

<meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="${googleMapsApiKey}" />

## For iOS: 
- Add your API key in `ios/Flutter/Release.xcconfig` file

 GOOGLE_MAPS_API_KEY=$(SECRET_KEY)

- Same as debug.xcconfig file

- Now refer to these keys in `info.plist` file

google_maps_api_key
$(GOOGLE_MAPS_API_KEY)

- Now add it to your `AppDelegate.swift` file

GMSServices.provideAPIKey("$(GOOGLE_MAPS_API_KEY)")


# For the web: 
it is a little bit complicated but you can refer to the following link:

[Dyanmic Html Elements- An approach to Flavours in Flutter Web ](https://medium.com/flutter-community/dynamic-html-elements-an-approach-to-flavors-in-flutter-web-6bff1a7d655a) by [gonpalma](https://twitter.com/gonpalma)

## Encrypt Information and Storage

Encryption is the process of converting plain text data into an encoded format to ensure the confidentiality, integrity, and security of the data. In Flutter, encryption is often used to secure sensitive data such as passwords, user credentials, and financial information in mobile applications.

Flutter provides built-in support for encryption through the `dart:crypto` library, which includes various cryptographic functions such as hashing, symmetric encryption, and asymmetric encryption.

![meme 2](https://images.squarespace-cdn.com/content/v1/5c9051237d0c9173e4e58a19/1614147238291-DA792M3SPZ60ZUDBWRHD/Encryption+meme.jpg?format=750w)

- Encryption local storage: Local storage is a place where we store the data locally on the device. So we should encrypt the data before storing it in the local storage. You can use the following packages to encrypt the data before storing it in the local storage.

  - [flutter_secure_storage](https://pub.dev/packages/flutter_secure_storage)
  - [sqflite](https://pub.dev/packages/sqflite)
  - [file_cryptor](https://pub.dev/packages/file_cryptor)

- Encryption Information: Sensitive data such as user credentials, payment information, and personal information should be encrypted both in transit and at rest. Flutter has built-in support for encryption through packages like [crypto](https://pub.dev/packages/crypto) and [encrypt](https://pub.dev/packages/encrypt). 


# Make Authentication Proof Your App
Authentication is the process of verifying the identity of a user. There are two types of authentication: client-side and server-side. Client-side authentication is done on the client side, and server-side authentication is done on the server side. Server-side authentication is more secure than client-side authentication. So we should use server-side authentication. You can use the following packages to implement server-side authentication as per your requirement.

- [firebase_auth](https://pub.dev/packages/firebase_auth)

- [oauth2](https://pub.dev/packages/oauth2)

- [jwt_decoder](https://pub.dev/packages/jwt_decoder)

As server-side authentication is more secure but it is not that local authentication is not secure. So we should use local authentication as well. For local authentication, you can use bio-metric, pins, or patterns.

![image 2](https://i.pinimg.com/736x/66/02/68/660268df52e603c798f1291f6b09110c.jpg)

local authentication is most used in banking applications or for any financial application.


## Network Calls: 

Network communication should be secured using `HTTPS` and `SSL/TLS` protocols to prevent data interception and tampering and to ensure data integrity. You can use the following packages to make network calls.

- [dio](https://pub.dev/packages/dio)
- [http](https://pub.dev/packages/http)

> Note: try to ignore making network calls from a host starting with http:// and try to make network calls from a host starting with https://

## is the Device Secure? 

Any Banking application or Financial Application needs to be installed only on a safe device. 

How can you check if a device is **Rooted** or **Jail Breaked**

You can use the following packages to check if the device is rooted or not.

- [flutter_root_detection](https://pub.dev/packages/flutter_root_detection)

- [flutter_jailbreak_detection](https://pub.dev/packages/flutter_jailbreak_detection)

## Can your App could be Reverse engineered?

![image 1](https://i.stack.imgur.com/ZeBe6.png)

yeah, it is possible to reverse-engineer the source code. So we should obfuscate the source code. see here if you distribute debug build then it is easy to reverse-engineer the source code. So we should distribute the release build. But still, it is possible to reverse engineer the source code. So we should obfuscate the source code.

- [Decompile flutter app](https://stackoverflow.com/questions/53666487/flutter-debug-apk-decompile-to-get-the-source-code)

To obfuscate the source code you can use the following command

flutter build apk --obfuscate --split-debug-info=debug_info


read more about obfuscation [here](https://flutter.dev/docs/deployment/android#obfuscate)

# Control Background snapshots:
The following package [secure_application](https://pub.dev/packages/secure_application), Secures app content visibility when users leave the app. It will hide content in the app switcher and display a frost barrier above locked content when the user gets backs. 


## Best Practices for Flutter App Development to make it more secure

- Avoid using third-party libraries: As we know flutter has a lot of packages to make our work easy but we should avoid using third-party libraries as much as possible. Because we don't know what is going on inside the package. So it is better to use only trusted packages.
before using any package we should check the package's popularity and the number of contributors. If the package has a lot of contributors and a lot of people are using it then it is safe to use it.


![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwg3meedc5djfwh1oq61.png)


- Overloading Permissions: overloading permissions is a technique to ask for more permissions than required. For example, if you want to access the camera then you should ask for camera permission only. But if you ask for storage permission also then it is called overloading permissions. So we should avoid overloading permissions as much as possible because it is a bad practice and users will not like it.

- Avoid global variables or methods: for example, if you want to load a token from local storage then you should not store it in a global variable. Because if you store it in a global variable then it is easy to access it from anywhere. So it is better to store it in a local variable.


- Perform security testing: Regularly perform security testing to identify potential vulnerabilities and ensure that security measures are effective. This can include penetration testing, code reviews, and vulnerability scanning.

- Add Bug Bounty Program: A bug bounty program is a way to encourage ethical hackers to find and report vulnerabilities in your application. This can be a great way to find vulnerabilities that you may have missed. You can also offer a reward for finding vulnerabilities. This can help you find vulnerabilities before they are exploited by malicious hackers.


- Use a Secure Coding Standard: A secure coding standard is a set of rules that developers must follow when writing code. This can help ensure that developers are writing secure code and that vulnerabilities are not introduced into the codebase. You can use a secure coding standard to ensure that developers are following best practices and that vulnerabilities are not introduced into the codebase.


- For Production release use Pipeline: For production release use pipeline. The pipeline is a set of steps that are performed to build and release the application. This can include building the application, running tests, and deploying the application. This can help ensure that the application is secure and that vulnerabilities are not introduced into the application.
Pipeline tools example GitHub actions, bitrise, circleci, Jenkins, etc.

GitHub action to build flutter app and distribute to using firebase app distribution read [here](https://dev.to/djsmk123/flutter-firebase-app-distribution-using-github-actions-1fbo).

If I forgot anything you can add it in the comment section, will add it later.


![meme 3](https://i.pinimg.com/736x/40/d7/24/40d7243dcec513224602860a72ff6b90--done-meme-friday-memes.jpg)

> Follow me:

- [GitHub](https://github.com//djsmk123)

- [LinkedIn](https://www.linkedin.com/in/md-mobin-bb928820b)

- [Twitter](https://twitter.com/smk_winner)

Flutter Resources: Beginner to Advance

Md. Mobin — Sun, 05 Feb 2023 09:38:32 +0000

Flutter Resources

   Future<void> main() await {
        final res=await getFlutterResources();
        print(res);
   }

Introduction

Flutter is a mobile app SDK for building high-performance, high-fidelity, apps for iOS and Android, from a single codebase.
Dart is a client-optimized language for fast apps on any platform.

Getting Started

Beginner

Flutter Installation:
- Android Studio
- VS Code
Dart Programming Basics: A playlist of 10 videos that will teach you the basics of Dart programming.
Flutter Programming Basics: A youtube playlist of vidoes that will teach you the basics of Flutter programming.
Navigation : Learn how to navigate between pages in Flutter using the new navigation and routing system.
Http Requests : Learn how to make http requests in Flutter.

Projects

Intermediate

Flutter RoadMap: A roadmap to learn Flutter.
Firebase Integration :
State Management
Animation Intro: A youtube playlist of videos that will teach you the basics of Flutter animations.
Animation Cheat Sheet:A cheat sheet that will help you to find the right animation for your app.
Aws Amplify : Learn how to integrate AWS Amplify with your Flutter app.
New widget everyweek: A youtube playlist of videos that will teach you how to use new widgets in Flutter.

Advanced

Advanced Navigation : Learn how to navigate between pages in Flutter using the new navigation and routing system.
Json serialization : Learn how to serialize and deserialize JSON in Flutter.
-Json Serialization
Advacned State Management
- Bloc
  - Complete Tutorial
- Riverpod
  - Complete Tutorial
Flutter Architecture : Learn how to architect your Flutter app:
- MVVM
- MVC
- MVP
- MVI
- TDD
Flutter Testing : Learn how to test your Flutter app:
Platform Channels & View: Learn how to integrate native code with Flutter.
Flutter Plugins : Learn how to create your own Flutter plugin:

Packages

Flutter Packages: A list of Flutter packages that you can use in your app.
- Google Fonts: A package that allows you to use Google fonts in your app.
- Font Awesome: A package that allows you to use Font Awesome icons in your app.
- Flutter Secure Storage: A package that allows you to store data securely in your app.
- Flutter persistant storage: A package that allows you to store data persistantly in your app.
- Dio: A package that allows you to make HTTP requests in your app (similar to axios).
- Flutter SVG: A package that allows you to use SVG images in your app.
- Flutter lotie: A package that allows you to use Lottie animations in your app.
- Flutter local notifications: A package that allows you to show local notifications in your app.
- Flutter webview: A package that allows you to use webviews in your app.
- Flutter firebase: A package that allows you to use Firebase in your app.
- websocket: A package that allows you to use websockets in your app.
- fluttertoast: A package that allows you to show toast messages in your app. | - screenutil: A package that allows you to use responsive design in your app.
- flutter image picker: A package that allows you to use image picker in your app.
- flutter device info: A package that allows you to get device info in your app.
- flutter device preview: A package that allows you to preview your app on different devices.
- logger: A package that allows you to log messages in your app.
- url launcher: A package that allows you to launch URLs in your app.
- flutter localizations: A package that allows you to use localizations in your app.
- flutter intl: A package that allows you to use internationalization in your app.
- auto route: A package that allows you to use auto routing in your app.
- google maps: A package that allows you to use google maps in your app.
- go_router: A package that allows you to use go router in your app.

Full stack Projects

Meme Generator: A meme generator app built with Flutter and Firebase.
Flutter Chat: A chat app built with Flutter and Firebase.
Flutter Ecommerce : An ecommerce app built with Flutter.
Instagram Clone: An Instagram clone app built with Flutter.
Reddit Clone: A Reddit clone app built with Flutter.

Complete Flutter Course

Flutter Course: A complete Flutter course by the Vandad Nahavandipoor on Youtube.
Flutter Bootcamp with Dart: A complete Flutter course by the Dr. Angela Yu on Udemy.
Flutter & Dart - The Complete Guide: A complete Flutter course by the Maximilian Schwarzmüller on Udemy.

Fork repo

DEV Community: Md. Mobin

Native iOS App Updater in Flutter: How Zomato, Swiggy, and Others Do It

Table of content

Introduction

App Updates on Android

How to Integrate In-App Updates into Flutter

Steps

Challenges with App Updates on iOS

How to Check for Updates

Option 1: Using the iTunes Lookup API

Option 2: Best Solution

Creating a Native App Updater for iOS

Using Platform Channels

StoreKit

Getting Started

Demo

Source code

Unlocking the Future: Passwordless Authentication(Passkey) With Flutter and Node.js

Table of Contents

Introduction

Passwordless Authentication: A New Era of Security

Benefits of Passwordless Authentication

What is passkey ?

Prerequisites

Setup Your Own WebAuthn Server

Key difference

How WebAuthn Works

Understanding Relay Servers (rpId)

Setup Server with node JS

Add support for Digital Asset Links

Setup Node server

Integrate into Flutter

Registration

Sign-In

Outputs

Conclusion

Source code :

Follow me on

WTF is Grpc? Part 3: Real time Chat ft. Flutter and Golang

Table of Contents: Part 3 - Real-Time Chat Extravaganza 🎉

Introduction to gRPC Bi-directional: The Magic of Two-Way Chats

Socket vs. gRPC Bi-directional: A Cinematic Showdown" 🍿🎥

Setup Your Server: Where the Real-Time Chat Spells Begin

Setting Up Your Chat Service:

Testing gRPC in CLI

Start with Flutter Application: Embark on Your Chatting Adventure

Outputs: The Hilarious Messages of Success

End of the series

Thank for 2k+ Followers on dev.to

Source code :

Follow me on

Wtf is Grpc? Part 2: Custom Notification(without Firebase) in Flutter and Golang.

Table of Contents: Navigating the Streaming Circus 🎪

The Streaming Showdown: gRPC Unleashed

Unary vs. Server Streaming: The Tech Battle of the Century

Let's Play with Data: The Streaming Playground

Setting Up the Golang Server: Where Code Meets Magic

Wtf is Grpc? Part 1: Authentication and Authorization in Flutter and Golang.

Table of Contents

A Quick Peek

gRPC: A Not-So-Boring Bookish and Slightly Amusing Definition

gRPC vs REST: The Iron Throne of APIs

Types of gRPC

Prerequisites

Setup Basic Project in Golang

Basic of Protocol Buffer (.proto).

Setup Server and Middlware

Connect whole and start server

Run Server

Try again

Flutter Project

Setup Project

OUTPUT

Source code

Follow me on

Hydrated Bloc: Persist your App State.

What is Hydrated Bloc and How Does it Work?

Benefits of Hydrated Bloc Over Traditional Bloc

Getting Started with Hydrated Bloc

Let's Create a Simple To-Do Application

Basic of Protocol Buffer (`.proto`).

`String.fromEnvironment()` implementation