Value from FormKey is always empty on Flutter - flutter

I have a simple Screen class dart and a controller for this Screen here is the form:
Container(
height: screenHeight * 0.8,
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image(
image: AssetImage('assets/images/cumpra_logo_dark.png'),
height: screenHeight * 0.08,
),
SizedBox(
height: screenHeight * 0.04,
),
Container(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Form(
key: _con.formKey,
child: Column(
children: <Widget>[
Container(
width: screenWidth * 0.7,
child: TextFormField(
style: TextStyle(
fontSize: screenHeight * 0.03,
color: Colors.black,
),
inputFormatters: [
UpperCaseTextFormatter(),
],
textAlign: TextAlign.center,
decoration: InputDecoration(
filled: true,
fillColor: Color(0XFFe0e0e0),
hintText: 'Código da Empresa',
contentPadding: const EdgeInsets.only(
left: 14.0,
bottom: 8.0,
top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white),
borderRadius:
BorderRadius.circular(25.7),
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.white),
borderRadius:
BorderRadius.circular(25.7),
),
),
validator: (value) {
if (value.isEmpty) {
return 'Campo obrigatório';
}
if (value.length < 6) {
return 'Mínimo de 6 dígitos';
}
return null;
},
onChanged: (String text) {
_con.userDataTemp['pin'] = text;
},
),
),
SizedBox(
height: screenHeight * 0.04,
),
Container(
width: screenWidth * 0.7,
child: TextFormField(
keyboardType: TextInputType.number,
obscureText: true,
autofocus: false,
style: TextStyle(
fontSize: screenHeight * 0.03,
color: Colors.black,
),
textAlign: TextAlign.center,
decoration: InputDecoration(
filled: true,
fillColor: Color(0XFFe0e0e0),
hintText: 'Número de Acesso',
contentPadding: const EdgeInsets.only(
left: 14.0,
bottom: 8.0,
top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white),
borderRadius:
BorderRadius.circular(25.7),
),
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.white),
borderRadius:
BorderRadius.circular(25.7),
),
),
validator: (value) {
if (value.isEmpty) {
return 'Campo obrigatório';
}
if (value.length < 6) {
return 'Mínimo de 6 dígitos';
}
return null;
},
onChanged: (String text) {
_con.userDataTemp['code'] = text;
},
),
),
SizedBox(
height: screenHeight * 0.06,
),
Container(
width: screenWidth * 0.7,
child: RaisedButton(
onPressed: _con.signIn,
child: Text('LOGAR'),
padding: EdgeInsets.symmetric(
horizontal: 10.0,
vertical: 12.0,
),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(30.0),
),
color: ThemeColor.AppSecundaryColor,
textColor: Colors.white,
elevation: 5,
),
),
SizedBox(
height: 30.0,
),
],
),
),
],
),
),
),
],
),
)
I've already put the KEY here key: _con.formKey, _con reference from my controller here is the code:
LoginController(context) {
this.context = context;
formKey = new GlobalKey<FormState>();
this.scaffoldKey = new GlobalKey<ScaffoldState>();
utilService = Provider.of<UtilService>(context, listen: false);
sharedService = Provider.of<SharedService>(context, listen: false);
userService = Provider.of<UserService>(context, listen: false);
authService = Provider.of<AuthService>(context, listen: false);
}
Why always when i press the button "LOGAR" the code go to this validate:
validator: (value) {
if (value.isEmpty) {
return 'Campo obrigatório';
}
if (value.length < 6) {
return 'Mínimo de 6 dígitos';
}
return null;
},
onChanged: (String text) {
_con.userDataTemp['pin'] = text;
},
But always this value is EMPTY, what I'm missing?

To get the values out of the FormBuilder you must first save the form builder, to do so you must consider doing something like this.
Map json = formKey.currentState.saveAndValidate();

Related

How to add border shadow to a TextField in Flutter

how to add border or elevation to a textfield in flutter
I wanted to give a shadow to my text field.
After some digging i found the answer to my question.
here is my code :
// This is a single TextField
// Wrap your TextField around Material Widget and give border radius and // elevaiton to Material Widget.
Padding(
padding: const EdgeInsets.only(left: 16, right: 16, bottom: 8),
child: Container(
height: 50,
width: 250,
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 8,
child: TextField(
decoration: InputDecoration(
labelText: 'First Name',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20)
)
),
),
),
),
),
Blockquote
// IF YOU WANT TO USE THE DESIGN IN THE IMAGE THEN USE THIS CODE ://
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:signup_figma/Screens/signin_personal_details_screen.dart';
import '../Widgets/otp_pin_input_field.dart';
class SignUpScreen extends StatefulWidget {
const SignUpScreen({Key? key}) : super(key: key);
#override
State<SignUpScreen> createState() => _SignUpScreenState();
}
class _SignUpScreenState extends State<SignUpScreen> {
bool mobileNumberVerify = false;
bool emailVerify = false;
bool checkBoxValue = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView(
children: [
SizedBox(
child: Padding(
padding: const EdgeInsets.only(top: 60, left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
/////// SignUp///////////
Text(
"Sign up",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
),
SizedBox(
height: 8,
),
Text(
"Create an account to get started",
style: TextStyle(fontSize: 18),
),
SizedBox(
height: 20,
)
],
),
),
),
Padding(
padding: const EdgeInsets.only(left: 16, right: 16, bottom: 8),
child: Container(
height: 50,
width: 250,
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 8,
child: TextField(
decoration: InputDecoration(
labelText: 'First Name',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20)
)
),
),
),
),
),
Padding(
padding:
const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
child: Container(
height: 50,
width: 250,
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 8,
child: TextFormField(
decoration: InputDecoration(
// fillColor: Colors.white,
// filled: true,
labelText: 'Last Name',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20)),
),
),
),
),
),
Padding(
padding:
const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
child: SizedBox(
width: 250,
height: 50,
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 8,
child: TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Mobile Number',
suffixIcon: Padding(
padding: EdgeInsets.only(right: 15, top: 15),
child: InkWell(
onTap: () {
print("Clicked");
setState(() {
mobileNumberVerify = true;
});
},
child: Text("verify")),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20))),
),
),
),
),
Padding(
padding:
const EdgeInsets.only(left: 36, right: 16, top: 8, bottom: 8),
child: SizedBox(
child: Text(
"Resend OTP",
style: TextStyle(color: Colors.deepPurpleAccent),
),
),
),
mobileNumberVerify
? OtpPinInputField()
: SizedBox(
height: 2,
),
Padding(
padding:
const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
child: SizedBox(
width: 250,
height: 50,
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 8,
child: TextField(
decoration: InputDecoration(
labelText: ' Email',
suffixIcon: Padding(
padding: EdgeInsets.only(right: 15, top: 15),
child: InkWell(
onTap: () {
print("Clicked");
setState(() {
emailVerify = true;
});
},
child: Text("verify")),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20))),
),
),
),
),
const Padding(
padding:
EdgeInsets.only(left: 36, right: 16, top: 8, bottom: 8),
child: SizedBox(
child: Text(
"Resend OTP",
style: TextStyle(color: Colors.deepPurpleAccent),
),
),
),
emailVerify
? OtpPinInputField()
: SizedBox(
height: 2,
),
Row(
children: [
Checkbox(
value: checkBoxValue,
onChanged: (value) {
setState(() {
this.checkBoxValue = value!;
});
}),
Container(
width: 320,
child: RichText(
text: const TextSpan(
children: <TextSpan>[
TextSpan(
text: "I've read and agree with the ",
style: TextStyle(color: Colors.black)),
TextSpan(
text: 'Terms & Conditions, Privacy Policy',
style: TextStyle(color: Colors.deepPurpleAccent)),
TextSpan(text: ' & '),
TextSpan(
text: 'End User License Agreement',
style: TextStyle(color: Colors.deepPurpleAccent)),
],
),
),
),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: MaterialButton(
height: 50,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PersonalDetailsScreen()),
);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(11)),
color: Colors.deepPurpleAccent,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PersonalDetailsScreen()),
);
},
child: const Text(
"Register",
style: TextStyle(color: Colors.white),
),
),
),
)
],
),
),
);
}
}
Blockquote
Create a file otpPininputfield.dart and paste this code :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class OtpPinInputField extends StatelessWidget {
const OtpPinInputField({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
child: Padding(
padding: const EdgeInsets.only(left: 35,right: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SizedBox(
height: 45,
width: 45,
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15)
)
),
onChanged: (value){
if(value.length == 1){
FocusScope.of(context).nextFocus();
}
},
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly
],
),
),
SizedBox(
height: 45,
width: 45,
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15)
)
),
onChanged: (value){
if(value.length == 1){
FocusScope.of(context).nextFocus();
}
},
style: Theme.of(context).textTheme.headline6,
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly
],
),
), SizedBox(
height: 45,
width: 45,
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15)
)
),
onChanged: (value){
if(value.length == 1){
FocusScope.of(context).nextFocus();
}
},
style: Theme.of(context).textTheme.headline6,
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly
],
),
), SizedBox(
height: 45,
width: 45,
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15)
)
),
onChanged: (value){
if(value.length == 1){
FocusScope.of(context).nextFocus();
}
},
style: Theme.of(context).textTheme.headline6,
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
FilteringTextInputFormatter.digitsOnly
],
),
),
],
),
),
),
);
}
}
You can try this way.....
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey[400]),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey[600]),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red[600]),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red[800]),
),
contentPadding: EdgeInsets.all(12.0),
fillColor: Colors.white,
),
style: TextStyle(
color: Colors.grey[800],
fontSize: 16.0,
),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey[300],
blurRadius: 10.0,
spreadRadius: 5.0,
offset: Offset(5.0, 5.0),
),
],
),
),

How do I create elevatedbuttons over image in flutter?

I have a boxdecoration with an image as my background, how do I place elevatedbuttons over it, like windows icons in a desktop?
I managed to get my result using a stack for my background with 02 positioned and then a scaffold for the foreground with the remaining widgets.
class _IngredientesState extends State<Ingredientes> {
#override
Widget build(BuildContext context) {
final Ingrediente ing = Ingrediente();
if (_loading == true) {
ing.init();
_loading = false;
}
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
return Stack(
children: [
Positioned(
child: SizedBox(
width: width,
child: Container(
color: cBakcGroundColor,
width: width,
height: height,
),
),
),
Positioned(
top: 100,
child: Opacity(
opacity: 0.2,
child: Image(
width: width,
image: const AssetImage(cBackgroundLogo),
),
),
),
const Foreground()
],
);
}
}
class Foreground extends StatefulWidget {
const Foreground({
Key? key,
}) : super(key: key);
#override
State<Foreground> createState() => _ForegroundState();
}
class _ForegroundState extends State<Foreground> {
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 18),
child: DefaultTextStyle(
style: GoogleFonts.oxygen(
color: Colors.black, fontSize: 20, fontWeight: FontWeight.w500),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 50),
const Text('Nome do Ingrediente'),
const SizedBox(height: 5),
TextField(
controller: _ingrediente,
decoration: InputDecoration(
border: outlineInputBorder,
enabledBorder: outlineInputBorder,
focusedBorder: outlineInputBorder,
hintText: 'Ex.: Farinha de trigo.'),
),
const SizedBox(height: 20),
const Text('Quantidade'),
const SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width * 0.5,
child: TextField(
controller: _iquantidade,
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
textAlign: TextAlign.right,
decoration: InputDecoration(
border: outlineInputBorder,
enabledBorder: outlineInputBorder,
focusedBorder: outlineInputBorder,
),
),
),
Container(
width: width * 0.2,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
border: Border.all(
color: cBorderColor,
style: BorderStyle.solid,
width: 0.80),
),
child: DropdownButton(
value: unidadeSelecionada,
icon: const Icon(Icons.keyboard_arrow_down),
items: unidadeIngrediente.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
unidadeSelecionada = newValue!;
});
},
),
),
),
],
),
const SizedBox(height: 20),
const Text('Valor pago'),
const SizedBox(height: 5),
Row(
children: [
Container(
width: width * 0.5,
child: TextField(
controller: _ipreco,
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
textAlign: TextAlign.right,
decoration: InputDecoration(
border: outlineInputBorder,
enabledBorder: outlineInputBorder,
focusedBorder: outlineInputBorder,
),
),
)
],
)
],
),
),
),
floatingActionButton: BuildSaveButton(context),
);
}
}

how to make layout center vertical in flutter like in android

Like in android for layout we apply center vertical same way i m trying in flutter to make center vertical. so that entire widget view will be moved to center vertical. How to achieve this in flutter.
I have tried same using sizebox. How to make layout center vertical in flutter like in android.
Code as below:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:login_app/sso.dart';
import 'package:flutter_svg/flutter_svg.dart';
class Otp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return OtpPage();
}
}
class OtpPage extends State<Otp> {
String assetNameArrow = 'images/ic_back.svg';
String assertOtp = 'images/otp_sms.svg';
int backspaceClick = 0;
String otpError = "";
bool isHideOTP = true;
bool isTextFiledFocus = false;
String otp1 = "";
String otp2 = "";
String otp3 = "";
String otp4 = "";
String otp5 = "";
String otp6 = "";
FocusNode focusNodeOtp1 = FocusNode();
FocusNode focusNodeOtp2 = FocusNode();
FocusNode focusNodeOtp3 = FocusNode();
FocusNode focusNodeOtp4 = FocusNode();
FocusNode focusNodeOtp5 = FocusNode();
FocusNode focusNodeOtp6 = FocusNode();
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
resizeToAvoidBottomInset:
false, //to avoid floating container on keyboard, use this
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: SafeArea(
child: Column(children: [
Padding(
padding: const EdgeInsets.only(left: 20, top: 20, bottom: 20),
child: Align(
alignment: Alignment.topLeft,
child: SvgPicture.asset(
assetNameArrow,
width: 8,
height: 19,
alignment: Alignment.topLeft,
),
),
),
SizedBox(
width: 70.0,
height: 70.0,
),
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 16),
child: Align(
alignment: Alignment.topLeft,
child: SvgPicture.asset(
assertOtp,
width: 61,
height: 61,
alignment: Alignment.topLeft,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 16.0, right: 16.0),
child: Container(
child: Text('We need to make\nsure its you',
maxLines: 2,
style: TextStyle(
fontFamily: 'Circular_Std_Bold',
fontSize: 24.0,
color: Color(0xFF2E2E2E),
)),
),
),
),
],
),
),
Padding(
padding:
const EdgeInsets.only(left: 90.0, right: 16.0, top: 20.0),
child: Text(
'Please enter the OTP (One-Time Password) sent to your registered mobile number (ending in 6380). Do not share your OTP with anyone else.',
style: TextStyle(
fontFamily: 'Soleil_Regular',
fontSize: 14.0,
fontStyle: FontStyle.normal,
color: Color(0xFF2E2E2E),
)),
),
SizedBox(
width: 60.0,
height: 60.0,
),
Container(
// first
padding: EdgeInsets.all(16.0),
child: Row(children: [
Container(
margin: EdgeInsets.only(left: 16, right: 5),
//first
width: 46.0,
height: 48.0,
child: TextField(
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
textAlign: TextAlign.center,
// obscureText: isHideOTP,
enableSuggestions: false,
autocorrect: false,
autofocus: true,
focusNode: focusNodeOtp1,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide:
BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide:
BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp1 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp2.requestFocus();
}
},
),
),
Container(
margin: EdgeInsets.only(left: 5, right: 5),
// secound
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {
if (event.logicalKey ==
LogicalKeyboardKey.backspace &&
otp2 == "") {
backspaceClick = backspaceClick + 1;
if (backspaceClick >= 2) {
focusNodeOtp1.requestFocus();
}
}
},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: focusNodeOtp2,
// obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp2 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp3.requestFocus();
}
},
)),
),
Container(
// Third
margin: EdgeInsets.only(left: 5, right: 5),
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {
if (event.logicalKey ==
LogicalKeyboardKey.backspace &&
otp3 == "") {
backspaceClick = backspaceClick + 1;
if (backspaceClick >= 2) {
focusNodeOtp2.requestFocus();
}
}
},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: focusNodeOtp3,
//obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp3 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp4.requestFocus();
}
},
)),
),
Container(
margin: EdgeInsets.only(left: 5, right: 5),
// Fourth
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {
if (event.logicalKey ==
LogicalKeyboardKey.backspace &&
otp4 == "") {
backspaceClick = backspaceClick + 1;
if (backspaceClick >= 2) {
focusNodeOtp3.requestFocus();
}
}
},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: focusNodeOtp4,
//obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp4 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp5.requestFocus();
}
},
)),
),
Container(
// Fifth
margin: EdgeInsets.only(left: 5, right: 5),
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {
if (event.logicalKey ==
LogicalKeyboardKey.backspace &&
otp5 == "") {
backspaceClick = backspaceClick + 1;
if (backspaceClick >= 2) {
focusNodeOtp4.requestFocus();
}
}
},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: focusNodeOtp5,
// obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp5 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp6.requestFocus();
}
},
)),
),
Container(
// Sixth
margin: EdgeInsets.only(left: 5, right: 5),
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {
if (event.logicalKey ==
LogicalKeyboardKey.backspace &&
otp6 == "") {
backspaceClick = backspaceClick + 1;
if (backspaceClick >= 2) {
focusNodeOtp5.requestFocus();
}
}
},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: focusNodeOtp6,
//obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp6 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp6.unfocus();
}
if (!otp1.isEmpty &&
!otp2.isEmpty &&
!otp3.isEmpty &&
!otp4.isEmpty &&
!otp5.isEmpty &&
!otp6.isEmpty) {
isTextFiledFocus = true;
} else {
isTextFiledFocus = false;
}
},
)),
),
/*IconButton(
onPressed: () {
setState(() {
isHideOTP = !isHideOTP;
});
},
icon:
Icon(isHideOTP ? Icons.visibility : Icons.visibility_off),
),*/
]),
),
Padding(
padding: const EdgeInsets.only(top: 32.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Image.asset(
'images/Warning.png',
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Container(
child: Text(
'OTP is valid for 5 minutes only.',
style: TextStyle(
color: Color(0xFF4B4B4B),
fontSize: 12,
fontFamily: 'Soleil_Regular',
),
),
),
),
],
),
),
Container(
child: Padding(
padding: const EdgeInsets.only(top: 22),
child: GestureDetector(
onTap: () {},
child: Container(
child: Text(
'Did not get any OTP?',
style: TextStyle(
color: Color(0xFF0072D8),
fontSize: 16,
fontFamily: 'Circular_Std_Bold',
),
),
)),
),
),
SizedBox(
width: 125,
height: 125,
),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration: new BoxDecoration(
color: Colors.blueAccent,
borderRadius: new BorderRadius.circular(10.0),
),
margin:
EdgeInsets.only(left: 16.0, right: 16.0, bottom: 16.0),
width: double.infinity,
height: 50.0,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
child: Text('Next ', style: TextStyle(fontSize: 16)),
onPressed: () {
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus) {
currentFocus.unfocus();
}
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new sso()),
);
},
color: isTextFiledFocus
? Color(0xFF0072D8)
: Color(0xFFC2C2C1),
textColor: Colors.white,
),
),
],
),
])),
)),
);
}
}
In above code,
I need to eliminate sizebox 70 because view should be center vertical & button should be bottom aligned so size box 120 also need to eliminated. how to fix this two problem in above code.
I m new to flutter i have tried above code with basic knowledge any help improving above code is appreciated.
Any help is appreciated!
Instead of using a Row(), you should have used a Stack(), with alignment: AlignmentDirectional.center.
Try This....
class Otp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return OtpPage();
}
}
class OtpPage extends State<Otp> {
String assetNameArrow = 'images/ic_back.svg';
String assertOtp = 'images/otp_sms.svg';
int backspaceClick = 0;
String otpError = "";
bool isHideOTP = true;
bool isTextFiledFocus = false;
String otp1 = "";
String otp2 = "";
String otp3 = "";
String otp4 = "";
String otp5 = "";
String otp6 = "";
FocusNode focusNodeOtp1 = FocusNode();
FocusNode focusNodeOtp2 = FocusNode();
FocusNode focusNodeOtp3 = FocusNode();
FocusNode focusNodeOtp4 = FocusNode();
FocusNode focusNodeOtp5 = FocusNode();
FocusNode focusNodeOtp6 = FocusNode();
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
resizeToAvoidBottomInset: false, //to avoid floating container on keyboard, use this
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: SafeArea(
child: Column(children: [
Padding(
padding: const EdgeInsets.only(left: 20, top: 20, bottom: 20),
child: Align(
alignment: Alignment.topLeft,
child: SvgPicture.asset(
assetNameArrow,
width: 8,
height: 19,
alignment: Alignment.topLeft,
),
),
),
SizedBox(
width: 70.0,
height: 70.0,
),
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 16),
child: Align(
alignment: Alignment.topLeft,
child: SvgPicture.asset(
assertOtp,
width: 61,
height: 61,
alignment: Alignment.topLeft,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 16.0, right: 16.0),
child: Container(
child: Text('We need to make\nsure its you',
maxLines: 2,
style: TextStyle(
fontFamily: 'Circular_Std_Bold',
fontSize: 24.0,
color: Color(0xFF2E2E2E),
)),
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 90.0, right: 16.0, top: 20.0),
child: Text('Please enter the OTP (One-Time Password) sent to your registered mobile number (ending in 6380). Do not share your OTP with anyone else.',
style: TextStyle(
fontFamily: 'Soleil_Regular',
fontSize: 14.0,
fontStyle: FontStyle.normal,
color: Color(0xFF2E2E2E),
)),
),
SizedBox(
width: 60.0,
height: 60.0,
),
Container(
// first
padding: EdgeInsets.all(16.0),
child: Row(children: [
Container(
margin: EdgeInsets.only(left: 16, right: 5),
//first
width: 46.0,
height: 48.0,
child: TextField(
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
textAlign: TextAlign.center,
// obscureText: isHideOTP,
enableSuggestions: false,
autocorrect: false,
autofocus: true,
focusNode: focusNodeOtp1,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp1 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp2.requestFocus();
}
},
),
),
Container(
margin: EdgeInsets.only(left: 5, right: 5),
// secound
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {
if (event.logicalKey == LogicalKeyboardKey.backspace && otp2 == "") {
backspaceClick = backspaceClick + 1;
if (backspaceClick >= 2) {
focusNodeOtp1.requestFocus();
}
}
},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: focusNodeOtp2,
// obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp2 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp3.requestFocus();
}
},
)),
),
Container(
// Third
margin: EdgeInsets.only(left: 5, right: 5),
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {
if (event.logicalKey == LogicalKeyboardKey.backspace && otp3 == "") {
backspaceClick = backspaceClick + 1;
if (backspaceClick >= 2) {
focusNodeOtp2.requestFocus();
}
}
},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: focusNodeOtp3,
//obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp3 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp4.requestFocus();
}
},
)),
),
Container(
margin: EdgeInsets.only(left: 5, right: 5),
// Fourth
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {
if (event.logicalKey == LogicalKeyboardKey.backspace && otp4 == "") {
backspaceClick = backspaceClick + 1;
if (backspaceClick >= 2) {
focusNodeOtp3.requestFocus();
}
}
},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: focusNodeOtp4,
//obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp4 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp5.requestFocus();
}
},
)),
),
Container(
// Fifth
margin: EdgeInsets.only(left: 5, right: 5),
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {
if (event.logicalKey == LogicalKeyboardKey.backspace && otp5 == "") {
backspaceClick = backspaceClick + 1;
if (backspaceClick >= 2) {
focusNodeOtp4.requestFocus();
}
}
},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: focusNodeOtp5,
// obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp5 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp6.requestFocus();
}
},
)),
),
Container(
// Sixth
margin: EdgeInsets.only(left: 5, right: 5),
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {
if (event.logicalKey == LogicalKeyboardKey.backspace && otp6 == "") {
backspaceClick = backspaceClick + 1;
if (backspaceClick >= 2) {
focusNodeOtp5.requestFocus();
}
}
},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
focusNode: focusNodeOtp6,
//obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp6 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp6.unfocus();
}
if (!otp1.isEmpty && !otp2.isEmpty && !otp3.isEmpty && !otp4.isEmpty && !otp5.isEmpty && !otp6.isEmpty) {
isTextFiledFocus = true;
} else {
isTextFiledFocus = false;
}
},
)),
),
/*IconButton(
onPressed: () {
setState(() {
isHideOTP = !isHideOTP;
});
},
icon:
Icon(isHideOTP ? Icons.visibility : Icons.visibility_off),
),*/
]),
),
Padding(
padding: const EdgeInsets.only(top: 32.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Image.asset(
'images/Warning.png',
),
),
],
),
),
Stack(
alignment: AlignmentDirectional.center,
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Container(
child: Text(
'OTP is valid for 5 minutes only.',
style: TextStyle(
color: Color(0xFF4B4B4B),
fontSize: 12,
fontFamily: 'Soleil_Regular',
),
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.only(top: 22),
child: GestureDetector(
onTap: () {},
child: Container(
child: Text(
'Did not get any OTP?',
style: TextStyle(
color: Color(0xFF0072D8),
fontSize: 16,
fontFamily: 'Circular_Std_Bold',
),
),
)),
),
),
],
),
Container(
child: Image.asset(
'images/Warning.png',
),
),
],
),
SizedBox(
width: 125,
height: 125,
),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration: new BoxDecoration(
color: Colors.blueAccent,
borderRadius: new BorderRadius.circular(10.0),
),
margin: EdgeInsets.only(left: 16.0, right: 16.0, bottom: 16.0),
width: double.infinity,
height: 50.0,
child: FlatButton(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Text('Next ', style: TextStyle(fontSize: 16)),
onPressed: () {
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus) {
currentFocus.unfocus();
}
// Navigator.push(
// context,
// new MaterialPageRoute(
// builder: (context) => new sso()),
// );
},
color: isTextFiledFocus ? Color(0xFF0072D8) : Color(0xFFC2C2C1),
textColor: Colors.white,
),
),
],
),
])),
)),
);
}
}
You can take help from this Article and build whatever layout you want to build.
Flutter Layout Cheatsheat
That's pretty simple use column and inside column set the property of cross-axis
to center
something like this in the parent widget
Column(
crossAxisAlignment:CrossAxisAlignment.center,
children:[
//your rest of child widget goes here
]
)
You need to use
mainAxisAlignment: MainAxisAlignment.center, by default it is MainAxisAlignment.start.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Center"),
],
),
Update
Separating MaterialApp, Better solution will be using Stack
class Otp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return OtpPage();
}
}
class OtpPage extends State<Otp> {
String assetNameArrow = 'images/ic_back.svg';
String assertOtp = 'images/otp_sms.svg';
int backspaceClick = 0;
String otpError = "";
bool isHideOTP = true;
bool isTextFiledFocus = false;
String otp1 = "";
String otp2 = "";
String otp3 = "";
String otp4 = "";
String otp5 = "";
String otp6 = "";
FocusNode focusNodeOtp1 = FocusNode();
FocusNode focusNodeOtp2 = FocusNode();
FocusNode focusNodeOtp3 = FocusNode();
FocusNode focusNodeOtp4 = FocusNode();
FocusNode focusNodeOtp5 = FocusNode();
FocusNode focusNodeOtp6 = FocusNode();
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset:
false, //to avoid floating container on keyboard, use this
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(left: 20, top: 20, bottom: 20),
child: Align(
alignment: Alignment.topLeft,
child: Container(
color: Colors.deepOrange,
width: 8,
height: 19,
alignment: Alignment.topLeft,
),
),
),
SizedBox(
width: 70.0,
height: 70.0,
),
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 16),
child: Align(
alignment: Alignment.topLeft,
child: Container(
color: Colors.deepPurple,
width: 61,
height: 61,
alignment: Alignment.topLeft,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 16.0, right: 16.0),
child: Container(
child: Text('We need to make\nsure its you',
maxLines: 2,
style: TextStyle(
fontFamily: 'Circular_Std_Bold',
fontSize: 24.0,
color: Color(0xFF2E2E2E),
)),
),
),
),
],
),
),
Padding(
padding:
const EdgeInsets.only(left: 90.0, right: 16.0, top: 20.0),
child: Text(
'Please enter the OTP (One-Time Password) sent to your registered mobile number (ending in 6380). Do not share your OTP with anyone else.',
style: TextStyle(
fontFamily: 'Soleil_Regular',
fontSize: 14.0,
fontStyle: FontStyle.normal,
color: Color(0xFF2E2E2E),
)),
),
SizedBox(
width: 60.0,
height: 60.0,
),
Container(
// first
padding: EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
margin: EdgeInsets.only(left: 16, right: 5),
//first
width: 46.0,
height: 48.0,
child: TextField(
textAlign: TextAlign.center,
// obscureText: isHideOTP,
enableSuggestions: false,
autocorrect: false,
autofocus: true,
focusNode: focusNodeOtp1,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp1 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp2.requestFocus();
}
},
),
),
Container(
margin: EdgeInsets.only(left: 5, right: 5),
// secound
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {},
child: TextField(
textAlign: TextAlign.center,
focusNode: focusNodeOtp2,
// obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp2 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp3.requestFocus();
}
},
)),
),
Container(
// Third
margin: EdgeInsets.only(left: 5, right: 5),
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [],
focusNode: focusNodeOtp3,
//obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp3 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp4.requestFocus();
}
},
)),
),
Container(
margin: EdgeInsets.only(left: 5, right: 5),
// Fourth
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [],
focusNode: focusNodeOtp4,
//obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp4 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp5.requestFocus();
}
},
)),
),
Container(
// Fifth
margin: EdgeInsets.only(left: 5, right: 5),
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [],
focusNode: focusNodeOtp5,
// obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp5 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp6.requestFocus();
}
},
)),
),
Container(
// Sixth
margin: EdgeInsets.only(left: 5, right: 5),
width: 46.0,
height: 48.0,
child: RawKeyboardListener(
autofocus: true,
focusNode: FocusNode(),
onKey: (event) {},
child: TextField(
textAlign: TextAlign.center,
inputFormatters: [],
focusNode: focusNodeOtp6,
//obscureText: isHideOTP,
autofocus: true,
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Color(0xFF0072D8), width: 1.0),
),
),
onChanged: (value) {
setState(() {
otp6 = value;
otpError = "";
});
if (value.isNotEmpty) {
print('value is not null');
focusNodeOtp6.unfocus();
}
if (!otp1.isEmpty &&
!otp2.isEmpty &&
!otp3.isEmpty &&
!otp4.isEmpty &&
!otp5.isEmpty &&
!otp6.isEmpty) {
isTextFiledFocus = true;
} else {
isTextFiledFocus = false;
}
},
)),
),
/*IconButton(
onPressed: () {
setState(() {
isHideOTP = !isHideOTP;
});
},
icon:
Icon(isHideOTP ? Icons.visibility : Icons.visibility_off),
),*/
]),
),
Padding(
padding: const EdgeInsets.only(top: 32.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 24,
height: 24,
color: Colors.green,
// child: Image.asset(
// 'images/Warning.png',
// ),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Container(
child: Text(
'OTP is valid for 5 minutes only.',
style: TextStyle(
color: Color(0xFF4B4B4B),
fontSize: 12,
fontFamily: 'Soleil_Regular',
),
),
),
),
],
),
),
Container(
child: Padding(
padding: const EdgeInsets.only(top: 22),
child: GestureDetector(
onTap: () {},
child: Container(
child: Text(
'Did not get any OTP?',
style: TextStyle(
color: Color(0xFF0072D8),
fontSize: 16,
fontFamily: 'Circular_Std_Bold',
),
),
)),
),
),
SizedBox(
width: 125,
height: 125,
),
],
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(10.0),
),
margin: EdgeInsets.only(left: 16.0, right: 16.0, bottom: 16.0),
width: double.infinity,
height: 50.0,
child: FlatButton(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Text('Next ', style: TextStyle(fontSize: 16)),
onPressed: () {
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus) {
currentFocus.unfocus();
}
},
color: isTextFiledFocus ? Color(0xFF0072D8) : Color(0xFFC2C2C1),
textColor: Colors.white,
),
),
);
}
}
class Landing extends StatefulWidget {
Landing({Key? key}) : super(key: key);
#override
_LandingState createState() => _LandingState();
}
class _LandingState extends State<Landing> with SingleTickerProviderStateMixin {
final List<Widget> pages = [
Home(),
// Signin(),
Center(
child: Text("SignIn"),
)
];
late TabController _tabbarcontroller;
int _currentIndexNavBar = 0;
#override
void initState() {
super.initState();
_tabbarcontroller = new TabController(length: pages.length, vsync: this);
}
#override
void dispose() {
_tabbarcontroller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: TabBarView(
controller: _tabbarcontroller,
children: pages,
),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
label: "A",
icon: Icon(
Icons.ac_unit,
),
),
BottomNavigationBarItem(
label: "B",
icon: Icon(
Icons.face,
),
),
],
currentIndex: _currentIndexNavBar,
onTap: (value) {
setState(() {
_tabbarcontroller.index = value;
_currentIndexNavBar = value;
});
},
));
}
}
class Parent extends StatefulWidget {
Parent({Key? key}) : super(key: key);
#override
_ParentState createState() => _ParentState();
}
class _ParentState extends State<Parent> {
#override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 100,
width: 100,
color: Colors.red,
),
Expanded(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Home(),
]),
))
]);
}
}

How to add validation in dynamic textformfield

I want to add validation in dynamic textformfield....i have added validation as per my knowledge but its not working properly.....when i created 4-5 textformfield and erase data from previous field its doesn't show any error when i click on submit button......validation is working properly only for currrent textformfield .....its not working properly for previous textformfield ....how can i slove it???
class PurchaseTicket extends StatefulWidget {
#override
int eventID;
PurchaseTicket(this.eventID);
_PurchaseTicketState createState() => _PurchaseTicketState();
}
class _PurchaseTicketState extends State<PurchaseTicket> {
// List<GlobalKey<FormState>> _formKeys = [GlobalKey<FormState>()];
//final _formKey = GlobalKey<FormState>();
List<TextEditingController> _controllers = new List();
List<TextEditingController> _controllers1 = new List();
List<FocusNode> _FocusNode1 = new List();
List<FocusNode> _FocusNode2 = new List();
FocusNode myFocusNode1 = new FocusNode();
FocusNode myFocusNode2 = new FocusNode();
TextEditingController mobileController = TextEditingController();
TextEditingController nameController = TextEditingController();
ScrollController controller = ScrollController();
var _count = 0;
List<Map<String, dynamic>> _values;
_register(BuildContext context) async {
bool validname;
bool validmobile;
for (var i = 0; i <= _controllers.length - 1; i++) {
print(_controllers[i].text.runtimeType);
if (_controllers[i].text.trim() == "" || _controllers[i].text == null) {
validname = false;
} else {
validname = true;
}
}
for (var i = 0; i <= _controllers1.length - 1; i++) {
if (_controllers1[i].text.trim() == '') {
validmobile = false;
} else {
validmobile = true;
}
}
if (nameController.text.trim() == '' || nameController.text.length < 1) {
showToast('Please Enter Name', context: context);
} else if (mobileController.text.trim() == '' ||
mobileController.text.length < 10) {
showToast('Enter Valid Mobile Number', context: context);
} else if (validname == false) {
showToast('Please Enter Name', context: context);
} else if (validmobile == false) {
showToast('Enter Valid Mobile Number', context: context);
} else {
print(
"$validmobile $validname ${nameController.text} ${mobileController.text}");
participateRegister(nameController.text, mobileController.text,
_controllers, _controllers1, widget.eventID, context);
}
}
// else if (mobileController.text.isNotEmpty &&
// nameController.text.isNotEmpty) {
// for (int i = 0; i < _controllers.length; i++) {
// if (validmobile = false) {
// showToast('Please Enter Name', context: context);
// }
// }
// } else if (mobileController.text.isNotEmpty &&
// nameController.text.isNotEmpty) {
// for (int i = 0; i < _controllers1.length; i++) {
// if (validmobile == false) {
// showToast('Enter Valid Mobile Number', context: context);
// }
// }
// }
// }
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFfbf0d4),
body: SingleChildScrollView(
child: Stack(children: [
Container(
height: MediaQuery.of(context).size.height * .50,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
//image: NetworkImage(widget.eventData.splitImage[0]),
image: ExactAssetImage("assets/images/Group 4.png"),
fit: BoxFit.cover,
),
),
),
Container(
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.29,
),
height: MediaQuery.of(context).size.height * .7,
width: MediaQuery.of(context).size.width,
decoration: new BoxDecoration(
image: new DecorationImage(
image: ExactAssetImage("assets/images/body shape.png"),
fit: BoxFit.fill,
),
),
),
Container(
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.03,
),
child: InkWell(
child: new IconButton(
icon: new Icon(
Icons.arrow_back,
size: 20,
),
color: Colors.white,
onPressed: () => {Navigator.pop(context)}),
),
),
Padding(
padding: const EdgeInsets.only(
left: 30,
right: 30,
),
child: Container(
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.width * .5),
child: Column(
children: [
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
elevation: 10,
child: Container(
//color: Colors.white,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(
20.0) // <--- border radius here
),
),
child: Column(
children: [
SizedBox(
//height: 10,
),
Center(
child: Container(
width: MediaQuery.of(context).size.width * .71,
height:
MediaQuery.of(context).size.height * .085,
child: new TextFormField(
controller: nameController,
focusNode: myFocusNode1,
style: TextStyle(
height: 1.5,
fontWeight: FontWeight.w500,
color: const Color(0xFFa5a5a5),
fontSize: 12),
cursorColor: const Color(0xFFa5a5a5),
keyboardType: TextInputType.text,
decoration: InputDecoration(
fillColor: Colors.white,
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: const Color(0xFFa5a5a5))),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFa5a5a5)),
),
border: UnderlineInputBorder(),
labelText: 'Name',
labelStyle: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w500,
color: myFocusNode1.hasFocus
? const Color(0xFFa5a5a5)
: const Color(0xFFa5a5a5))),
),
),
),
SizedBox(
// height: MediaQuery.of(context).size.height * .013,
),
Container(
width: MediaQuery.of(context).size.width * .71,
height: MediaQuery.of(context).size.height * .085,
child: new TextFormField(
maxLength: 10,
controller: mobileController,
focusNode: myFocusNode2,
style: TextStyle(
height: 1.5,
fontWeight: FontWeight.w500,
color: const Color(0xFFa5a5a5),
fontSize: 12),
cursorColor: const Color(0xFFa5a5a5),
keyboardType: TextInputType.number,
decoration: InputDecoration(
counterText: '',
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: const Color(0xFFa5a5a5))),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: const Color(0xFFa5a5a5)),
),
fillColor: Colors.white,
border: UnderlineInputBorder(),
labelText: 'Mobile No',
labelStyle: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w500,
color: myFocusNode2.hasFocus
? const Color(0xFFa5a5a5)
: const Color(0xFFa5a5a5))),
validator: (value) {
if (value.length < 10 && value.isEmpty) {
return "Atleast 10 digit required";
}
return null;
},
),
),
SizedBox(
height: 10,
),
],
),
),
),
ListView.builder(
physics: const BouncingScrollPhysics(),
shrinkWrap: true,
itemCount: _count,
itemBuilder: (context, index) {
print(index);
return _row(index);
},
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
child: Icon(
Icons.add,
color: Colors.red,
size: 35,
),
backgroundColor: Color(0xFF9a7210),
onPressed: () async {
_controllers.add(new TextEditingController());
_controllers1.add(new TextEditingController());
_FocusNode1.add(new FocusNode());
_FocusNode2.add(new FocusNode());
// _formKeys.add(new GlobalKey<FormState>());
setState(() {
_count++;
});
},
),
],
),
SizedBox(
height: 20,
),
Center(
child: GestureDetector(
onTap: () {
_register(context);
},
child: Container(
height: 70,
width: 260,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
const Color(0xFFb48919),
const Color(0xFF9a7210),
],
),
border: Border.all(color: Colors.white, width: 4),
borderRadius: BorderRadius.all(Radius.circular(
70.0) // <--- border radius here
),
),
child: Center(
child: Text("Submit",
style: TextStyle(
fontWeight: FontWeight.bold,
letterSpacing: 1,
fontSize: 30,
color: Colors.white)),
),
),
),
),
SizedBox(
height: 30,
)
],
),
),
),
]),
));
}
_row(int index) {
return Column(
children: [
Row(
children: [
Expanded(
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
elevation: 10,
child: Container(
//color: Colors.white,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(
20.0) // <--- border radius here
),
),
child: Column(
children: [
SizedBox(
// height: 10,
),
Center(
child: Container(
width: MediaQuery.of(context).size.width * .71,
height: MediaQuery.of(context).size.height * .085,
child: new TextFormField(
autofocus: false,
controller: _controllers[index],
focusNode: _FocusNode1[index],
style: TextStyle(
height: 1.5,
fontWeight: FontWeight.w500,
color: const Color(0xFFa5a5a5),
fontSize: 12),
cursorColor: const Color(0xFFa5a5a5),
keyboardType: TextInputType.text,
decoration: InputDecoration(
fillColor: Colors.white,
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: const Color(0xFFa5a5a5))),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Color(0xFFa5a5a5)),
),
border: UnderlineInputBorder(),
labelText: 'Name',
labelStyle: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w500,
color: _FocusNode1[index].hasFocus
? const Color(0xFFa5a5a5)
: const Color(0xFFa5a5a5))),
),
),
),
SizedBox(
//height: MediaQuery.of(context).size.height * .013,
),
Container(
width: MediaQuery.of(context).size.width * .71,
height: MediaQuery.of(context).size.height * .085,
child: new TextFormField(
maxLength: 10,
autofocus: false,
controller: _controllers1[index],
focusNode: _FocusNode2[index],
style: TextStyle(
height: 1.5,
fontWeight: FontWeight.w500,
color: const Color(0xFFa5a5a5),
fontSize: 12),
cursorColor: const Color(0xFFa5a5a5),
keyboardType: TextInputType.number,
decoration: InputDecoration(
counterText: '',
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: const Color(0xFFa5a5a5))),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: const Color(0xFFa5a5a5)),
),
fillColor: Colors.white,
border: UnderlineInputBorder(),
labelText: 'Mobile No',
labelStyle: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w500,
color: _FocusNode2[index].hasFocus
? const Color(0xFFa5a5a5)
: const Color(0xFFa5a5a5))),
),
),
SizedBox(
height: 10,
),
],
),
),
),
),
],
),
SizedBox(
height: 30,
)
],
);
}
}
Use Form , Here is the Example For you:
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
GlobalKey<FormState> formKey = new GlobalKey();
String formFieldValue;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Form(
key: formKey,
child: Column(
children: [
TextFormField(
validator: (input) {
if (input.isEmpty) {
return 'Please type something';
}
return null;
},
onSaved: (input) => formFieldValue = input,
),
RaisedButton(
onPressed: submitForm,
child: Text(
'Submit'
),
)
],
),
)
);
}
submitForm() {
final formState = formKey.currentState;
if (formState.validate()) {
formState.save();
// then do something
}
}
}
Please follow below tutorial which Flutter team suggest to use for validation.
You can just put all text fields in a form and validate the all fields anytime.
https://flutter.dev/docs/cookbook/forms/validation

How to generate password using slider in Flutter?

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),
),
),
),
],
),
),
),
),
);
}
}
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