update look and feel of input fields

This commit is contained in:
2024-07-02 09:53:32 +02:00
parent 543930fc4b
commit 6f10fd8572
5 changed files with 213 additions and 0 deletions

View File

@@ -38,6 +38,7 @@ class _MyDateFieldState extends State<MyDateField> {
Widget setRequiredText() {
if (widget.required) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
"*",

View File

@@ -0,0 +1,209 @@
import 'package:flutter/material.dart';
class MyErrorMessage extends StatefulWidget {
final String errorType;
const MyErrorMessage({
super.key,
required this.errorType,
});
@override
State<MyErrorMessage> createState() => _MyErrorMessageState();
}
class _MyErrorMessageState extends State<MyErrorMessage> {
var messageTypes = <String, Widget>{};
void setInputError() {
messageTypes["Input Error"] = Stack(
children: [
Container(
padding: const EdgeInsets.all(10.0),
width: 500.0,
height: 375.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
border: Border.all(color: Colors.red, width: 5.0),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.warning_amber_rounded,
size: 100,
color: Colors.red,
),
const SizedBox(height: 15),
const Text(
"Oops! Looks like some fields are missing.",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 25.0,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 25.0),
child: Text(
"We noticed that some required fields are still empty. To ensure your request is processed smoothly, please fill out all the highlighted fields before submitting the form again.",
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: RichText(
text: const TextSpan(
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
children: <TextSpan>[
TextSpan(
text: "Here's a quick tip: ",
style: TextStyle(
fontStyle: FontStyle.italic, color: Colors.red)),
TextSpan(text: "Look for fields with an asterisk ("),
TextSpan(text: "*", style: TextStyle(color: Colors.red)),
TextSpan(text: ") next to them, as these are mandatory."),
],
),
),
),
],
),
),
Positioned(
top: 5,
right: 5,
width: 50,
height: 50,
child: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(
Icons.close,
color: Colors.red,
size: 35,
),
),
),
],
);
}
void setinvalidCredError() {
messageTypes["Invalid Credentials"] = Stack(
children: [
Container(
padding: const EdgeInsets.all(10.0),
width: 500.0,
height: 450.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
border: Border.all(color: Colors.red, width: 5.0),
),
child: const Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.warning_amber_rounded,
size: 100,
color: Colors.red,
),
SizedBox(height: 15),
Text(
"Uh oh! Login attempt unsuccessful.",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 25.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 10),
Padding(
padding: EdgeInsets.symmetric(horizontal: 25.0),
child: Text(
"The email address or password you entered doesn't seem to match our records. Please double-check your information and try again.",
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 15),
Padding(
padding: EdgeInsets.symmetric(horizontal: 25.0),
child: Text(
"Here are some things to keep in mind:",
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 10),
Padding(
padding: EdgeInsets.symmetric(horizontal: 25.0),
child: Text(
"1) Are you sure you're using the correct email address associated with your account?\n2) Is your caps lock key on? Passwords are case-sensitive.\n3) If you've forgotten your password, no worries! Click on \"Forgot Password?\" to reset it.",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
Positioned(
top: 5,
right: 5,
width: 50,
height: 50,
child: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(
Icons.close,
color: Colors.red,
size: 35,
),
),
),
],
);
}
Widget? getErrorMessage(String type) {
return messageTypes[type];
}
@override
void initState() {
setInputError();
setinvalidCredError();
super.initState();
}
@override
Widget build(BuildContext context) {
return Dialog(child: getErrorMessage(widget.errorType));
}
}

View File

@@ -53,6 +53,7 @@ class _MyMLTextFieldState extends State<MyMLTextField> {
Widget setRequiredText() {
if (widget.required) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
"*",

View File

@@ -49,6 +49,7 @@ class _MyPassFieldState extends State<MyPassField> {
Widget setRequiredText() {
if (widget.required) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
"*",

View File

@@ -53,6 +53,7 @@ class _MyTextFieldState extends State<MyTextField> {
Widget setRequiredText() {
if (widget.required) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
"*",