Flutter - TextFormField validator is not working in TabBarView - flutter

Question

I need some required values to submit.
I'm using TabBarView to view different sections.
Here's my code.
add_products_screen.dart
class _AddProductScreenState extends State<AddProductScreen> {
#override
Widget build(BuildContext context) {
final formkey = GlobalKey<FormState>();
return Form(
key: formkey,
child: DefaultTabController(
length: 2,
initialIndex: 0,
child: Scaffold(
appBar: AppBar(
title: const Text('Add Products'),
bottom: const TabBar(
isScrollable: true,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(
width: 4,
color: Colors.deepOrange,
),
),
tabs: [
Tab(child: Text('General')),
Tab(child: Text('Attributes')),
],
),
),
drawer: const CustomDrawer(),
body: const TabBarView(
children: [
GeneralTab(),
AttributeTab(),
],
),
persistentFooterButtons: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: ElevatedButton(
onPressed: () {
if (formkey.currentState!.validate()) {}
},
child: const Text('Save Product'),
),
),
],
),
),
],
),
),
);
}
}
form_field_input.dart
class FormFieldInput extends StatelessWidget {
final String? label;
final void Function(String)? onChanged;
const FormFieldInput({
Key? key,
this.label,
this.onChanged,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return TextFormField(
decoration: InputDecoration(
label: Text(label!),
),
validator: (value) {
if (value!.isEmpty) {
return '$label is required';
}
return null;
},
onChanged: onChanged,
);
}
}
general_tab.dart
class _GeneralTabState extends State<GeneralTab>
with AutomaticKeepAliveClientMixin {
#override
bool get wantKeepAlive => true;
#override
Widget build(BuildContext context) {
super.build(context);
return Consumer<ProductProvider>(
builder: (context, provider, child) {
return ListView(
padding: const EdgeInsets.all(15.0),
children: [
FormFieldInput(
label: 'Product Name',
onChanged: (value) {
provider.getFormData(productName: value);
},
),
FormFieldInput(
label: 'Description',
onChanged: (value) {
provider.getFormData(description: value);
},
),
],
);
},
);
}
}
attributes_tab.dart
class _AttributeTabState extends State<AttributeTab>
with AutomaticKeepAliveClientMixin {
#override
bool get wantKeepAlive => true;
#override
Widget build(BuildContext context) {
super.build(context);
return Consumer<ProductProvider>(
builder: (context, provider, _) {
return ListView(
padding: const EdgeInsets.all(15.0),
children: [
FormFieldInput(
label: 'Brand',
onChanged: (value) {
provider.getFormData(brand: value);
},
),
FormFieldInput(
label: 'Remarks',
onChanged: (value) {
provider.getFormData(remarks: value);
},
),
],
);
},
);
}
}
My error is when I pressed save product button validator is showing only the 1st tab textformfields.
2nd tab textformfields validators are only showing when I go to that tab.
Otherwise, it won't show.
Here are some screenshots.
Before I go to 2nd tab and press save product button
After I go to 2nd tab and press save product button
How do I solve this error?

Answer 1

A form with a key will validate all of its children.
In your first case General tab alone created so those two Formfileds are the children of the Form.
But in your second case as you have opened the attributes tab, both the General and Attributes tab is loaded and now all 4 Form Fields are children of the Form.
So,
Wrap the general_tab.dart and attributes_tab.dart with individual Form widget with seperate form key.
Then validate them alone with their keys.