adding form with globalKey inside PageView.Builder - flutter

Question

I have form and TextFromFilde inside PageView.builder, everytime chinge page it show me this error Duplicate GlobalKey detected in widget tree.
and some time that TextFormFilde is hideing.
all problome is GlobalKey, if I delete it every thing is working perfict but text filde is unfocused in every page I had to tap agin on it to type data
import 'package:flutter/material.dart';
void main() => runApp(Myapp());
class Myapp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: PageViewTest(),
);
}
}
class PageViewTest extends StatefulWidget {
#override
State<PageViewTest> createState() => _PageViewTestState();
}
List<TextEditingController> tecList;
var _formKey;
List controller = [
TextEditingController(),
TextEditingController(),
TextEditingController(),
];
List<String> _signing_hint_text = [
'type your domain',
'type your email',
'type your password',
];
List<String> _signing_input_label = [
'Domain',
'Email',
'Password',
];
Size mDeviceSize(BuildContext context) {
return MediaQuery.of(context).size;
}
PageController _pageController = PageController(initialPage: 0);
class _PageViewTestState extends State<PageViewTest> {
#override
void initState() {
// TODO: implement initState
_formKey = GlobalKey<FormState>();
// _pageController = PageController();
tecList = List.generate(3, (index) {
return TextEditingController();
});
super.initState();
}
#override
void dispose() {
// TODO: implement dispose
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
margin: EdgeInsets.all(30),
child: PageView.builder(
controller: _pageController,
itemCount: 3,
itemBuilder: (context, index) {
return Column(
children: [
Form(
autovalidateMode: AutovalidateMode.onUserInteraction,
key: _formKey,
child: TextFormField(
autofocus: true,
textAlign: TextAlign.right,
textInputAction: TextInputAction.next,
style: TextStyle(color: Color(0xff030303)),
cursorColor: Color(0xff5e6593),
controller: tecList[index],
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: _signing_hint_text[index],
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff5e6593),
),
),
contentPadding:
EdgeInsets.symmetric(vertical: 5.0, horizontal: 10),
labelText: _signing_input_label[index],
labelStyle: TextStyle(color: Color(0xff5e6593)),
floatingLabelBehavior: FloatingLabelBehavior.auto,
border: OutlineInputBorder(),
alignLabelWithHint: true,
hintStyle: TextStyle(
color: Color(0xff5e6593),
fontSize: 15,
fontWeight: FontWeight.normal),
),
),
),
ElevatedButton(
onPressed: () {
_pageController.nextPage(
duration: Duration(milliseconds: 800),
curve: Curves.ease);
},
child: Text('click')),
],
);
}),
),
),
);
}
}

Answer 1

You can not use one formKey for all Form widgets in each page, you should define formKey for each page of your page view and use index to know which one is for which page. For example define three different formKey and use index like this:
List<GlobalKey<FormState>> formKeys = [GlobalKey<FormState>(),GlobalKey<FormState>(),GlobalKey<FormState>()];
and inside your PageView.builder, do this:
Form(
autovalidateMode: AutovalidateMode.onUserInteraction,
key: formKeys[index],
...
)
But For focus each TextFormField when page change, first define a list like this:
List<FocusNode> focusList = [FocusNode(), FocusNode(), FocusNode()];
then do this inside PageView.builder:
PageView.builder(
onPageChanged: (value) {
FocusScope.of(context).requestFocus(focusList[value]);
},
controller: _pageController,
itemCount: 3,
...
}
And also do not forget to pass those focusNode to TextFormField:
child: TextFormField(
focusNode: focusList[index],
autofocus: true,
textAlign: TextAlign.right,
...
)