adding form with globalKey inside PageView.Builder

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,
    ...
)