DEV Community: Andongwisye Mwamengo

Flutter how to override System Status bar and protect App from screenshots in Android/iOS

Andongwisye Mwamengo — Tue, 03 Sep 2024 18:48:04 +0000

When developing mobile applications, ensuring that sensitive information displayed on the screen is protected from unauthorized screenshots or screen recordings can be critical. Flutter provides the flexibility to achieve this across both Android and iOS platforms. Below, we'll walk through how to override the system status bar and implement screenshot protection in a Flutter app.

First, ensure your Flutter project is set up with the necessary dependencies. In this example, we'll focus on two key tasks:

Overriding the System Status Bar: Customizing the appearance of the status bar and navigation bar.
Protecting the App from Screenshots: Ensuring sensitive content is not captured in screenshots or screen recordings.

Overriding the System Status Bar in Flutter
In main.dart, we will create a simple app that customizes the system UI overlays.

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
      ),
      home: const SystemOverlayPage(),
    );
  }
}

class SystemOverlayPage extends StatefulWidget {
  const SystemOverlayPage({super.key});

  @override
  State<SystemOverlayPage> createState() => _SystemOverlayPageState();
}

class _SystemOverlayPageState extends State<SystemOverlayPage>
    with WidgetsBindingObserver {
  bool _isMinimized = false;
  final color = Colors.blue;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    setState(() {
      if (state == AppLifecycleState.inactive ||
          state == AppLifecycleState.paused) {
        _isMinimized = true;
      } else if (state == AppLifecycleState.resumed) {
        _isMinimized = false;
      }
    });
  }

  SystemUiOverlayStyle _currentStyle = SystemUiOverlayStyle.dark.copyWith(
    statusBarColor: Colors.blue,
    systemNavigationBarColor: Colors.blue,
  );

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: _currentStyle,
      child: _isMinimized == true
          ? Container(
              color: Colors.grey,
            )
          : Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.red,
                automaticallyImplyLeading: true,
                title: Text('Post'),
              ),
              body: Container(
                color: Colors.amber,
                width: double.infinity,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Text(
                        'Millions Using Dart Language',
                        style: Theme.of(context).textTheme.titleLarge,
                      ),
                    ),
                  ],
                ),
              ),
              bottomNavigationBar: BottomAppBar(
                color: color.withOpacity(0.95),
                shape: const CircularNotchedRectangle(),
                notchMargin: 5.0,
                clipBehavior: Clip.antiAlias,
                child: SizedBox(
                  height: kBottomNavigationBarHeight,
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      IconButton(
                        icon: const Icon(Icons.home),
                        onPressed: () {
                          setState(() {});
                        },
                      ),
                      IconButton(
                        icon: const Icon(Icons.search),
                        onPressed: () {
                          setState(() {});
                        },
                      ),
                      IconButton(
                        icon: const Icon(Icons.favorite_border_outlined),
                        onPressed: () {
                          setState(() {});
                        },
                      ),
                      IconButton(
                        icon: const Icon(Icons.account_circle_outlined),
                        onPressed: () {
                          setState(() {});
                        },
                      )
                    ],
                  ),
                ),
              ),
            ),
    );
  }
}

Protecting the App from Screenshots on iOS
To protect your Flutter app from screenshots on iOS, we need to override the AppDelegate.swift file. This file handles the application's lifecycle events in iOS. The goal is to prevent screen capture by using secure layers over the app's window.

import UIKit
import Flutter
import Foundation

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    self.window.makeSecure()
    GeneratedPluginRegistrant.register(with: self)
    self.window?.layer.contents = nil
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

extension UIWindow {
    func makeSecure() {
        let field = UITextField()
        let view = UIView(frame: CGRect(x: 0, y: 0, width: field.frame.width, height: field.frame.height))
        let image = UIImageView(image: UIImage(named: "whiteImage"))
        image.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        field.isSecureTextEntry = true
        if let window = self as UIWindow? {
            window.addSubview(field)
            view.addSubview(image)
            window.layer.superlayer?.addSublayer(field.layer)
            if let lastLayer = field.layer.sublayers?.last {
                lastLayer.addSublayer(window.layer)
            }
            field.leftView = view
            field.leftViewMode = .always
        }
    }
}

Protecting the App from Screenshots on Android
For Android, we implement screenshot protection by using a flag in the MainActivity.kt file. This file is responsible for configuring the Flutter engine for Android.

import io.flutter.embedding.android.FlutterFragmentActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant
import android.view.WindowManager.LayoutParams

class MainActivity: FlutterFragmentActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        window.addFlags(LayoutParams.FLAG_SECURE)
        GeneratedPluginRegistrant.registerWith(flutterEngine)
    }
}

Summary
This guide covered how to customize the system status bar in a Flutter application and protect your app from screenshots or screen recordings on both Android and iOS platforms.

For Flutter: We used SystemUiOverlayStyle to manage the appearance of the system status bar.
For iOS: We added a secure layer over the app window using Swift, making it impossible for the system to capture the screen.

For Android: We utilized the FLAG_SECURE flag to prevent screenshots or screen recordings.
By implementing these techniques, you can enhance the security of your Flutter application and ensure that sensitive data remains protected.

How to create and generate migrations in Typeorm 0.3+ with NestJS 9+

Andongwisye Mwamengo — Tue, 10 Oct 2023 06:17:34 +0000

Migration from Typeorm 0.2 to 0.3 has made changes in how to connect to the database and run migrations due to the fact that they deprecated ormconfig.json but you have to use dataSource which will hold the database connection.

so today I'll show you how to write generate and run migrations in NestJS 9+ with Typeorm 0.3+ with sample code.

First of all install the latest version of nestjs-cli, ts-node, typeorm, and your database like Postgres, MySQL with the following commands

$ npm i -g @nestjs/cli 
$ npm i -g typeorm
$ npm i -g ts-node

Create a project or in your existing project configure database connections and create entities for your database.

Let's get started by creating a dataSource.ts file in your project
dataSource.ts

import * as dotenv from 'dotenv';
dotenv.config();
import { DataSource } from 'typeorm';

export default new DataSource({
  type: 'postgres',
  host: process.env.DATABASE_HOST,
  port: +process.env.DATABASE_PORT,
  username: process.env.DATABASE_USER,
  password: process.env.DATABASE_PASSWORD,
  database: process.env.DATABASE_DB,
  synchronize: false,
  dropSchema: false,
  logging: false,
  logger: 'file',
  entities: ['dist/**/*.entity{.ts,.js}'],
  migrations: ['src/migrations/**/*.ts'],
  subscribers: ['src/subscriber/**/*.ts'],
  migrationsTableName: 'migration_table',
});

Add the following code to your app.module.ts file with the following code
app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { TypeOrmModule } from '@nestjs/typeorm';
import { ConfigModule, ConfigService } from '@nestjs/config';

@Module({
  imports: [
    ConfigModule.forRoot({ isGlobal: true }),
    TypeOrmModule.forRootAsync({
      imports: [ConfigModule],
      useFactory: (configService: ConfigService) => ({
        type: 'postgres',
        host: configService.get('DATABASE_HOST'),
        port: configService.get('DATABASE_PORT'),
        username: configService.get('DATABASE_USER'),
        password: configService.get('DATABASE_PASSWORD'),
        database: configService.get('DATABASE_DB'),
        entities: ['dist/**/*.entity{.ts,.js}'],
        synchronize: false,
        autoLoadEntities: true,
        migrations: [__dirname + '/migrations/**/*{.ts,.js}'],
        seeds: [__dirname + '/seeds/**/*{.ts,.js}'],
        factories: [__dirname + '/factories/**/*{.ts,.js}'],
        cli: {
          migrationsDir: __dirname + '/migrations/',
        },
      }),
      inject: [ConfigService],
    }),
  ],
  controllers: [AppController],
  providers: [],
})
export class AppModule {}

Update the package.json to include the following migrations commands
package.json

 "scripts": {
    ....
    "typeorm": "typeorm-ts-node-commonjs",
    "schema:sync": "npx typeorm-ts-node-commonjs schema:sync",
    "typeorm:cache": "npx typeorm-ts-node-commonjs cache:clear",
    "schema:drop": "npx typeorm-ts-node-commonjs -d ./src/database/data-source.ts",
    "migration:create": "typeorm migration:create ./src/migrations/schema-update",
    "migration:generate": "npx typeorm-ts-node-commonjs migration:generate ./src/migrations/schema-update -d ./src/database/data-source.ts",
    "migration:show": "npx typeorm-ts-node-commonjs migration:show -d ./src/database/data-source.ts",
    "migration:run": "npx typeorm-ts-node-commonjs migration:run -d  ./src/database/data-source.ts",
    "migration:revert": "npx typeorm-ts-node-commonjs migration:revert -d ./src/database/data-source.ts"
  }

Once you are done with the setup above you can run the following commands in your project root

npm run migration:create This will create an empty migration file where you can write your SQL in both UP and Down functions to either schema drop or create the schema.
npm run migration:generate This will generate SQL from your entities and you can find them inside migrations folder as per data-source.ts configuration.
npm run migration:run This will populate your database with the new database schema as per the migration file generated in 2, Now you have updated your database schema.

Note: Make sure you set synchronize: false in the production project otherwise if there a schema changes in your code, you might lose data in your existing database.

Feel free to check typeorm typeorm.io and nestjs docs https://docs.nestjs.com/, for more information.

I want to give you one reason why we have dataSource.ts database configurations and why we have another database connection inside app.module.ts?.
Migration runs without NestJS runtime. NestJS will use app.module.ts database connection and migration will use dataSource.ts

How to write a Data Seeder Helper in NestJS 9+ with Typeorm 0.3+

Andongwisye Mwamengo — Tue, 16 May 2023 04:52:14 +0000

I have been looking for different solutions that can help how to seed data inside database using a helper function without using any third part package.

After struggling with different methods and solutions then I come up with this solutions. It works fine without any third part package.

Let's dive deep into code
Assuming you generated your application with NestJS CLI 9

Your App module will look like below
app.module.ts

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: 'localhost',
      port: 3306,
      username: 'root',
      password: 'root',
      database: 'test',
      entities: ['dist/**/*.entity{.ts,.js}'],
      synchronize: true,
      autoLoadEntities: true,
    }),
  ],
})
export class AppModule {}

Then create a seeder helper function like this below, Feel free to add more data as you want.
seed-data.ts

import { DataSource, In } from 'typeorm';
import { Permission } from '../../modules/permissions/entities/permission.entity';
import { Role } from '../../modules/permissions/entities/role.entity';
import { Auth } from '../../modules/users/entities/auth.entity';
import { PERMISSIONS_LIST } from './data/permissions.seeders';
import { ROLE_LIST } from './data/roles.seeders';

export async function seedData(dataSource: DataSource): Promise<void> {

  const permissionRepository = dataSource.getRepository(Permission);
  const roleRepository = dataSource.getRepository(Role);

  const permissionsList = PERMISSIONS_LIST;
  for (const permission of permissionsList) {
    let _permission = permissionRepository.create(
      permission as unknown as Permission,
    );
    await permissionRepository.save(_permission);
  }

  const rolesList = ROLE_LIST;
  for (const role of rolesList) {
    let _permissions = await permissionRepository.findBy({
      id: In(role.permissions),
    });
    let _roleItem = {
      name: role.name,
      guard: role.guard,
      code: role.code,
    };
    let _role = roleRepository.create({
      ..._roleItem,
      permissions: _permissions,
    });
    await roleRepository.save(_role);
  }
}

Note that ROLE_LIST and PERMISSION_LIST are sample data in an array format like
data.ts

import { GuardType } from "src/modules/permissions/entities/guard-type.enum";

export const ROLE_LIST = [
  {
    name: "admin",
    guard: GuardType.ADMIN,
    code: "admin",
    permissions: [1, 2]
  },
  {
    name: "user",
    guard: GuardType.USER,
    code: "user",
    permissions: [2]
  },
  {
    name: "test",
    guard: GuardType.TEST,
    code: "test",
    permissions: [2]
  }
];

Then write a helper function to boostrap your app using NestFactory function like below
seed.helper.ts

import { DataSource } from 'typeorm';
import { seedData } from './seed-data';
import { AppModule } from '../../app.module';
import { NestFactory } from '@nestjs/core';

async function runSeeder() {
  const app = await NestFactory.create(AppModule);
  const dataSource = app.get(DataSource);
  await seedData(dataSource);
  await app.close();
}
runSeeder();

Then final add the command to package.json file so that you can execute a runSeeder function inside package.json.
package.json

"scripts": {
    "build": "nest build",
    ...
    "data:sync": "ts-node -r tsconfig-paths/register ./src/seeders/seed.helper.ts"

Now everything is now set just run npm run data:sync now data should be populated in the database.

Feel free to leave a comment in this post below.

How to write a base service for your NestJS REST API using Typeorm Version 0.3+

Andongwisye Mwamengo — Wed, 10 May 2023 18:44:00 +0000

I have been looking for different ways of writing a base service in NestJS application for all shared database CRUD and others operations using Typeorm v0.3. I din't find any article relating to this case. Therefore I decided to write this blogpost.

Migration from Typeorm v0.2 to v0.3 has brought alot of changes when writting some of the database queries. Feel free to check the migrations guide.

We had a simple way of writing a base service for all CRUD operations in NestJS using typeorm in v0.2. Since typeorm introduced typeorm v0.3 there are couple of deprecations that happened such that you wont be able to use the approach from v0.2 of typeorm.

Today I'll be showing you and writing code on how to implement base service for all crud operations and other shared methods that you want to share across your application.

Let me start with the old way with typeorm v0.2

import { DeleteResult, Repository } from 'typeorm';
import { QueryDeepPartialEntity } from 'typeorm/query-builder/QueryPartialEntity';
import { HttpException, HttpStatus } from '@nestjs/common';

export class BaseService<T> {
  constructor(private readonly repository: Repository<T>) {}

  async findAll(): Promise<T[]> {
    return await this.repository.find();
  }

  async findOneById(id: FindOneOptions<T>): Promise<T> {
    return await this.repository.findOne({ where: { id } });
  }

  async create(data: DeepPartial<T> ) {
   return await this.repository.save(data);
  }

  async update(id: FindConditions<T>, partialEntity: QueryDeepPartialEntity<T>) {
   return await this.repository.update(id, partialEntity);
  }

  async delete(id: FindConditions<T>): Promise<DeleteResult> {
    return await this.repository.delete(id);
  }
}

The below code show how to implement it with typeorm v0.3 using dataSource since the main changes we encounter is due to the fact that typeorm deprecated connection in v0.2 and added a dataSource to typeorm v0.3

This is the first way of writing a base service

import { DataSource, FindOneOptions, Repository } from 'typeorm';
import { EntityTarget } from 'typeorm/common/EntityTarget';
import { QueryDeepPartialEntity } from 'typeorm/query-builder/QueryPartialEntity';

export class GenericRepository<T> extends Repository<T> {
  constructor(target: EntityTarget<T>, dataSource: DataSource) {
    super(target, dataSource.createEntityManager());
  }

  async findActive(options: FindOneOptions<T>): Promise<T[]> {
    return await this.find(options);
  }

  async findByEmail(options: FindOneOptions<T>): Promise<T> {
    return this.findOne(options);
  }
}

To use the above base service write the following code

import { Injectable } from '@nestjs/common';
import { DataSource, EntityTarget } from 'typeorm';
import { User } from './user.entity';
import { BaseService } from './base.service';

@Injectable()
export class UserService extends BaseService<User> {
  constructor(
    @InjectRepository(DataSource)
    private readonly dataSource: DataSource,
  ) {
    super(dataSource, User);
  }
}

You can also decide to write the code in the following style also.

import { Repository } from 'typeorm';
import { EntityTarget } from 'typeorm/common/EntityTarget';
import { QueryDeepPartialEntity } from 'typeorm/query-builder/QueryPartialEntity';

export abstract class BaseService<T> {
  protected constructor(protected readonly repository: Repository<T>) {}

  async create(entity: T): Promise<T> {
    return await this.repository.save(entity);
  }

  async findOne(options: FindOneOptions<T>): Promise<T> {
    return this.repository.findOne(options);
  }

  async findAll(): Promise<T[]> {
    return this.repository.find();
  }

  async update(id: number, options: FindOneOptions<T>, entity: T): Promise<T> {
    await this.repository.update(id, entity as QueryDeepPartialEntity<T>);
    return this.findOne(options);
  }

  async delete(id: number): Promise<void> {
    await this.repository.delete(id);
  }
}

To use the above base service write the following code

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { User } from './user.entity';
import { BaseService } from './base.service';

@Injectable()
export class UserService extends BaseService<User> {
  constructor(
    @InjectRepository(User)
    private readonly userRepository: Repository<User>,
  ) {
    super(userRepository);
  }
}

Feel free to checkout migrations from Typeorm version 0.2 to 0.3 via Migration guide from v0.2.x to v0.3.x · Issue.

If you have any issue or comment feel free to leave it in this post.