Home > Net >  the values not remain in the Text Form Field when I click continue, then when I return to the page t
the values not remain in the Text Form Field when I click continue, then when I return to the page t

Time:10-03

I'm trying to make Sign Up pages so I used Page View like this page view controller.nextPage(....,...) page view controller.prev page(....,...) Boom Value in the Text Form Field is gone. And this thing happens on all pages when I move to a new page in the page view and return to the page. The information that the user filled in is gone from the fields and has become empty! why?

        Form(
          key: EmailKeys.formKey,
          child: Column(
            children: [
              const Text(
                "Create an account, It's free",
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16, color: Colors.grey),
              ),
              const SizedBox(
                height: 40,
              ),
              TextFormField(
                onFieldSubmitted: (val) {
                  EmailKeys.formKey.currentState!.setState(() {
                    email = val.trim();
                  });
                  EmailKeys.formKey.currentState!.save();
                },
                textInputAction: TextInputAction.done,
                inputFormatters: [LengthLimitingTextInputFormatter(100)],
                obscureText: false,
                keyboardType: TextInputType.emailAddress,
                decoration: InputDecoration(
                  labelText: "Email Address",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                  labelStyle: TextStyle(color: Colors.grey[400]),
                  floatingLabelStyle:
                      const TextStyle(color: Colors.blueGrey, fontSize: 18),
                ),
                validator: (value) {
                  if (value!.isEmpty) {
                    return 'Email address is required';
                  } else if (!value.contains("@")) {
                    return "Email address should contain ' @ ' symbol";
                  }
                },
                onChanged: (value) {
                  email = value.trimLeft();
                },
                onSaved: (val) {
                  setState(() {
                    email = val!;
                  });
                  print(email);
                },
                controller: _emailCtrl,
              ),
            ],
          ),
        ),

CodePudding user response:

Use TexEditingController in TextFormField to hold and retrieve data https://api.flutter.dev/flutter/widgets/TextEditingController-class.html

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      final String text = _controller.text.toLowerCase();
      _controller.value = _controller.value.copyWith(
        text: text,
        selection:
            TextSelection(baseOffset: text.length, extentOffset: text.length),
        composing: TextRange.empty,
      );
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.all(6),
        child: TextFormField(
          controller: _controller,
          decoration: const InputDecoration(border: OutlineInputBorder()),
        ),
      ),
    );
  }
}
  • Related