I have created a TextFormField to recieve a date, and it works perfectly along with firebase. But when I choose a date, the chosen date doesn't appears on the screen:
This is the TextFormField:
TextFormField(
controller: saidadatecontroller,
onChanged: (String datasaida){
getSaidaName(datasaida);
},
autofocus: true,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 12, 0),
hintStyle: TextStyle(color: Color.fromARGB(255, 138, 136, 136),
fontSize: 18),
prefixIcon: Icon(
Icons.calendar_month_outlined,
color: Color.fromARGB(255, 92, 172, 178),
size: 30,
),
labelText: "Data da saída",
labelStyle: TextStyle(color: Color.fromARGB(255, 136, 136, 136), fontSize: 13),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromARGB(153, 191, 190, 190),
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color.fromARGB(153, 191, 190, 190),
),
),
),
onTap: () async {
DateTime? pickeddate = await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2022),
lastDate: DateTime(2036));
if (pickeddate != null) {
setState(() {
datasaida = DateFormat('dd-MM-yyyy').format(pickeddate);
});
}
},
style: TextStyle(fontSize: 21, color: Colors.black),
textAlign: TextAlign.left,
cursorColor: Color.fromARGB(255, 87, 86, 86),
),
If you want the picked date appear as text in the TextFormField you have to set the text in the saidadatecontroller.
if (pickeddate != null) {
saidadatecontroller.text = DateFormat('dd-MM-yyyy').format(pickeddate);
}
Related
OutlinedInputBorder cannot accept a linear gradient for its color. I would like the border of the textFormField to be a gradient when the user clicks into it.
Here is my attempt. The border does not change.
GestureDetector(
onTap: () {
setState(() {
borderFocused = true;
});
},
child: Container(
decoration: borderFocused
? const BoxDecoration(
border: GradientBoxBorder(
gradient: LinearGradient(
colors: [
Color(0xff45a7f5),
Color(0xff76c479)
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)))
: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color.fromARGB(
30, 192, 192, 192)))),
child: TextFormField(
cursorColor: Color.fromARGB(255, 192, 192, 192),
style: const TextStyle(
color: Color.fromARGB(255, 192, 192, 192)),
decoration: textInputDecoration.copyWith(
labelStyle: const TextStyle(
color: Color.fromARGB(255, 192, 192, 192)),
hintText: "Email",
prefixIcon: Icon(
Icons.email,
color: Theme.of(context).primaryColor,
)),
You can use ShaderMask to get you most of the way there:
Scaffold(
body: Center(
child: ShaderMask(
shaderCallback: (bounds) {
return LinearGradient(colors: [Colors.red,Colors.blue]).createShader(bounds);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
cursorColor: Color.fromARGB(255, 192, 192, 192),
style: const TextStyle(color: Color.fromARGB(255, 192, 192, 192)),
decoration: InputDecoration(
border: OutlineInputBorder(borderSide: BorderSide(
)),
hintText: "Email",
prefixIcon: Icon(
Icons.email,
color: Theme.of(context).primaryColor,
)),
),
),
),
),
);
I'm preparing password-field with TextFormFieldand riverpod on flutter as followings.
When the suffixIcon is tapped, the icon would change from solidEye to solidEyeSlash, accorging to the bool result of mask.
Actually, the bool result is toggled correctly as checked at //here,
however those icons never change as expected.
How should I fix my code below to let it works?
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
final mask = StateProvider<bool>((ref) => false);
class TextFieldPassword extends ConsumerWidget {
#override
Widget build(BuildContext context, WidgetRef ref) {
return Container(
margin: const EdgeInsets.only(bottom: 10),
child: TextFormField(
style: const TextStyle(
fontSize: 13,
),
obscureText: true,
decoration: InputDecoration(
labelText: "password",//**
suffixIcon: IconButton(//**
icon: Icon(
ref.read(mask.notifier).state // false
? FontAwesomeIcons.solidEye
: FontAwesomeIcons.solidEyeSlash
),
onPressed: () {
ref.read(mask.notifier).update((state)=>!ref.read(mask.notifier).state);
print(ref.read(mask.notifier).state);//here
},
),
labelStyle: const TextStyle(
fontSize: 15,
color: Color.fromARGB(255, 219, 219, 219),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(2),
borderSide: const BorderSide(
color: Color.fromARGB(255, 219, 219, 219),
width: 1.0,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(2),
borderSide: const BorderSide(
color: Color.fromARGB(255, 219, 219, 219),
width: 1.0,
)),
),
));
}
}
You like to change the icondata, therefore you need to watch the state instead of read.
Icon(ref.watch(mask)
icon: Icon(ref.watch(mask)
? FontAwesomeIcons.solidEye
: FontAwesomeIcons.solidEyeSlash),
And to update data onPressed
onPressed: () {
final bool isVisible = ref.read(mask);
ref.read(mask.notifier).update((state) => !isVisible);
},
class TextFieldPassword extends ConsumerWidget {
const TextFieldPassword({Key? key}) : super(key: key);
#override
Widget build(BuildContext context, WidgetRef ref) {
return Container(
margin: const EdgeInsets.only(bottom: 10),
child: TextFormField(
style: const TextStyle(
fontSize: 13,
),
obscureText: !ref.watch(mask),
decoration: InputDecoration(
labelText: "password", //**
suffixIcon: IconButton(
icon: Icon(ref.watch(mask) // false
? FontAwesomeIcons.solidEye
: FontAwesomeIcons.solidEyeSlash),
onPressed: () {
final bool isVisible = ref.read(mask);
ref.read(mask.notifier).update((state) => !isVisible);
},
),
labelStyle: const TextStyle(
fontSize: 15,
color: Color.fromARGB(255, 219, 219, 219),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(2),
borderSide: const BorderSide(
color: Color.fromARGB(255, 219, 219, 219),
width: 1.0,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(2),
borderSide: const BorderSide(
color: Color.fromARGB(255, 219, 219, 219),
width: 1.0,
)),
),
));
}
}
I have an OTP page but the borders made for the input fields does not fill the parent containers.
I made the container color grey and the focused border pink, but it does not fit the height.
Please what am I missing in my code;
Widget _textFieldOTP(BuildContext context, {required bool first, last}) {
return Container(
height: 54,
width: 53,
color: Colors.grey,
child: TextFormField(
autofocus: true,
onChanged: (value) {
if(value.length == 1 && last == false){
FocusScope.of(context).nextFocus();
}
if(value.length == 0 && first == false){
FocusScope.of(context).previousFocus();
}
},
showCursor: false,
readOnly: false,
textAlign: TextAlign.center,
style: GoogleFonts.poppins(
textStyle: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 24,
),
),
keyboardType: TextInputType.number,
maxLength: 1,
decoration: InputDecoration(
counter: Offstage(),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: Color(0x1A484848)),
borderRadius: BorderRadius.circular(6),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: Color(0xFFFF2957)),
borderRadius: BorderRadius.circular(6),
),
),
),
);
}
}
Issue raise from counter, also can remove offset.
Include counterStyle: TextStyle(height: double.minPositive), and counterText=""
decoration: InputDecoration(
counterStyle: TextStyle(height: double.minPositive),
counterText: "",
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: Color(0x1A484848)),
borderRadius: BorderRadius.circular(6),
),
Widget _textFieldOTP(BuildContext context, {required bool first, last}) {
return Container(
height: 54,
width: 53,
color: Colors.grey,
child: TextFormField(
autofocus: true,
onChanged: (value) {
if (value.length == 1 && last == false) {
FocusScope.of(context).nextFocus();
}
if (value.length == 0 && first == false) {
FocusScope.of(context).previousFocus();
}
},
showCursor: false,
readOnly: false,
textAlign: TextAlign.center,
style: GoogleFonts.poppins(
textStyle: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 24,
),
),
keyboardType: TextInputType.number,
maxLength: 1,
decoration: InputDecoration(
counterStyle: TextStyle(height: double.minPositive),
counterText: "",
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: Color(0x1A484848)),
borderRadius: BorderRadius.circular(6),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 1, color: Color(0xFFFF2957)),
borderRadius: BorderRadius.circular(6),
),
),
),
);
}
I have a TextField and when i change cursor height it comes down . i want it come center or add padding under it.
Cursor should be vertically center of TextField is that possible ?
and this is my code.
TextField(
cursorHeight: 30,
cursorColor: Colors.yellow,
cursorWidth: 2,
cursorRadius: Radius.circular(500),
style: TextStyle(color: Colors.white, fontSize: 14),
obscureText: isPasswordTextField ? showPassword : false,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(8)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 2, color: Colors.yellow),
borderRadius: BorderRadius.circular(10),
),
suffixIcon: isPasswordTextField
? IconButton(
onPressed: () {
setState(() {
showPassword = !showPassword;
});
},
icon: Icon(
Icons.remove_red_eye,
color: Colors.yellow,
),
)
: null,
contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),
filled: true,
fillColor: Color.fromRGBO(28, 28, 28, 1),
labelText: labelText,
labelStyle: TextStyle(
color: Colors.yellow,
fontSize: 22,
fontFamily: 'Exo',
fontWeight: FontWeight.bold
),
floatingLabelBehavior: FloatingLabelBehavior.always,
hoverColor: Color.fromRGBO(54, 54, 54, 1),
hintText: placeholder,
hintStyle: TextStyle(
fontSize: 14,
color: Colors.white,
)
),
),
This should help. As you can see in the your textfiled there is no height specified.
TextField(
cursorHeight: 30,
cursorColor: Colors.yellow,
cursorWidth: 2,
cursorRadius:const Radius.circular(500),
style: TextStyle(
color: Colors.white,
fontSize: 14,
height: 1.5 //Add this
),
),
Try below code hope its helpful to you.add your extra code also I tried to design
TextField(
style: TextStyle(
color: Colors.white,
fontSize: 14,
),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(
Radius.circular(8),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
color: Colors.yellow,
),
borderRadius: BorderRadius.circular(10),
),
suffixIcon: IconButton(
onPressed: () {
setState(() {});
},
icon: Icon(
Icons.remove_red_eye,
color: Colors.yellow,
),
),
// floatingLabelBehavior: FloatingLabelBehavior.always,
contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),
filled: true,
fillColor: Color.fromRGBO(28, 28, 28, 1),
labelText: 'labelText',
labelStyle: TextStyle(
color: Colors.yellow,
fontSize: 22,
fontFamily: 'Exo',
fontWeight: FontWeight.bold),
hoverColor: Color.fromRGBO(54, 54, 54, 1),
hintText: 'placeholder',
hintStyle: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
),
Your result screen->
Working on my personal site, and I want to add a contact form so anyone on the site can fill out a simple form and the site will send me an email. I think I've figured out the email part, but the form the users would have to fill out isn't working yet.
Whenever I start debugging my code it loads into my home page. I click on "Contact Me" at the top right and it takes me to the form page just like it's supposed to, but it immediately shows
Below is my contact_form.dart file in its entirety:
import 'package:flutter/material.dart';
import 'package:flutter_email_sender/flutter_email_sender.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../extensions/email_detection_extension.dart';
import '../../extensions/hover_extensions.dart';
class ContactForm extends StatefulWidget {
const ContactForm({Key key}) : super(key: key);
#override
_ContactFormState createState() => _ContactFormState();
}
class _ContactFormState extends State<ContactForm> {
static const bool _autovalidate = false;
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
final _messageController = TextEditingController();
#override
Widget build(BuildContext context) {
return Form(
key: _formKey,
autovalidate: _autovalidate, //as you can see I have autovalidate disabled so that shouldn't be it
child: ListView(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Name: ',
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.7,
color: Colors.white,
),
),
SizedBox(width: 10),
SizedBox(
child: TextFormField(
validator: (value){
if(value.isEmpty) return 'This field is required.';
return null;
},
decoration: InputDecoration(
hintText: 'First Last',
hintStyle: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.7,
color: Colors.white,
),
enabledBorder: const UnderlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 220, 220, 220))
),
focusedBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 220, 220, 220))
),
fillColor: Color.fromARGB(255, 255, 255, 255),
focusColor: Color.fromARGB(50, 150, 50, 200),
errorText: 'This field is required.'
),
controller: _nameController
),
width: 500
)
]
),
Row(
children: <Widget>[
Text(
'Email: ',
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.7,
color: Colors.white,
),
),
SizedBox(width: 10),
SizedBox(
child: TextFormField(
validator: (value){
if(!value.isValidEmail()) return 'This field is required and must be of the form "example#website.abc".';
return null;
},
decoration: InputDecoration(
hintText: 'example#website.abc',
hintStyle: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.7,
color: Colors.white,
),
enabledBorder: const UnderlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 220, 220, 220))
),
focusedBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 220, 220, 220))
),
fillColor: Color.fromARGB(255, 255, 255, 255),
focusColor: Color.fromARGB(50, 150, 50, 200),
errorText: 'This field is required and must be of the form "example#website.abc".'
),
controller: _emailController,
keyboardType: TextInputType.emailAddress,
),
width: 500
)
]
),
Row(
children: <Widget>[
Text(
'Message:',
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.7,
color: Colors.white,
),
),
SizedBox(width: 10),
SizedBox(
child: TextFormField(
validator: (value){
if(!value.isValidEmail()) return 'This field is required.';
return null;
},
decoration: InputDecoration(
hintText: 'Message',
hintStyle: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
height: 1.7,
color: Colors.white,
),
enabledBorder: const UnderlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 220, 220, 220))
),
focusedBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 220, 220, 220))
),
fillColor: Color.fromARGB(255, 255, 255, 255),
focusColor: Color.fromARGB(50, 150, 50, 200),
errorText: 'This field is required.',
),
controller: _messageController
),
width: 500
)
]
),
//Submit button
GestureDetector(
onTap: () async {
if(_formKey.currentState.validate()){
final Email email = Email(
subject: 'Contact Email from ' + _nameController.text,
body: 'Dear Future Me,\n\n' + _nameController.text + " sent you an email from your contact form just now. Here's their message:\n\n" + _messageController.text + '\n\nYou can reach out to them at their provided email: ' + _emailController.text + '\n\nHave a good one, and keep that chin up!\n ~Pseudo-Robotic Past You',
recipients: ['redacted (my email address)'],
isHTML: false
);
try {
await FlutterEmailSender.send(email);
//Navigate to success page
} catch (error) {
//Navigate to failure page
}
}
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 60, vertical: 15),
child: Text(
'Submit',
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
decoration: BoxDecoration(
color: Color.fromARGB(255, 120, 20, 220),
borderRadius: BorderRadius.circular(5)
),
width: 200
),
).showCursorOnHover
]
)
);
}
}
It's not perfect, I'm gonna clean it up when I'm done, but this is where I stand. Been at this for about 2.5 hours, it's 2 am, and I have a partially functional form that doesn't want to stop erroring. (It shows the error messages even after I've put in acceptable strings and hit submit.) I'd appreciate any ideas on how to fix my autovalidation problem.
Thanks.