Develop Reference

Flutter: How to make the functions accept integer value after adding these field data values in the form?

Referring to someone's post, I'm trying to include a new attribute, Age which only receives integer value. However, when using TextEditingController and doing adding to the list, it's about just String which usually doesn't accept integer.
I want to input just numbers (integers) on the textfield 'age' and make the Age value accepted for adding to the list. I tried to use Parse on the class for 'age' but it causes an exception: The following FormatException was thrown building Builder:
Invalid number (at character 1)
My intention is to put the int values into the list as well. Is there any way to do that?
This is the code I've been working on.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Episode5()));
class Episode5 extends StatefulWidget {
#override
_Episode5State createState() => _Episode5State();
}
class User {
String name;
String age;
int age1;
User({this.name = '', this.age = ''}) : age1 = int.parse(age);
}
class _Episode5State extends State<Episode5> {
TextEditingController nameController = TextEditingController();
TextEditingController ageController = TextEditingController();
int currentIndex = 0;
final form = GlobalKey<FormState>();
static var _focusNode = new FocusNode();
bool update = false;
User user = User(age: '', name: '');
List<User> userList = [
User(name: "a", age: '12'),
User(name: "d", age: '23'),
User(name: "c", age: '19'),
];
#override
Widget build(BuildContext context) {
Widget bodyData() => DataTable(
onSelectAll: (b) {},
sortColumnIndex: 0,
sortAscending: true,
columns: <DataColumn>[
DataColumn(label: Text("Name"), tooltip: "To Display name"),
DataColumn(label: Text("Age"), tooltip: "To Display Age"),
DataColumn(label: Text("Update"), tooltip: "Update data"),
DataColumn(label: Text("Delete"), tooltip: "Delete data"),
],
rows: userList
.map(
(name) => DataRow(
cells: [
DataCell(
Text(name.name),
),
DataCell(
Text(name.age),
),
DataCell(
IconButton(
onPressed: () {
_updateTextControllers(name); // new function here
},
icon: Icon(
Icons.edit,
color: Colors.black,
),
),
),
DataCell(
IconButton(
onPressed: () =>
_deleteTextControllers(name), // new function here
icon: Icon(
Icons.delete,
color: Colors.black,
),
),
),
],
),
)
.toList(),
);
return Scaffold(
appBar: AppBar(
title: Text("Data add to List Table using Form"),
),
body: Container(
child: Column(
children: <Widget>[
bodyData(),
Padding(
padding: EdgeInsets.all(10.0),
child: Form(
key: form,
child: Container(
child: Column(
children: <Widget>[
TextFormField(
controller: nameController,
focusNode: _focusNode,
keyboardType: TextInputType.text,
autocorrect: false,
onSaved: (value) {
user.name = value!;
},
maxLines: 1,
validator: (value) {
if (value!.isEmpty) {
return 'This field is required';
}
return null;
},
decoration: new InputDecoration(
labelText: 'Name',
hintText: 'Name',
labelStyle: new TextStyle(
decorationStyle: TextDecorationStyle.solid),
),
),
SizedBox(
height: 10,
),
TextFormField(
controller: ageController,
keyboardType: TextInputType.text,
autocorrect: false,
maxLines: 1,
validator: (value) {
if (value!.isEmpty) {
return 'This field is required';
}
return null;
},
onSaved: (value) {
user.age = value!;
},
decoration: new InputDecoration(
labelText: 'Age',
hintText: 'Age',
labelStyle: new TextStyle(
decorationStyle: TextDecorationStyle.solid)),
),
SizedBox(
height: 10,
),
Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextButton(
child: Text("Add"),
onPressed: () {
if (validate() == true) {
form.currentState?.save();
addUserToList(
user.name,
user.age,
);
clearForm();
}
},
),
TextButton(
child: Text("Update"),
onPressed: () {
if (validate() == true) {
form.currentState?.save();
updateForm(user);
clearForm();
}
},
),
],
),
),
],
),
],
),
),
),
),
],
),
),
);
}
void updateForm(User user) {
setState(() {
User user = User(name: nameController.text, age: ageController.text);
userList[currentIndex] = user;
});
}
void _updateTextControllers(User user) {
setState(() {
nameController.text = user.name;
ageController.text = user.age;
});
}
void _deleteTextControllers(User user) {
setState(() {
int currentIndex = userList.indexOf(user);
userList.removeAt(currentIndex);
});
}
void addUserToList(name, age) {
setState(() {
userList.add(User(name: name, age: age));
});
}
clearForm() {
nameController.clear();
ageController.clear();
}
bool validate() {
var valid = form.currentState!.validate();
if (valid) form.currentState!.save();
return valid;
}
}

the parse method cant handle exception, like here you are trying to convert empty string'' to int. I will suggest using .tryParse and provide a default value on exception(null) case, or make age nullable.
User({
this.name = '',
this.age = '',
}) : age1 = int.tryParse(age) ?? 0;
or
class User {
String name;
String age;
int? age1;
User({
this.name = '',
this.age = '',
}) : age1 = int.tryParse(age);
}
I will prefer with final and const constructor.
class User {
String name;
int? age1;
User({
required this.name,
this.age1,
});
}
and creating instance
final User user = User(name: "name", age1: int.tryParse("123"));

Solution throughout the discussion in comments.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MaterialApp(home: Episode5()));
class Episode5 extends StatefulWidget {
#override
_Episode5State createState() => _Episode5State();
}
class User {
String name;
int? age1;
User({
required this.name,
this.age1,
});
}
class _Episode5State extends State<Episode5> {
TextEditingController nameController = TextEditingController();
TextEditingController ageController = TextEditingController();
int currentIndex = 0;
final form = GlobalKey<FormState>();
static var _focusNode = new FocusNode();
bool update = false;
final User user = User(name: "", age1: int.tryParse(""));
List<User> userList = [
User(name: "a", age1: 12),
User(name: "d", age1: 23),
User(name: "c", age1: 19),
];
#override
Widget build(BuildContext context) {
Widget bodyData() => DataTable(
onSelectAll: (b) {},
sortColumnIndex: 0,
sortAscending: true,
columns: <DataColumn>[
DataColumn(label: Text("Name"), tooltip: "To Display name"),
DataColumn(label: Text("Age"), tooltip: "To Display Age"),
DataColumn(label: Text("Update"), tooltip: "Update data"),
DataColumn(label: Text("Delete"), tooltip: "Delete data"),
],
rows: userList
.map(
(name) => DataRow(
cells: [
DataCell(
Text(name.name),
),
DataCell(
Text("${name.age1 ?? 0}"),
),
DataCell(
IconButton(
onPressed: () {
_updateTextControllers(name); // new function here
},
icon: Icon(
Icons.edit,
color: Colors.black,
),
),
),
DataCell(
IconButton(
onPressed: () =>
_deleteTextControllers(name), // new function here
icon: Icon(
Icons.delete,
color: Colors.black,
),
),
),
],
),
)
.toList(),
);
return Scaffold(
appBar: AppBar(
title: Text("Data add to List Table using Form"),
),
body: Container(
child: Column(
children: <Widget>[
bodyData(),
Padding(
padding: EdgeInsets.all(10.0),
child: Form(
key: form,
child: Container(
child: Column(
children: <Widget>[
TextFormField(
controller: nameController,
focusNode: _focusNode,
keyboardType: TextInputType.text,
autocorrect: false,
onSaved: (value) {
user.name = value!;
},
maxLines: 1,
validator: (value) {
if (value!.isEmpty) {
return 'This field is required';
}
return null;
},
decoration: new InputDecoration(
labelText: 'Name',
hintText: 'Name',
labelStyle: new TextStyle(
decorationStyle: TextDecorationStyle.solid),
),
),
SizedBox(
height: 10,
),
TextFormField(
controller: ageController,
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
autocorrect: false,
maxLines: 1,
validator: (value) {
if (value!.isEmpty) {
return 'This field is required';
}
return null;
},
onSaved: (value) {
user.age1 = int.tryParse(value ?? "");
},
decoration: new InputDecoration(
labelText: 'Age',
hintText: 'Age',
labelStyle: new TextStyle(
decorationStyle: TextDecorationStyle.solid)),
),
SizedBox(
height: 10,
),
Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextButton(
child: Text("Add"),
onPressed: () {
if (validate() == true) {
form.currentState?.save();
addUserToList(
user.name,
user.age1,
);
clearForm();
}
},
),
TextButton(
child: Text("Update"),
onPressed: () {
if (validate() == true) {
form.currentState?.save();
updateForm(user);
clearForm();
}
},
),
],
),
),
],
),
],
),
),
),
),
],
),
),
);
}
void updateForm(User user) {
setState(() {
User user = User(
name: nameController.text, age1: int.tryParse(ageController.text));
userList[currentIndex] = user;
});
}
void _updateTextControllers(User user) {
setState(() {
nameController.text = user.name;
ageController.text = user.age1.toString();
});
}
void _deleteTextControllers(User user) {
setState(() {
int currentIndex = userList.indexOf(user);
userList.removeAt(currentIndex);
});
}
void addUserToList(name, age1) {
setState(() {
userList.add(User(name: name, age1: age1));
});
}
clearForm() {
nameController.clear();
ageController.clear();
}
bool validate() {
var valid = form.currentState!.validate();
if (valid) form.currentState!.save();
return valid;
}
}

Why i can't post data from signUp form to firebase

i am a newbie to Flutter and I am building a Flutter mobile app, i don't why i can't post the data from my Sign Up form to the Authentication in fireBase ,
It is my Auth class ----------------------------------------------------------------------------
class Auth with ChangeNotifier {
late String _token;
late DateTime _expirytDate;
late String _userId;
Future<void> signup(String email, String password) async {
const url =
'https://identitytoolkit.googleapis.com/v1/accounts:signInWithCustomToken?key=AIzaSyDL5WN64rhcYbYbiLutVA33Ekjixj0M3BE';
final response = await http.post(Uri.parse(url),
body: json.encode({
'email': email,
'password': password,
'returnSecureToken': true,
}));
}
}
Here is my AuthCard Class
class AuthCard extends StatefulWidget {
#override
_AuthCardState createState() => _AuthCardState();
}
class _AuthCardState extends State<AuthCard> {
final GlobalKey<FormState> _formKey = GlobalKey();
AuthMode _authMode = AuthMode.Login;
Map<String, String> _authData = {
'email': '',
'password': '',
};
var _isLoading = false;
final _passwordController = TextEditingController();
Future<void> _submit() async {
if (!_formKey.currentState!.validate()) {
// Invalid!
return;
}
_formKey.currentState!.save();
setState(() {
_isLoading = true;
});
if (_authMode == AuthMode.Login) {
// Log user in
} else {
// Sign user up
await Provider.of<Auth>(context).signup(_authData['email']! ,_authData['password']! );
}
setState(() {
_isLoading = false;
});
}
void _switchAuthMode() {
if (_authMode == AuthMode.Login) {
setState(() {
_authMode = AuthMode.Signup;
});
} else {
setState(() {
_authMode = AuthMode.Login;
});
}
}
#override
Widget build(BuildContext context) {
final deviceSize = MediaQuery.of(context).size;
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 8.0,
child: Container(
height: _authMode == AuthMode.Signup ? 320 : 260,
constraints:
BoxConstraints(minHeight: _authMode == AuthMode.Signup ? 320 : 260),
width: deviceSize.width * 0.75,
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'E-Mail'),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value!.isEmpty || !value.contains('#')) {
return 'Invalid email!';
}
return null;
},
onSaved: (value) {
_authData['email'] = value!;
},
),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
controller: _passwordController,
validator: (value) {
if (value!.isEmpty || value.length < 5) {
return 'Password is too short!';
}
},
onSaved: (value) {
_authData['password'] = value!;
},
),
if (_authMode == AuthMode.Signup)
TextFormField(
enabled: _authMode == AuthMode.Signup,
decoration: InputDecoration(labelText: 'Confirm Password'),
obscureText: true,
validator: _authMode == AuthMode.Signup
? (value) {
if (value != _passwordController.text) {
return 'Passwords do not match!';
}
}
: null,
),
SizedBox(
height: 20,
),
if (_isLoading)
CircularProgressIndicator()
else
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
child: Text(
_authMode == AuthMode.Login ? 'LOGIN' : 'SIGN UP'),
onPressed: _submit,
),
),
TextButton(
child: Padding(
padding:
EdgeInsets.symmetric(horizontal: 30.0, vertical: 4),
child: Text(
'${_authMode == AuthMode.Login ? 'SIGNUP' : 'LOGIN'} INSTEAD'),
),
onPressed: _switchAuthMode,
style: TextButton.styleFrom(primary: Colors.amber),
),
],
),
),
),
),
);
}
}
Here is my Error and I don't understand the error.
Error: Assertion failed:
file:///C:/Users/DELL/development/SDK/flutter/.pub-cache/hosted/pub.dartlang.org/provider-6.0.3/lib/src/provider.dart:274:7
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49 throw_
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 29:3 assertFailed
packages/provider/src/provider.dart 276:11
of
packages/flutter_application_1/screens/auth_screen.dart 114:40
_submit
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async
packages/flutter_application_1/screens/auth_screen.dart 101:23
[_submit]
packages/flutter/src/material/ink_well.dart 1072:21
handleTap
packages/flutter/src/gestures/recognizer.dart 253:24
invokeCallback
packages/flutter/src/gestures/tap.dart 627:11
handleTapUp
packages/flutter/src/gestures/tap.dart 306:5
[_checkUp]
packages/flutter/src/gestures/tap.dart 239:7
handlePrimaryPointer
packages/flutter/src/gestures/recognizer.dart 615:9
handleEvent
packages/flutter/src/gestures/pointer_router.dart 98:12
[_dispatch]
packages/flutter/src/gestures/pointer_router.dart 143:9
<fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/linked_hash_map.dart 21:13 forEach
packages/flutter/src/gestures/pointer_router.dart 141:17
[_dispatchEventToRoutes]
packages/flutter/src/gestures/pointer_router.dart 127:7
route
packages/flutter/src/gestures/binding.dart 460:19
handleEvent
packages/flutter/src/gestures/binding.dart 440:14
dispatchEvent
packages/flutter/src/rendering/binding.dart 337:11
dispatchEvent
packages/flutter/src/gestures/binding.dart 395:7
[_handlePointerEventImmediately]
packages/flutter/src/gestures/binding.dart 357:5
handlePointerEvent
packages/flutter/src/gestures/binding.dart 314:7
[_flushPointerEventQueue]
packages/flutter/src/gestures/binding.dart 295:7
[_handlePointerDataPacket]
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/platform_dispatcher.dart 1183:13 invoke1

You must use Try-Catch Block when interacting with Futures and await.
2ndly when you are passing the email and password to the Auth class signup function make it clear with Cast that which value you are passing.
See the snippet below with firebase signup entry
class AuthCard extends StatefulWidget {
const AuthCard({super.key});
#override
_AuthCardState createState() => _AuthCardState();
}
class _AuthCardState extends State<AuthCard> {
final GlobalKey<FormState> _formKey = GlobalKey();
AuthMode _authMode = AuthMode.Login;
Map<String, String> _authData = {
'email': '',
'password': '',
};
var _isLoading = false;
final _passwordController = TextEditingController();
Future<void> _submit() async {
if (!_formKey.currentState!.validate()) {
// Invalid!
return;
}
_formKey.currentState!.save();
setState(() {
_isLoading = true;
});
try {
if (_authMode == AuthMode.Login) {
// return;
} else {
await Provider.of<Auth>(context, listen: false).userSignUp(
_authData['email'] as String,
_authData['password'] as String,
);
}
} catch (error) {
print(error);
}
setState(() {
_isLoading = false;
});
}
void _switchAuthMode() {
if (_authMode == AuthMode.Login) {
setState(() {
_authMode = AuthMode.Signup;
});
} else {
setState(() {
_authMode = AuthMode.Login;
});
}
}
#override
Widget build(BuildContext context) {
final deviceSize = MediaQuery.of(context).size;
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 8.0,
child: Container(
height: _authMode == AuthMode.Signup ? 320 : 260,
constraints:
BoxConstraints(minHeight: _authMode == AuthMode.Signup ? 320 : 260),
width: deviceSize.width * 0.75,
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'E-Mail'),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value!.isEmpty || !value.contains('#')) {
return 'Invalid email!';
}
return null;
},
onSaved: (value) {
_authData['email'] = value!;
},
),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
controller: _passwordController,
validator: (value) {
if (value!.isEmpty || value.length < 5) {
return 'Password is too short!';
}
},
onSaved: (value) {
_authData['password'] = value!;
},
),
if (_authMode == AuthMode.Signup)
TextFormField(
enabled: _authMode == AuthMode.Signup,
decoration: InputDecoration(labelText: 'Confirm Password'),
obscureText: true,
validator: _authMode == AuthMode.Signup
? (value) {
if (value != _passwordController.text) {
return 'Passwords do not match!';
}
}
: null,
),
SizedBox(
height: 20,
),
if (_isLoading)
CircularProgressIndicator()
else
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
child: Text(
_authMode == AuthMode.Login ? 'LOGIN' : 'SIGN UP'),
onPressed: _submit,
),
),
TextButton(
child: Padding(
padding:
EdgeInsets.symmetric(horizontal: 30.0, vertical: 4),
child: Text(
'${_authMode == AuthMode.Login ? 'SIGNUP' : 'LOGIN'} INSTEAD'),
),
onPressed: _switchAuthMode,
style: TextButton.styleFrom(primary: Colors.amber),
),
],
),
),
),
),
);
}
}
Here is the signup data posted to the firebase.

setState is not working inside the floating action button and not able to render the ui in flutter?

I am trying to use setState class inside the floating action button but, setState class is not able to rerender the ui.Here is my code:
Here i use isLogin bool type variable so it able to toggle the two different ui.In fact the is not abe to working when ever the setState function call it must change the value of that variable is rerender the ui but it is not working .
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class AuthForm extends StatefulWidget {
#override
_AuthFormState createState() => _AuthFormState();
}
class _AuthFormState extends State<AuthForm> {
#override
Widget build(BuildContext context) {
final _formKey = GlobalKey<FormState>();
var _isLogin = true;
var _userEmail = '';
var _userName = '';
var _userPassword = '';
void _trySubmit() {
final isValid = _formKey.currentState.validate();
FocusScope.of(context).unfocus();
if (isValid) {
_formKey.currentState.save();
print(_userEmail);
print(_userPassword);
print(_userName);
}
}
return Center(
child: Card(
margin: EdgeInsets.all(20),
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(16),
child: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextFormField(
validator: (value) {
if (value.isEmpty || !value.contains('#')) {
return 'Please enter the valid email address.';
}
return null;
},
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email Address',
),
onSaved: (newValue) {
_userEmail = newValue;
},
),
TextFormField(
validator: (value) {
if (value.isEmpty || value.length < 4) {
return 'Please enter at least 4 character.';
}
return null;
},
decoration: InputDecoration(
labelText: 'Username',
),
onSaved: (newValue) {
_userName = newValue;
},
),
TextFormField(
validator: (value) {
if (value.isEmpty || value.length < 7) {
return 'Password must be at least 7 character long.';
}
return null;
},
decoration: InputDecoration(
labelText: 'Password',
),
obscureText: true,
onSaved: (newValue) {
_userPassword = newValue;
},
),
SizedBox(
height: 20,
),
RaisedButton(
onPressed: () {
_trySubmit();
},
child: Text(
_isLogin ? 'Login' : 'Signup',
),
),
FlatButton(
textColor: Theme.of(context).primaryColor,
child: Text(
_isLogin
? 'Create New Account.'
: 'I Already Have Account.',
),
onPressed: () {
setState(() {
_isLogin = !_isLogin;
});
},
),
],
),
),
),
),
),
);
}
}

The problem is with the var _isLogin = true; you have defined it inside the build method that's why whenever the setState is called it becomes true and does not change the ui.
Try placing it outside the build method.
Example below:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return AuthForm();
}
}
class AuthForm extends StatefulWidget {
#override
_AuthFormState createState() => _AuthFormState();
}
class _AuthFormState extends State<AuthForm> {
var _isLogin = true;
#override
Widget build(BuildContext context) {
final _formKey = GlobalKey<FormState>();
var _userEmail = '';
var _userName = '';
var _userPassword = '';
void _trySubmit() {
final isValid = _formKey.currentState.validate();
FocusScope.of(context).unfocus();
if (isValid) {
_formKey.currentState.save();
print(_userEmail);
print(_userPassword);
print(_userName);
}
}
return MaterialApp(
home: Scaffold(
body: Center(
child: Card(
margin: EdgeInsets.all(20),
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(16),
child: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextFormField(
validator: (value) {
if (value.isEmpty || !value.contains('#')) {
return 'Please enter the valid email address.';
}
return null;
},
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email Address',
),
onSaved: (newValue) {
_userEmail = newValue;
},
),
TextFormField(
validator: (value) {
if (value.isEmpty || value.length < 4) {
return 'Please enter at least 4 character.';
}
return null;
},
decoration: InputDecoration(
labelText: 'Username',
),
onSaved: (newValue) {
_userName = newValue;
},
),
TextFormField(
validator: (value) {
if (value.isEmpty || value.length < 7) {
return 'Password must be at least 7 character long.';
}
return null;
},
decoration: InputDecoration(
labelText: 'Password',
),
obscureText: true,
onSaved: (newValue) {
_userPassword = newValue;
},
),
SizedBox(
height: 20,
),
RaisedButton(
onPressed: () {
_trySubmit();
},
child: Text(
_isLogin ? 'Login' : 'Signup',
),
),
FlatButton(
textColor: Theme.of(context).primaryColor,
child: Text(
_isLogin
? 'Create New Account.'
: 'I Already Have Account.',
),
onPressed: () {
setState(() {
_isLogin = !_isLogin;
});
},
),
],
),
),
),
),
),
),
),
);
}
}
Let me know if it works.

Datepicker inside stepper

So I'm actually pretty new with flutter and this is my first project. Everything went well, until this problem came up.
Recently, I added a stepperBody into my page and in one of the steps there should be a datePicker integrated. Unfortunately, I can't really resolve the problem that is coming up.
I'm constantly getting an "Only static members can be accessed in initializers." error.
Help is appreciated.
I'm using the flutter_datetime_picker plugin.
Here's my code:
class StepperBody extends StatefulWidget {
#override
_StepperBodyState createState() => _StepperBodyState();
}
class _StepperBodyState extends State<StepperBody> {
String _date = "Not set";
int currStep = 0;
static var _focusNode = FocusNode();
GlobalKey<FormState> _formKey = GlobalKey<FormState>();
static MyData data = MyData();
#override
void initState() {
super.initState();
_focusNode.addListener(() {
setState(() {});
print('Has focus: $_focusNode.hasFocus');
});
}
List<Step> steps = [
Step(
title: const Text('Name',
style: TextStyle(
fontFamily: 'Maax',
fontSize: 20,
),),
//subtitle: const Text('Enter your name'),
isActive: true,
//state: StepState.error,
state: StepState.indexed,
content: Form(
key: formKeys[0],
child: Column(
children: <Widget>[
TextFormField(
style: TextStyle(
fontFamily: 'Maax',
fontWeight: FontWeight.w500,
),
focusNode: _focusNode,
keyboardType: TextInputType.text,
autocorrect: false,
onSaved: (String value) {
data.title = value;
},
maxLines: 1,
//initialValue: 'Aseem Wangoo',
validator: (value) {
if (value.isEmpty || value.length < 1) {
return 'Please enter title';
}
},
decoration: InputDecoration(
labelText: 'What is the name of the test?',
hintText: 'Enter a name',
//filled: true,
icon: const FaIcon(FontAwesomeIcons.signature),
labelStyle:
TextStyle(decorationStyle: TextDecorationStyle.solid, fontFamily: 'Maax', fontWeight: FontWeight.w500)),
),
],
),
)),
Step(
title: const Text('Date'),
//subtitle: const Text('Subtitle'),
isActive: true,
//state: StepState.editing,
state: StepState.indexed,
content: Form(
key: formKeys[1],
child: Column(
children: <Widget>[
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
elevation: 4.0,
onPressed: () {
DatePicker.showDatePicker(context,
theme: DatePickerTheme(
containerHeight: 210.0,
),
showTitleActions: true,
minTime: DateTime(2000, 1, 1),
maxTime: DateTime(2022, 12, 31), onConfirm: (date) {
print('confirm $date');
_date = '${date.year} - ${date.month} - ${date.day}';
setState(() {});
}, currentTime: DateTime.now(), locale: LocaleType.en);
},
child: Container(
alignment: Alignment.center,
height: 50.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Icon(
Icons.date_range,
size: 18.0,
color: Colors.teal,
),
Text(
" $_date",
style: TextStyle(
color: Colors.teal,
fontWeight: FontWeight.bold,
fontSize: 18.0),
),
],
),
)
],
),
Text(
" Change",
style: TextStyle(
color: Colors.teal,
fontWeight: FontWeight.bold,
fontSize: 18.0),
),
],
),
),
color: Colors.white,
),
TextFormField(
keyboardType: TextInputType.phone,
autocorrect: false,
validator: (value) {
if (value.isEmpty || value.length < 10) {
return 'Please enter valid number';
}
},
onSaved: (String value) {
data.days = value;
},
maxLines: 1,
decoration: InputDecoration(
labelText: 'Enter your number',
hintText: 'Enter a number',
icon: const Icon(Icons.phone),
labelStyle:
TextStyle(decorationStyle: TextDecorationStyle.solid)),
),
],
),
)),
Step(
title: const Text('Email'),
// subtitle: const Text('Subtitle'),
isActive: true,
state: StepState.indexed,
// state: StepState.disabled,
content: Form(
key: formKeys[2],
child: Column(
children: <Widget>[
TextFormField(
keyboardType: TextInputType.emailAddress,
autocorrect: false,
validator: (value) {
if (value.isEmpty || !value.contains('#')) {
return 'Please enter valid email';
}
},
onSaved: (String value) {
data.words = value;
},
maxLines: 1,
decoration: InputDecoration(
labelText: 'Enter your email',
hintText: 'Enter a email address',
icon: const Icon(Icons.email),
labelStyle:
TextStyle(decorationStyle: TextDecorationStyle.solid)),
),
],
),
)),
Step(
title: const Text('Age'),
// subtitle: const Text('Subtitle'),
isActive: true,
state: StepState.indexed,
content: Form(
key: formKeys[3],
child: Column(
children: <Widget>[
TextFormField(
keyboardType: TextInputType.number,
autocorrect: false,
validator: (value) {
if (value.isEmpty || value.length > 2) {
return 'Please enter valid age';
}
},
maxLines: 1,
onSaved: (String value) {
data.rep = value;
},
decoration: InputDecoration(
labelText: 'Enter your age',
hintText: 'Enter age',
icon: const Icon(Icons.explicit),
labelStyle:
TextStyle(decorationStyle: TextDecorationStyle.solid)),
),
],
),
)),
// Step(
// title: const Text('Fifth Step'),
// subtitle: const Text('Subtitle'),
// isActive: true,
// state: StepState.complete,
// content: const Text('Enjoy Step Fifth'))
];
#override
Widget build(BuildContext context) {
void showSnackBarMessage(String message,
[MaterialColor color = Colors.red]) {
Scaffold
.of(context)
.showSnackBar( SnackBar(content: Text(message)));
}
void _submitDetails() {
final FormState formState = _formKey.currentState;
if (!formState.validate()) {
showSnackBarMessage('Please enter correct data');
} else {
formState.save();
print("Name: ${data.title}");
print("Phone: ${data.days}");
print("Email: ${data.words}");
print("Age: ${data.rep}");
showDialog(
context: context,
child: AlertDialog(
title: Text("Details"),
//content: Text("Hello World"),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text("Name : " + data.title),
Text("Phone : " + data.days),
Text("Email : " + data.words),
Text("Age : " + data.rep),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
));
}
}
return Container(
child: Form(
key: _formKey,
child: ListView(children: <Widget>[
Stepper(
steps: steps,
type: StepperType.vertical,
currentStep: this.currStep,
onStepContinue: () {
setState(() {
if(formKeys[currStep].currentState.validate()) {
if (currStep < steps.length - 1) {
currStep = currStep + 1;
} else {
currStep = 0;
}
}
// else {
// Scaffold
// .of(context)
// .showSnackBar( SnackBar(content: Text('$currStep')));
// if (currStep == 1) {
// print('First Step');
// print('object' + FocusScope.of(context).toStringDeep());
// }
// }
});
},
onStepCancel: () {
setState(() {
if (currStep > 0) {
currStep = currStep - 1;
} else {
currStep = 0;
}
});
},
onStepTapped: (step) {
setState(() {
currStep = step;
});
},
),
RaisedButton(
child: Text(
'Save details',
style: TextStyle(color: Colors.white),
),
onPressed: _submitDetails,
color: Colors.blue,
),
]),
));
}
}

You can copy paste run full code below
You can move steps definition to build to avoid Only static members can be accessed in initializers and allow _date to change after setState
To avoid known issue of flutter_datetime_picker, I use this git
flutter_datetime_picker:
git:
url: https://github.com/derohimat/flutter_datetime_picker.git
code snippet
#override
Widget build(BuildContext context) {
steps = [
Step(
working demo
full code
import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
class MyData {
String title;
String days;
String words;
String rep;
MyData({this.title, this.days, this.words, this.rep});
}
class StepperBody extends StatefulWidget {
#override
_StepperBodyState createState() => _StepperBodyState();
}
class _StepperBodyState extends State<StepperBody> {
String _date = "Not set";
int currStep = 0;
static var _focusNode = FocusNode();
GlobalKey<FormState> _formKey = GlobalKey<FormState>();
static MyData data = MyData();
List<GlobalKey<FormState>> formKeys = [
GlobalKey<FormState>(),
GlobalKey<FormState>(),
GlobalKey<FormState>(),
GlobalKey<FormState>()
];
List<Step> steps = [];
#override
void initState() {
super.initState();
_focusNode.addListener(() {
setState(() {});
print('Has focus: $_focusNode.hasFocus');
});
}
#override
Widget build(BuildContext context) {
steps = [
Step(
title: const Text(
'Name',
style: TextStyle(
fontFamily: 'Maax',
fontSize: 20,
),
),
//subtitle: const Text('Enter your name'),
isActive: true,
//state: StepState.error,
state: StepState.indexed,
content: Form(
key: formKeys[0],
child: Column(
children: <Widget>[
TextFormField(
style: TextStyle(
fontFamily: 'Maax',
fontWeight: FontWeight.w500,
),
focusNode: _focusNode,
keyboardType: TextInputType.text,
autocorrect: false,
onSaved: (String value) {
data.title = value;
},
maxLines: 1,
//initialValue: 'Aseem Wangoo',
validator: (value) {
if (value.isEmpty || value.length < 1) {
return 'Please enter title';
}
},
decoration: InputDecoration(
labelText: 'What is the name of the test?',
hintText: 'Enter a name',
//filled: true,
icon: Icon(Icons.add),
labelStyle: TextStyle(
decorationStyle: TextDecorationStyle.solid,
fontFamily: 'Maax',
fontWeight: FontWeight.w500)),
),
],
),
)),
Step(
title: const Text('Date'),
//subtitle: const Text('Subtitle'),
isActive: true,
//state: StepState.editing,
state: StepState.indexed,
content: Form(
key: formKeys[1],
child: Column(
children: <Widget>[
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
elevation: 4.0,
onPressed: () {
DatePicker.showDatePicker(context,
theme: DatePickerTheme(
containerHeight: 210.0,
),
showTitleActions: true,
minTime: DateTime(2000, 1, 1),
maxTime: DateTime(2022, 12, 31), onConfirm: (date) {
print('confirm $date');
_date = '${date.year} - ${date.month} - ${date.day}';
print('date ${_date}');
setState(() {});
}, currentTime: DateTime.now(), locale: LocaleType.en);
},
child: Container(
alignment: Alignment.center,
height: 50.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Icon(
Icons.date_range,
size: 18.0,
color: Colors.teal,
),
Text(
" $_date",
style: TextStyle(
color: Colors.teal,
fontWeight: FontWeight.bold,
fontSize: 18.0),
),
],
),
)
],
),
Text(
" Change",
style: TextStyle(
color: Colors.teal,
fontWeight: FontWeight.bold,
fontSize: 18.0),
),
],
),
),
color: Colors.white,
),
TextFormField(
keyboardType: TextInputType.phone,
autocorrect: false,
validator: (value) {
if (value.isEmpty || value.length < 10) {
return 'Please enter valid number';
}
},
onSaved: (String value) {
data.days = value;
},
maxLines: 1,
decoration: InputDecoration(
labelText: 'Enter your number',
hintText: 'Enter a number',
icon: const Icon(Icons.phone),
labelStyle: TextStyle(
decorationStyle: TextDecorationStyle.solid)),
),
],
),
)),
Step(
title: const Text('Email'),
// subtitle: const Text('Subtitle'),
isActive: true,
state: StepState.indexed,
// state: StepState.disabled,
content: Form(
key: formKeys[2],
child: Column(
children: <Widget>[
TextFormField(
keyboardType: TextInputType.emailAddress,
autocorrect: false,
validator: (value) {
if (value.isEmpty || !value.contains('#')) {
return 'Please enter valid email';
}
},
onSaved: (String value) {
data.words = value;
},
maxLines: 1,
decoration: InputDecoration(
labelText: 'Enter your email',
hintText: 'Enter a email address',
icon: const Icon(Icons.email),
labelStyle: TextStyle(
decorationStyle: TextDecorationStyle.solid)),
),
],
),
)),
Step(
title: const Text('Age'),
// subtitle: const Text('Subtitle'),
isActive: true,
state: StepState.indexed,
content: Form(
key: formKeys[3],
child: Column(
children: <Widget>[
TextFormField(
keyboardType: TextInputType.number,
autocorrect: false,
validator: (value) {
if (value.isEmpty || value.length > 2) {
return 'Please enter valid age';
}
},
maxLines: 1,
onSaved: (String value) {
data.rep = value;
},
decoration: InputDecoration(
labelText: 'Enter your age',
hintText: 'Enter age',
icon: const Icon(Icons.explicit),
labelStyle: TextStyle(
decorationStyle: TextDecorationStyle.solid)),
),
],
),
)),
// Step(
// title: const Text('Fifth Step'),
// subtitle: const Text('Subtitle'),
// isActive: true,
// state: StepState.complete,
// content: const Text('Enjoy Step Fifth'))
];
void showSnackBarMessage(String message,
[MaterialColor color = Colors.red]) {
Scaffold.of(context).showSnackBar(SnackBar(content: Text(message)));
}
void _submitDetails() {
final FormState formState = _formKey.currentState;
if (!formState.validate()) {
showSnackBarMessage('Please enter correct data');
} else {
formState.save();
print("Name: ${data.title}");
print("Phone: ${data.days}");
print("Email: ${data.words}");
print("Age: ${data.rep}");
showDialog(
context: context,
child: AlertDialog(
title: Text("Details"),
//content: Text("Hello World"),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text("Name : " + data.title),
Text("Phone : " + data.days),
Text("Email : " + data.words),
Text("Age : " + data.rep),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
));
}
}
return Container(
child: Form(
key: _formKey,
child: ListView(children: <Widget>[
Stepper(
steps: steps,
type: StepperType.vertical,
currentStep: this.currStep,
onStepContinue: () {
setState(() {
if (formKeys[currStep].currentState.validate()) {
if (currStep < steps.length - 1) {
currStep = currStep + 1;
} else {
currStep = 0;
}
}
// else {
// Scaffold
// .of(context)
// .showSnackBar( SnackBar(content: Text('$currStep')));
// if (currStep == 1) {
// print('First Step');
// print('object' + FocusScope.of(context).toStringDeep());
// }
// }
});
},
onStepCancel: () {
setState(() {
if (currStep > 0) {
currStep = currStep - 1;
} else {
currStep = 0;
}
});
},
onStepTapped: (step) {
setState(() {
currStep = step;
});
},
),
RaisedButton(
child: Text(
'Save details',
style: TextStyle(color: Colors.white),
),
onPressed: _submitDetails,
color: Colors.blue,
),
]),
));
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: "test",),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: StepperBody()),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

Manage multiple form (validation) in stepper flutter

I have multiple form in each step of a Stepper, Form are in external file because in my App each Step can contain a different Form. I want that when user click on "Continue" the form will be validated and in an error situation the user will be warned. I tried to use Inherited Widget but it gives me a "null on getter". The code below:
Screen that contain Steps
import 'package:flutter/material.dart';
import 'package:pberrycoffeemaker/widgets/function_appbar.dart';
import 'package:pberrycoffeemaker/widgets/inputs_0.dart';
import 'package:pberrycoffeemaker/widgets/stepper_banner.dart';
class FunctionScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
int indexStep = 0;
double bottomHeight = (MediaQuery.of(context).size.height * 40) / 100;
double cardHeight = (MediaQuery.of(context).size.height * 60) / 100;
double cardWidth = (MediaQuery.of(context).size.width * 85) / 100;
FirstTypeInput firstTypeOfInput = FirstTypeInput();
GlobalKey<FormState> key = new GlobalKey<FormState>();
return Scaffold(
body: Stack(
children: <Widget>[
AppbarBack(
height: bottomHeight,
),
Align(
alignment: Alignment(0.0, .65),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(15.0)),
child: Container(
child: StepperBanner(
firstTypeInputKey: key,
test: 18,
firstTypeInputField: {},
child: Stepper(
currentStep: indexStep,
onStepContinue: (){
print(StepperBanner.of(context).test);
//StepperBanner.of(context).firstTypeInputKey.currentState.validate();
},
//type: StepperType.horizontal,
steps: <Step>[
Step(
content: firstTypeOfInput,
title: Text("Theorical"),
),
Step(
content: //Second Step Content,
title: Text("Practical")),
],
),
),
decoration: BoxDecoration(color: Colors.white, boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 10.0,
offset: Offset(0.0, 0.75))
]),
width: cardWidth,
height: cardHeight,
),
),
),
],
),
);
}
}
Form contained in first Step
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pberrycoffeemaker/functions/coffeeCalculation.dart';
import 'package:pberrycoffeemaker/widgets/stepper_banner.dart';
// ignore: must_be_immutable
class FirstTypeInput extends StatefulWidget {
final Map<String, double> submittedField = {
"tds": 0.0,
"ext": 0.0,
"dw": 0.0,
"af": 0.0,
"co2": 0.0,
"co2p": 0.0,
"ih": 0.0,
"ihp": 0.0,
"wtemp": 0.0,
"twh": 0.0,
"alk": 0.0
};
#override
State<StatefulWidget> createState() {
return _FirstTypeInput();
}
}
class _FirstTypeInput extends State<FirstTypeInput> {
Map<String, FocusNode> _focusNodes;
GlobalKey<FormState> formKey;
#override
void initState() {
super.initState();
_focusNodes = {
"ext": new FocusNode(),
"dw": new FocusNode(),
"af": new FocusNode(),
"co2": new FocusNode(),
"co2P": new FocusNode(),
"ih": new FocusNode(),
"ihP": new FocusNode(),
"wt": new FocusNode(),
"twh": new FocusNode(),
"alk": new FocusNode()
};
}
String percentageValidator(String value){
if (double.parse(value) < 0 || double.parse(value) > 100){
return "Insert value between 0 - 100";
}
return null;
}
#override
Widget build(BuildContext context) {
return Form(
key: StepperBanner.of(context).firstTypeInputKey,
//key: widget.formKey,
child: Column(
children: <Widget>[
// * TDS
TextFormField(
//validator: percentageValidator,
onFieldSubmitted: (value) {
FocusScope.of(context).requestFocus(_focusNodes["ext"]);
},
decoration: InputDecoration(
labelText: "TDS%", hintText: "Insert TDS%", suffix: Text("%")),
),
// * EXT
TextFormField(
onFieldSubmitted: (value) {
FocusScope.of(context).requestFocus(_focusNodes["dw"]);
},
focusNode: _focusNodes["ext"],
decoration: InputDecoration(
labelText: "EXT%", hintText: "Insert EXT%", suffix: Text("%")),
),
// * Drink Weight
TextFormField(
onFieldSubmitted: (value) {
FocusScope.of(context).requestFocus(_focusNodes["af"]);
},
focusNode: _focusNodes["dw"],
decoration: InputDecoration(
labelText: "Drink Weight",
hintText: "Insert drink weight",
suffix: Text("g")),
),
// * Absorption Factor
TextFormField(
onFieldSubmitted: (value) {
FocusScope.of(context).requestFocus(_focusNodes["co2"]);
},
focusNode: _focusNodes["af"],
decoration: InputDecoration(
labelText: "Absorption Factor",
hintText: "Insert absorptio factor",
suffix: Text("g")),
),
// * CO2
TextFormField(
onFieldSubmitted: (value) {
FocusScope.of(context).requestFocus(_focusNodes["co2P"]);
},
focusNode: _focusNodes["co2"],
decoration: InputDecoration(
labelText: "CO2", hintText: "Insert CO2", suffix: Text("g")),
),
// * CO2 Precision
TextFormField(
onFieldSubmitted: (value) {
FocusScope.of(context).requestFocus(_focusNodes["ih"]);
},
focusNode: _focusNodes["co2P"],
decoration: InputDecoration(
labelText: "CO2 Precision",
hintText: "Insert CO2 Precision",
suffix: Text("%")),
),
// * Internal Humidity
TextFormField(
onFieldSubmitted: (value) {
FocusScope.of(context).requestFocus(_focusNodes["ihP"]);
},
focusNode: _focusNodes["ih"],
decoration: InputDecoration(
labelText: "Internal Humidity",
hintText: "Insert internal humidity",
suffix: Text("%")),
),
// * Internal Humidity Precision
TextFormField(
onFieldSubmitted: (value) {
FocusScope.of(context).requestFocus(_focusNodes["wt"]);
},
focusNode: _focusNodes["ihP"],
decoration: InputDecoration(
labelText: "Internal Humidity Precision",
hintText: "Insert internal humidity precision",
suffix: Text("%")),
),
// * Water Temperature
TextFormField(
onFieldSubmitted: (value) {
FocusScope.of(context).requestFocus(_focusNodes["twh"]);
},
focusNode: _focusNodes["wt"],
decoration: InputDecoration(
labelText: "Water Temperature",
hintText: "Insert water temperature",
//TODO da decidere se settare nelle impostazioni l'unità di misura oppure mettere un dropdown sotto
suffix: Text("C°|F°|K°")),
),
// * Total Water Hardness
TextFormField(
onFieldSubmitted: (value) {
FocusScope.of(context).requestFocus(_focusNodes["alk"]);
},
focusNode: _focusNodes["twh"],
decoration: InputDecoration(
labelText: "Total Water Hardness",
hintText: "Insert total water hardness",
//TODO da decidere se settare nelle impostazioni l'unità di misura oppure mettere un dropdown sotto
suffix: Text("PPM°|F°|D°")),
),
// * Alkalinity
TextFormField(
focusNode: _focusNodes["alk"],
decoration: InputDecoration(
labelText: "Alkalinity",
hintText: "Insert alkalinity",
//TODO da decidere se settare nelle impostazioni l'unità di misura oppure mettere un dropdown sotto
suffix: Text("PPM°|F°|D°")),
),
],
),
);
}
}
Inherited Class, StepperBanner:
import 'package:flutter/material.dart';
class StepperBanner extends InheritedWidget {
final Map<String, double> firstTypeInputField;
final GlobalKey<FormState> firstTypeInputKey;
final int test;
StepperBanner({Widget child, this.firstTypeInputField,this.test, this.firstTypeInputKey}) : super(child: child);
#override
bool updateShouldNotify(InheritedWidget oldWidget) => true;
static StepperBanner of(BuildContext context) =>
context.inheritFromWidgetOfExactType(StepperBanner);
}
Should I manage validation with Inherited Class or there are some other metods?

Use a list GlobalKey to keep each form's key and in Continue call formKeys[currStep].currentState.validate()
formKeys is global variable, In your case for separate form file you can use global library to access it Global Variables in Dart
For demo, each from only have one field
code snippet
List<GlobalKey<FormState>> formKeys = [GlobalKey<FormState>(), GlobalKey<FormState>(), GlobalKey<FormState>(), GlobalKey<FormState>()];
...
onStepContinue: () {
setState(() {
if(formKeys[currStep].currentState.validate()) {
if (currStep < steps.length - 1) {
currStep = currStep + 1;
} else {
currStep = 0;
}
}
full code
import 'package:flutter/material.dart';
//import 'package:validate/validate.dart'; //for validation
void main() {
runApp( MyApp());
}
List<GlobalKey<FormState>> formKeys = [GlobalKey<FormState>(), GlobalKey<FormState>(), GlobalKey<FormState>(), GlobalKey<FormState>()];
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return MyAppScreenMode();
}
}
class MyData {
String name = '';
String phone = '';
String email = '';
String age = '';
}
class MyAppScreenMode extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.lightGreen,
),
home: Scaffold(
appBar: AppBar(
title: Text('Steppers'),
),
body: StepperBody(),
));
}
}
class StepperBody extends StatefulWidget {
#override
_StepperBodyState createState() => _StepperBodyState();
}
class _StepperBodyState extends State<StepperBody> {
int currStep = 0;
static var _focusNode = FocusNode();
GlobalKey<FormState> _formKey = GlobalKey<FormState>();
static MyData data = MyData();
#override
void initState() {
super.initState();
_focusNode.addListener(() {
setState(() {});
print('Has focus: $_focusNode.hasFocus');
});
}
#override
void dispose() {
_focusNode.dispose();
super.dispose();
}
List<Step> steps = [
Step(
title: const Text('Name'),
//subtitle: const Text('Enter your name'),
isActive: true,
//state: StepState.error,
state: StepState.indexed,
content: Form(
key: formKeys[0],
child: Column(
children: <Widget>[
TextFormField(
focusNode: _focusNode,
keyboardType: TextInputType.text,
autocorrect: false,
onSaved: (String value) {
data.name = value;
},
maxLines: 1,
//initialValue: 'Aseem Wangoo',
validator: (value) {
if (value.isEmpty || value.length < 1) {
return 'Please enter name';
}
},
decoration: InputDecoration(
labelText: 'Enter your name',
hintText: 'Enter a name',
//filled: true,
icon: const Icon(Icons.person),
labelStyle:
TextStyle(decorationStyle: TextDecorationStyle.solid)),
),
],
),
)),
Step(
title: const Text('Phone'),
//subtitle: const Text('Subtitle'),
isActive: true,
//state: StepState.editing,
state: StepState.indexed,
content: Form(
key: formKeys[1],
child: Column(
children: <Widget>[
TextFormField(
keyboardType: TextInputType.phone,
autocorrect: false,
validator: (value) {
if (value.isEmpty || value.length < 10) {
return 'Please enter valid number';
}
},
onSaved: (String value) {
data.phone = value;
},
maxLines: 1,
decoration: InputDecoration(
labelText: 'Enter your number',
hintText: 'Enter a number',
icon: const Icon(Icons.phone),
labelStyle:
TextStyle(decorationStyle: TextDecorationStyle.solid)),
),
],
),
)),
Step(
title: const Text('Email'),
// subtitle: const Text('Subtitle'),
isActive: true,
state: StepState.indexed,
// state: StepState.disabled,
content: Form(
key: formKeys[2],
child: Column(
children: <Widget>[
TextFormField(
keyboardType: TextInputType.emailAddress,
autocorrect: false,
validator: (value) {
if (value.isEmpty || !value.contains('#')) {
return 'Please enter valid email';
}
},
onSaved: (String value) {
data.email = value;
},
maxLines: 1,
decoration: InputDecoration(
labelText: 'Enter your email',
hintText: 'Enter a email address',
icon: const Icon(Icons.email),
labelStyle:
TextStyle(decorationStyle: TextDecorationStyle.solid)),
),
],
),
)),
Step(
title: const Text('Age'),
// subtitle: const Text('Subtitle'),
isActive: true,
state: StepState.indexed,
content: Form(
key: formKeys[3],
child: Column(
children: <Widget>[
TextFormField(
keyboardType: TextInputType.number,
autocorrect: false,
validator: (value) {
if (value.isEmpty || value.length > 2) {
return 'Please enter valid age';
}
},
maxLines: 1,
onSaved: (String value) {
data.age = value;
},
decoration: InputDecoration(
labelText: 'Enter your age',
hintText: 'Enter age',
icon: const Icon(Icons.explicit),
labelStyle:
TextStyle(decorationStyle: TextDecorationStyle.solid)),
),
],
),
)),
// Step(
// title: const Text('Fifth Step'),
// subtitle: const Text('Subtitle'),
// isActive: true,
// state: StepState.complete,
// content: const Text('Enjoy Step Fifth'))
];
#override
Widget build(BuildContext context) {
void showSnackBarMessage(String message,
[MaterialColor color = Colors.red]) {
Scaffold
.of(context)
.showSnackBar( SnackBar(content: Text(message)));
}
void _submitDetails() {
final FormState formState = _formKey.currentState;
if (!formState.validate()) {
showSnackBarMessage('Please enter correct data');
} else {
formState.save();
print("Name: ${data.name}");
print("Phone: ${data.phone}");
print("Email: ${data.email}");
print("Age: ${data.age}");
showDialog(
context: context,
child: AlertDialog(
title: Text("Details"),
//content: Text("Hello World"),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text("Name : " + data.name),
Text("Phone : " + data.phone),
Text("Email : " + data.email),
Text("Age : " + data.age),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
));
}
}
return Container(
child: Form(
key: _formKey,
child: ListView(children: <Widget>[
Stepper(
steps: steps,
type: StepperType.vertical,
currentStep: this.currStep,
onStepContinue: () {
setState(() {
if(formKeys[currStep].currentState.validate()) {
if (currStep < steps.length - 1) {
currStep = currStep + 1;
} else {
currStep = 0;
}
}
// else {
// Scaffold
// .of(context)
// .showSnackBar( SnackBar(content: Text('$currStep')));
// if (currStep == 1) {
// print('First Step');
// print('object' + FocusScope.of(context).toStringDeep());
// }
// }
});
},
onStepCancel: () {
setState(() {
if (currStep > 0) {
currStep = currStep - 1;
} else {
currStep = 0;
}
});
},
onStepTapped: (step) {
setState(() {
currStep = step;
});
},
),
RaisedButton(
child: Text(
'Save details',
style: TextStyle(color: Colors.white),
),
onPressed: _submitDetails,
color: Colors.blue,
),
]),
));
}
}
working demo