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 createState() => _PageViewTestState();
}

List tecList;
var _formKey;
List controller = [
  TextEditingController(),
  TextEditingController(),
  TextEditingController(),
];
List _signing_hint_text = [
  'type your domain',
  'type your email',
  'type your password',
];
List _signing_input_label = [
  'Domain',
  'Email',
  'Password',
];
Size mDeviceSize(BuildContext context) {
  return MediaQuery.of(context).size;
}

PageController _pageController = PageController(initialPage: 0);

class _PageViewTestState extends State {
  @override
  void initState() {
    // TODO: implement initState
    _formKey = GlobalKey();
    // _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')),
                  ],
                );
              }),
        ),
      ),
    );
  }
}

eamirho3ein · Answer

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> formKeys = [GlobalKey(),GlobalKey(),GlobalKey()];

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

adding form with globalKey inside PageView.Builder

1 Answers