I am creating a flutter app. For the code reusability, I need to differentiate Email and password forms and Login Button, I am not sure how to properly to pass the input from textformfield to the button for the form to be validated, when clicking it. Here's my code. Note that im a beginner in flutter.
//This is my EmailTextForm class:
class EmailTextForm extends StatelessWidget {
String email;
EmailTextForm({Key key, this.email}) : super(key: key);
Widget build(BuildContext context) {
return Container(
width: 370.0,
height: 54.0,
child: TextFormField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
//DEFAULT STATE OF THE BORDER(FOCUSED BORDER DOWN BELOW TO HAVE MORE CONTROL OF THE FORM)
borderSide: BorderSide(
width: 1.0, color: Color.fromRGBO(16, 25, 53, 0.1)),
borderRadius: BorderRadius.circular(12.0)),
focusedBorder: OutlineInputBorder(
//ON FOCUSED BORDER TO NOT CHANGE STATE WHILE BEING PRESSED ON
borderSide: BorderSide(
width: 1.0, color: Color.fromRGBO(16, 25, 53, 0.1)),
borderRadius: BorderRadius.circular(12.0),
),
prefixIcon: Icon(Icons.mail, color: Color(0xFF9FA3AE)),
hintText: 'El.Paštas',
hintStyle: TextStyle(
fontFamily: 'Sora',
fontSize: 16.0,
color: Color(0xFF9FA3AE),
),
),
validator: (input) =>
!input.contains('@') ? 'Please enter a valid email' : null,
onSaved: (input) => email = input,
));
}
}
//This is the button class.
import 'package:flutter/material.dart';
import 'dart:math' as math;
class LoginButton extends StatelessWidget {
final _formKey = GlobalKey<FormState>();
String email;
String password;
_submit() {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
print('validated');
//logging in the user
}
}
@override
Widget build(BuildContext context) {
//Container to manipulate button design
return Container(
width: 370.0,
height: 54.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular((12.0)),
gradient: LinearGradient(
//change gradient, wrong value, maybe something in AdobeXD.
colors: <Color>[Color(0xFF00BAFF), Color(0xFF448CFA)],
stops: [0.0, 1.0],
begin: Alignment(-1.0, 0.0),
end: Alignment(1.0, 0.0),
transform: GradientRotation(math.pi / 2),
),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(48, 183, 241, 1.0),
offset: Offset(0.0, 4.0),
blurRadius: 12.0,
),
],
),
//@@@@ WHEN BUTTON IS PRESSED @@@@
child: ElevatedButton(
onPressed: _submit,
child: Text(
'Prisijungti',
),
style: ElevatedButton.styleFrom(
//COLOR OF THE TEXT INSIDE THE BUTTON
onPrimary: Color(0xFFFFFFFF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
primary: Colors.transparent,
textStyle: TextStyle(
//Text inside button style
fontSize: 16.0,
fontWeight: FontWeight.w600,
fontFamily: 'Sora',
)),
));
}
}