Show/Hide Password Using Riverpod In Flutter
This article will explore the Show/Hide Password Using Riverpod In Flutter. We will implement a demo program and I would like to show how to show/hide password in TextFormField by using the Riverpod state management in your flutter applications.
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
For Hooks Riverpod:
hooks_riverpod | Flutter Package
Run this command: With Flutter: $ flutter pub add hooks_riverpod This will add a line like this to your package’s…pub.dev
Table Of Contents::
Introduction:
This demo video shows how to show/hide passwords in textformfield in flutter and how a show/hide password will work using the hooks_riverpod package in your flutter applications. We will show a user show/hide password on a textformfield by using riverpod and also use will once we click outside of the TextFormField keyboard will close. It will be shown on your device.
Demo Module ::
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
hooks_riverpod: ^latest version
Step 2: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/
Step 3: Import
import 'package:hooks_riverpod/hooks_riverpod.dart';
Step 4: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
We should adjust our main. dart file. We want to add ProviderScope to the root of our application that stores the state of the Providers.
void main() {
runApp(
const ProviderScope(child: MyApp()),
);
}
Then, we need to change StatelessWidget to ConsumerWidget. Once we do that, we must add WidgetRef inside of the build.
class MyApp extends ConsumerWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final bool showPassState = ref.watch(showPassProvider);
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.cyan,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}
Now time to create our StateProvider.
This is the provider we will use for show and hide.
final showPassProvider = StateProvider<bool>((ref) => true);
Now we will create a new class HomeScreen with extended ConsumerWidget. We will return the GestureDetector widget. In this widget, we will add a Column widget. And ad two textformfield.
class HomeScreen extends ConsumerWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final bool showPassState = ref.watch(showPassProvider);
return GestureDetector(
onTap: FocusManager.instance.primaryFocus?.unfocus,
child: Scaffold(
appBar: AppBar(
title: const Text(
"Flutter Show/Hide Password Riverpod Demo",
style: TextStyle(fontSize: 18,color: Colors.white),
),
backgroundColor: Colors.cyanAccent.withOpacity(.4),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Column(
children: [
Image.asset("assets/logo.png",height: 240,width: 280,),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
decoration: const InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: "Username",
hintText: "Username",
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
obscureText: showPassState,
decoration: InputDecoration(
suffixIcon: IconButton(
icon: showPassState
? const Icon(Icons.visibility_off)
: const Icon(Icons.visibility),
onPressed: () => ref
.read(showPassProvider.notifier)
.update((state) => !state),
),
prefixIcon: const Icon(Icons.lock),
labelText: "Password",
hintText: "Password",
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
),
],
),
),
);
}
}
Since obscureText is true in the beginning. We will set showPassState in obscureText.
TextFormField(
// hide the password. when it is true.
obscureText: showPassState,
...
Then, at that point, we ought to update our state for symbol click. To do that We involved IconButton in our suffixIcon. That’s what to do, we ought to read and afterward call the update function on the notifier, and we need to change our Icon concerning our state.
IconButton(
icon: showPassState
? const Icon(Icons.visibility_off)
: const Icon(Icons.visibility),
onPressed: () => ref
.read(showPassProvider.notifier)
.update((state) => !state),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_show_hide_password_riverpod_demo/splash_screen.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
final showPassProvider = StateProvider<bool>((ref) => true);
void main() {
runApp(
const ProviderScope(child: MyApp()),
);
}
class MyApp extends ConsumerWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final bool showPassState = ref.watch(showPassProvider);
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.cyan,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}
class HomeScreen extends ConsumerWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
final bool showPassState = ref.watch(showPassProvider);
return GestureDetector(
onTap: FocusManager.instance.primaryFocus?.unfocus,
child: Scaffold(
appBar: AppBar(
title: const Text(
"Flutter Show/Hide Password Riverpod Demo",
style: TextStyle(fontSize: 18,color: Colors.white),
),
backgroundColor: Colors.cyanAccent.withOpacity(.4),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Column(
children: [
Image.asset("assets/logo.png",height: 240,width: 280,),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
decoration: const InputDecoration(
prefixIcon: Icon(Icons.person),
labelText: "Username",
hintText: "Username",
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
obscureText: showPassState,
decoration: InputDecoration(
suffixIcon: IconButton(
icon: showPassState
? const Icon(Icons.visibility_off)
: const Icon(Icons.visibility),
onPressed: () => ref
.read(showPassProvider.notifier)
.update((state) => !state),
),
prefixIcon: const Icon(Icons.lock),
labelText: "Password",
hintText: "Password",
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
),
],
),
),
);
}
}
Conclusion:
In the article, I have explained the Show/Hide Password Using Riverpod in a flutter; you can modify this code according to your choice. This was a small introduction to Show/Hide Password Using Riverpod On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Show/Hide Password Using Riverpod in your flutter projects. We will show you what the Introduction is. Make a demo program for working on show/hide password in TextFormField Using the hooks_riverpod package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
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 a 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 you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
