How to generate password using slider in Flutter? - flutter

Question

I am creating a Password Manager Application and when user entering his details then I wont to show them a slider which generates a password in upper Password field. I have created a some code but i am not getting result as expected when user click on GENERATE PASSWORD the it show the following output.
Expected output:-
Here is my code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class PasswordInput extends StatefulWidget {
#override
_PasswordInputState createState() => _PasswordInputState();
}
class _PasswordInputState extends State<PasswordInput> {
bool _obscureText = true;
int generatePasswordHelper = 0;
String _passwordStrength = "Hello";
int _currentRangeValues = 6;
void _toggle() {
setState(() {
_obscureText = !_obscureText;
});
}
Widget WebsiteName() {
return TextFormField(
textCapitalization: TextCapitalization.words,
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: "Name of website",
labelStyle: TextStyle(fontSize: 14, color: Colors.grey.shade400),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.grey.shade300,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.red,
),
),
),
);
}
Widget WebsiteAddress() {
return TextFormField(
keyboardType: TextInputType.url,
decoration: InputDecoration(
labelText: "Website address",
labelStyle: TextStyle(fontSize: 14, color: Colors.grey.shade400),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.grey.shade300,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.red,
),
),
),
);
}
Widget UserName() {
return TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "Username / Email",
labelStyle: TextStyle(fontSize: 14, color: Colors.grey.shade400),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.grey.shade300,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.red,
),
),
),
);
}
Widget Password() {
return TextFormField(
keyboardType: TextInputType.text,
obscureText: _obscureText,
decoration: InputDecoration(
labelText: "Password",
labelStyle: TextStyle(fontSize: 14, color: Colors.grey.shade400),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.grey.shade300,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.red,
),
),
suffixIcon: IconButton(
icon: Icon(
_obscureText ? Icons.visibility : Icons.visibility_off,
color: Colors.grey.shade600,
),
onPressed: _toggle,
),
),
);
}
Widget Note() {
return TextFormField(
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.sentences,
maxLines: null,
decoration: InputDecoration(
labelText: "Note",
labelStyle: TextStyle(fontSize: 14, color: Colors.grey.shade400),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.grey.shade300,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.red,
),
),
),
);
}
Widget GeneratePassword() {
this.generatePasswordHelper = 0;
return Container(
padding: EdgeInsets.only(left: 10),
child: RichText(
text: TextSpan(
style: TextStyle(
color: Colors.deepOrange,
),
children: <TextSpan>[
TextSpan(
text: "GENERATE PASSWORD",
recognizer: TapGestureRecognizer()
..onTap = () {
setState(() {
generatePasswordHelper = 1;
});
})
]),
),
);
}
Widget PasswordGenerator() {
return Container(
color: Colors.grey.shade200,
//height: MediaQuery.of(context).size.width / 2,
width: MediaQuery.of(context).size.width / 1.1,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.only(left: 10),
child: Text(
_passwordStrength,
),
),
IconButton(
icon: Icon(Icons.close),
onPressed: () {
setState(() {
generatePasswordHelper = 0;
});
},
),
],
),
Slider(
value: _currentRangeValues.toDouble(),
min: 0,
max: 100,
divisions: 27,
onChanged: (double newValue) {
setState(() {
_currentRangeValues = newValue.round();
});
},
semanticFormatterCallback: (double newValue) {
return '${newValue.round()} dollars';
}
)
],
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
//resizeToAvoidBottomPadding: false,
appBar: AppBar(
centerTitle: true,
title: Text("Add Password"),
),
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(),
child: Container(
padding: EdgeInsets.only(left: 16, right: 16),
child: Column(
//mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 20,
),
WebsiteName(),
SizedBox(
height: 20,
),
WebsiteAddress(),
SizedBox(
height: 20,
),
UserName(),
SizedBox(
height: 20,
),
Password(),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
if (generatePasswordHelper == 0)
GeneratePassword()
else
PasswordGenerator()
],
),
SizedBox(
height: 20,
),
Note(),
SizedBox(
height: 20,
),
Container(
height: 50,
width: double.infinity,
child: FlatButton(
onPressed: () {},
padding: EdgeInsets.all(0),
child: Ink(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xffff5f6d),
Color(0xffff5f6d),
Color(0xffffc371),
],
),
),
child: Container(
alignment: Alignment.center,
constraints: BoxConstraints(
maxWidth: double.infinity, minHeight: 50),
child: Text(
"Submit",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6),
),
),
),
],
),
),
),
),
);
}
}

Answer 1

You should provide an initalValue to your password field. Init a variable with a default blank value, then when you generate a password save it in that variable and use it as the password field value
https://api.flutter.dev/flutter/widgets/FormField/initialValue.html
class _PasswordInputState extends State<PasswordInput> {
bool _obscureText = true;
int generatePasswordHelper = 0;
String _passwordStrength = "Hello";
int _currentRangeValues = 6;
String currentPassword = ""
...
Widget Password() {
return TextFormField(
keyboardType: TextInputType.text,
obscureText: _obscureText,
initialValue: currentPassword
...
When you generate a password save it in currentPassword using setState