Flutter's encrypted and decrypted data

original

https://medium.com/flutterdevs/explore-encrypt-decrypt-data-in-flutter-576425347439

refer to

• https://pub.flutter-io.cn/packages/encrypt

text

Learn how to encrypt and decrypt data in your Flutter app

Flutter is a portable UI toolkit. In other words, it is a comprehensive application software development kit (SDK), including widgets and tools. Flutter is a free and open source tool for developing mobile, desktop and web applications. Flutter is a cross-platform development tool. This means that with the same code, we can create IOs and Android applications at the same time. This is the best way to save time and resources throughout the process. In this regard, hot reload is gaining support from mobile developers. Allows us to quickly view the changes implemented in the code through hot reinstallation.

In this article, we will explore using the encryption package Flutter to encrypt and decrypt data files. With the help of this software package, users can easily encrypt and decrypt data. So let's get started.

Encryption is the process of converting data into encoded (cryptographic) data form. If any unauthorized person or entity gains access, they will not be able to read it. Before sending a file, it is necessary to protect the file on each mobile application or website and transmit the data on the network to prevent unauthorized recipients from accessing its data. It helps protect private and sensitive information, and can improve the security of communication between client applications and servers.

Decryption is the process of converting encoded data from the background into normal (normal) data form. In this article, we will show how to encrypt input data and then decrypt it back to its normal form.

Demo module:

Encrypted data type:

We will see 3 different types of algorithms for Flutter to encrypt and decrypt data.

1- AES algorithm:

(Advanced Encryption Standard) has become the preferred encryption algorithm for governments, financial institutions and security-conscious companies around the world. The National Security Agency (NSC) uses it to protect the country's "top secret" information.

2- Fernet Algorithm:

Fernet is an asymmetric encryption method, which can ensure that the encrypted message cannot be manipulated/read without a key. It uses url security encoding for the key. Fernet also uses 128-bit AES in CBC mode and PKCS7 padding, and HMAC uses SHA256 for authentication. This IV was created by os. random(). All of these are needed for good software.

3- Salsa algorithm:

Salsa20 is a password submitted to the eSTREAM project. It has been running from 2004 to 2008. The project aims to promote the development of stream passwords. This algorithm is considered to be a well-designed and efficient algorithm. There are no known effective attacks against the Salsa20 crypto family.

Code steps:

Let's start with the code implementation. To implement the following items, you need an encryption package integrated into your Flutter application.

Step 1: Add dependency

Add dependencies to the pubspec ーyaml file.

• encrypt: ^ 5.0.1

Now in your Dart code, you can use the following to import this package.

import 'package:crypto/crypto.dart';

Step 2: I created a dart file to define AES, Fernet and Salsa algorithms.

There are two methods for this file, using AES algorithm to encrypt and decrypt data.

class EncryptData{
_//for AES Algorithms_ static Encrypted? _encrypted_;
  static var _decrypted_;


 static _encryptAES_(plainText){
   final key = Key.fromUtf8('my 32 length key................');
   final iv = IV.fromLength(16);
   final encrypter = Encrypter(AES(key));
    _encrypted_ = encrypter.encrypt(plainText, iv: iv);
   print(_encrypted_!.base64);
 }

  static _decryptAES_(plainText){
    final key = Key.fromUtf8('my 32 length key................');
    final iv = IV.fromLength(16);
    final encrypter = Encrypter(AES(key));
    _decrypted_ = encrypter.decrypt(_encrypted_!, iv: iv);
    print(_decrypted_);
  }
}

This file has 2 methods to encrypt and decrypt data using Salsa algorithm.

_//for Fernet Algorithms
_static Encrypted? _fernetEncrypted_;
static var _fernetDecrypted_; static _encryptFernet_(plainText){
    final key = Key.fromUtf8('my32lengthsupersecretnooneknows1');
    final iv = IV.fromLength(16);
    final b64key = Key.fromUtf8(base64Url.encode(key.bytes));
    final fernet = Fernet(b64key);
    final encrypter = Encrypter(fernet);
    _fernetEncrypted_ = encrypter.encrypt(plainText);
    print(_fernetEncrypted_!.base64); _// random cipher text_ print(fernet.extractTimestamp(_fernetEncrypted_!.bytes));
  }

  static _decryptFernet_(plainText){
    final key = Key.fromUtf8('my32lengthsupersecretnooneknows1');
    final iv = IV.fromLength(16);
    final b64key = Key.fromUtf8(base64Url.encode(key.bytes));
    final fernet = Fernet(b64key);
    final encrypter = Encrypter(fernet);
    _fernetDecrypted_ = encrypter.decrypt(_fernetEncrypted_!);
    print(_fernetDecrypted_);
  }

Step 3: Now finally call the above method in the Dart file on the main screen.

In this file, I have designed a card, 1 text field and 2 buttons, and 2 text views to display the results of encryption and decryption. Below are screenshots and code snippets.

Full code:

import 'package:encrypt_data_demo/encrypt_data.dart';
import 'package:flutter/material.dart';



class HomeView extends StatefulWidget {

  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  TextEditingController? _controller=TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors._orange_,
      appBar: AppBar(
        title: Text("Encrypt and Decrypt Data"),
      ),
      body: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.only(top:10,bottom: 10),
          child: _buildBody(),
        ),
      ),
    );
  }

 Widget _buildBody() {
    return Container(
      height: 280,
      width: MediaQuery._of_(context).size.width,
      margin: EdgeInsets.only(left: 10,right: 10),
      child: Card(
         elevation: 2,
        child:  Container(
          padding: EdgeInsets.only(left: 15,right: 15,top:
15,bottom: 15),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                child: TextField(
                  controller: _controller,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Enter Text',
                  ),
                ),
              ),
              SizedBox(height: 30),
              Text("EncryptText : ${EncryptData._aesEncrypted_!=null?EncryptData._aesEncrypted_?.base64:''}",
                maxLines: 2,
                style:TextStyle(
                    color: Colors._black_,
                    fontSize: 16
                ),
                overflow: TextOverflow.ellipsis,
              ),
              SizedBox(height: 10,),
              Expanded(
                child: Text("DecryptText : ${EncryptData._aesDecrypted_!=null?EncryptData._aesDecrypted_:''}",
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style:TextStyle(
                        color: Colors._black_,
                        fontSize: 16
                    )
                ),
              ),
              SizedBox(height: 20,),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  ElevatedButton(
                    style: ElevatedButton._styleFrom_(
                      primary: Colors._blue_, _// background_ onPrimary: Colors._white_,
                    ),
                    onPressed: () {
                      setState(() {
                        EncryptData._encryptAES_(_controller!.text);
                      });
                    },
                    child: Text('Encryption'),
                  ),
                  ElevatedButton(
                    style: ElevatedButton._styleFrom_(
                      primary: Colors._blue_, _// background_ onPrimary: Colors._white_,
                    ),
                    onPressed: () {
                      setState(() {
                        EncryptData._decryptAES_(_controller!.text);
                      });
                    },
                    child: Text('Decryption'),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
 }
}

Concluding remarks:

In this article, I explained the basic overview of Flutter encrypted data, you can modify this code according to your choice. This is a small introduction to user interaction for encrypting and decrypting data. From my side, it works using Flutter.

I hope this blog will provide you with sufficient information to try to explore, encrypt and decrypt data in your Flutter project.

---

© Cat brother

• https://ducafecat.tech/
• https://github.com/ducafecat
• WeChat group ducafecat
• b station https://space.bilibili.com/404904528

Past

Open source

GetX Quick Start

https://github.com/ducafecat/getx_quick_start

News client

https://github.com/ducafecat/flutter_learn_news

strapi manual translation

https://getstrapi.cn

WeChat discussion group ducafecat

Series collection

Translation

https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/

Open source project

https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/

Dart programming language basics

https://space.bilibili.com/404904528/channel/detail?cid=111585

Getting started with Flutter zero foundation

https://space.bilibili.com/404904528/channel/detail?cid=123470

Flutter actual combat from scratch news client

https://space.bilibili.com/404904528/channel/detail?cid=106755

Flutter component development

https://space.bilibili.com/404904528/channel/detail?cid=144262

Flutter Bloc

https://space.bilibili.com/404904528/channel/detail?cid=177519

Flutter Getx4

https://space.bilibili.com/404904528/channel/detail?cid=177514

Docker Yapi

https://space.bilibili.com/404904528/channel/detail?cid=130578