import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mybankapp/authscreens/loginscreen.dart';
import 'package:mybankapp/colors/colors.dart';
import 'package:mybankapp/routscreens/routwidget.dart';
import 'package:mybankapp/textfontfamily/textfontfamily.dart';
import 'package:mybankapp/welcomescreen/welcomescreen.dart';
class SignUpScreen extends StatefulWidget {
@override
_SignUpScreenState createState() => _SignUpScreenState();
}
class _SignUpScreenState extends State<SignUpScreen> {
final _formKey = GlobalKey<FormState>();
late String _name;
late String _phoneNumber = '';
late String _password;
late String _confirmPassword;
final bool _isLoading = false;
Text text(String text) {
return Text(
text,
style: TextStyle(
fontSize: 10,
fontFamily: TextFontFamily.helveticaNeueCyrRoman,
color: ColorResources.white,
),
);
}
TextFormField textFormField(String hint, String Function(String?) validator,
void Function(String?) onSaved,
{bool obscureText = false}) {
return TextFormField(
style: TextStyle(
fontFamily: TextFontFamily.helveticaNeueCyrRoman,
fontSize: 13,
color: ColorResources.grey2,
),
obscureText: obscureText,
cursorColor: ColorResources.blue1,
decoration: InputDecoration(
filled: true,
fillColor: ColorResources.grey1.withOpacity(0.05),
hintText: hint,
isDense: true,
hintStyle: TextStyle(
fontFamily: TextFontFamily.helveticaNeueCyrRoman,
fontSize: 13,
color: ColorResources.grey2,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(
width: 1,
color: ColorResources.blue1.withOpacity(0.6),
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(
width: 1,
color: ColorResources.blue1.withOpacity(0.6),
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(
width: 1,
color: ColorResources.blue1.withOpacity(0.6),
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(
width: 1,
color: ColorResources.blue1.withOpacity(0.6),
),
),
),
validator: validator,
onSaved: onSaved,
);
}
// phone number validation
// ignore: valid_regexps
final _phoneNumberRegExp = RegExp(r'^(?:[+0]9)?[0-9]{10}$');
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: ColorResources.backGroundColor,
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(top: 50, left: 15, right: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
InkWell(
onTap: () {
Get.off(WelcomeScreen());
},
child: Icon(
Icons.close,
color: ColorResources.white,
),
),
SizedBox(height: 70),
Text(
"Create Account",
style: TextStyle(
fontFamily: TextFontFamily.helveticNeueCyrBold,
fontSize: 35,
color: ColorResources.red),
),
SizedBox(height: 7),
Text(
"Open a Noble Bank account with a few details.",
style: TextStyle(
fontFamily: TextFontFamily.helveticaNeueCyrRoman,
fontSize: 15,
color: ColorResources.white1),
),
SizedBox(height: 45),
Form(
key: _formKey,
child: Column(
children: [
text("Full name"),
SizedBox(height: 10),
textFormField("", (value) {
if (value!.isEmpty) {
return "Please enter your name";
}
return null;
}, (value) {
_name = value!;
}),
SizedBox(height: 20),
text("Phone number"),
SizedBox(height: 10),
textFormField("", (value) {
if (!_phoneNumberRegExp.hasMatch(value!)) {
return "Please enter your phone number";
}
return null;
}, (value) {
_phoneNumber = value!;
}),
SizedBox(height: 20),
text("Password"),
SizedBox(height: 10),
textFormField("", (value) {
if (value!.isEmpty) {
return "Please enter your password";
} else if (value.length < 8) {
return "Password must be at least 8 characters long";
}
return null;
}, (value) {
_password = value!;
}, obscureText: true),
SizedBox(height: 20),
text("Repeat password"),
SizedBox(height: 10),
textFormField("", (value) {
if (value!.isEmpty) {
return "Please enter your password";
} else if (value != _password) {
return "Password doesn't match";
}
return null;
}, (value) {
_confirmPassword = value!;
}, obscureText: true),
],
),
),
SizedBox(height: Get.height >= 876 ? 150 : 50),
_isLoading
? CircularProgressIndicator()
: SizedBox(
width: double.infinity,
child: InkWell(
onTap: () {
Get.off(NavigationBarBottom());
},
child: Container(
height: 50,
width: Get.width,
decoration: BoxDecoration(
color: ColorResources.red,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
"CREATE YOUR FREE ACCOUNT",
style: TextStyle(
fontFamily:
TextFontFamily.helveticaNeueCyrRoman,
fontWeight: FontWeight.w700,
fontSize: 13.5,
color: ColorResources.white),
),
),
),
),
),
SizedBox(height: 20),
Center(
child: RichText(
text: TextSpan(
text: "Do you already have a MyBank account?",
style: TextStyle(
fontSize: 13.5,
fontWeight: FontWeight.w300,
fontFamily: TextFontFamily.helveticaNeueCyrRoman,
color: ColorResources.white2,
),
children: <TextSpan>[
TextSpan(
recognizer: TapGestureRecognizer()
..onTap = () => Get.to(LogInScreen()),
text: " Sign in here",
style: TextStyle(
fontSize: 14,
fontFamily: TextFontFamily.helveticaNeueCyrRoman,
fontWeight: FontWeight.w300,
color: ColorResources.red,
),
),
],
),
),
),
],
),
),
),
);
}
}
I keep getting this red squiggly lines when i return null and with the popup saying "The return type ‘Null’ isn’t a ‘String’, as required by the closure’s" The code runs but the red it still shows this red lines under the return null statement. I can’t seem to pinpoint the errors. And the signup page text are now centralised instead of aligning from the left. [enter image description here](https://i.stack.imgur.com/speeC.jpg)
2
Answers
Change this:
To this :
To make validator output nullable.
Change this :
To this :
To align all children of Column to the left.
It’s all because in your
Function/Widget you ask for a
String Function(String?)
as a function for your validatorAnd this declaration means that this function shouldn’t return null
Just change it to
String? Function(String?)
and this error will go