Building a Secured Flutter Application
Demo of Application ::
Introduction
In this blog, we shall learn how to build a secured app that doesn’t allow screenshots, video recording of the app. Also when the user exits the app temporarily he has to pass local auth i.e. fingerprint to access the app content.
Safety and privacy of the user’s data have become very important, also very frequently we hide our phone when we are dialing any private content eg. Bank Details, messages, etc to protect our content from the nearby people. We can now close our app temporarily and next time anyone opens it he won’t be able to access ore content neither he can take screenshots and record video.
Table of content
Dependencies used::
We shall use secure_application package to implement the functionality of “no screenshots”, “no video recording”, “prevent unauthorized access”.
secure_application | Flutter Package
This plugin allows you to protect your application content from view on-demand Plugin in iOS is in swift Plugin in…pub.dev
To prevent unauthorized access we shall use the local_auth package to provide a gateway to get the access the app content as many times the user closes the app temporarily.
local_auth | Flutter Package
This Flutter plugin provides a means to perform local, on-device authentication of the user. This means referring to…pub.dev
Note: secure_application proves us a blur screen to prevent unauthorized access and we will use local_auth logic to pass the authentication. You will understand better while we will build logic.
Setting up our project::
Edit your Android Manifest file.
<uses-permission android:name="android.permission.USE_FINGERPRINT"/>
import:
import 'package:local_auth/auth_strings.dart';
import 'package:local_auth/local_auth.dart';
import 'package:secure_application/secure_application.dart';
Local Auth ::
Go Through the Local Authentication Blog or you can just copy source code to get started —
Local Authentication in Flutter
Local Authentication in Fluttermedium.com
Securing Your Application ::
import ‘package:secure_application/secure_application.dart’;
provides us SecureApplication, SecureGate class to protect our application. SecureGate is used inside SecureApplication.
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return SecureApplication(
child: SecureGate(
),
);
}
}
SecureGate takes a child, lockedBuilder to pass the widget that will be displayed on the screen and widget that will be displayed at the time of authentication respectively.
lockedBuilder display a blur screen and it takes a widget that will use to pass our fingerprint logic using a button.
lockedBuilder: (context, secureNotifier) => Center(
child: FlatButton(
color: Colors.cyan,
child: Text(
'UNLOCK WITH FINGERPRINT',
style: TextStyle(color: Colors.white),
),
onPressed: () async {
//local auth logic
authenticated
? secureNotifier.authSuccess(unlock: true)
: print("fail");
//local auth logic start
},
),
),
Most important part is the last line logic i.e.
authenticated
? secureNotifier.authSuccess(unlock: true)
: print("fail");
authenticated returns true if local auth is successful and false if it fails. secureNotifier is a SecureApplicationController and authSucesss() method confirms the auth is successful or not.
SecureApplicationProvider provides us various methods to control the app state. If the app is not secured then HomePage() will be returned and if it is not secured then the fingerprint authentication screen will be displayed.
This logic of child will work for the first time when the user will open the app. After that user will log in through fingerprint and during that the app will be secured through SecureApplicationProvider.of(context).secure() .
authenticated ? SecureApplicationProvider.of(context).secure()
: print("fail");
The above logic will set the app secure only if the local auth is successful.
child: Builder(builder: (context) {
return ValueListenableBuilder<SecureApplicationState>(
valueListenable: SecureApplicationProvider.of(context),
builder: (context, state, _) => state.secured
? MaterialApp(home: HomePage())
: Scaffold(
body: Center(
child: RaisedButton(
onPressed: () async {
//local auth logic
authenticated
? SecureApplicationProvider.of(context).secure()
: print("fail");
},
color: Colors.cyan,
child: Text(
'UNLOCK WITH FINGERPRINT',
style: TextStyle(color: Colors.white),
),
),
),
),
);
}),
HomePage and NewPage ::
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Secure App demo"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (_) {
return NewPage();
}));
},
child: Text("Test on new page"),
),
),
);
}
}
class NewPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("New PAGE")),
body: Center(child: Text("Hello")),
);
}
}
Main Dart File ::
https://gist.github.com/anmolseth06/083670bbf3bce03283d364cd34148b4d#file-main-dart
Github Link ::
flutter-devs/secure_flutter_App_Demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
If you find anything that could be improved please let me know, I would love to improve.💙
If this article has helped you a bit and found interesting please clap!👏
Feel free to connect with us:
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
