I can not input TextFormField on Flutter

vr_min_chan
April 15, 2024
171 views
2 votes
3 Answers

I tried to create a form using Flutter. However, after I declared a crazy variable, I was unable to input into the TextFormField. I have had similar experiences in React, but I do not know the best solution. I need crazy and TextFormField.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final formKey = GlobalKey<MyHomePageState>();
    var crazy = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 100,
      ),
      body: SingleChildScrollView(
        child: Form(
          key: formKey,
          child: TextFormField(
            decoration: const InputDecoration(
              labelText: 'Why I can not input?',
            ),
          ),
        ),
      ),
    );
  }
}

Tags: flutter

Answers

That’s because you defined your formKey in the build method. So when the keyboard starts opening, the build method gets extecuted again which recreates new formKey again and resets the whole Form state to initial. The solution is to initialize the formKey in state class and not in the build method.

class MyHomePageState extends State<MyHomePage> {
  // initialize here, not in the build method
  final formKey = GlobalKey<MyHomePageState>();
  
  @override
  Widget build(BuildContext context) {
    var crazy = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 100,
      ),
      body: SingleChildScrollView(
        child: Form(
          key: formKey,
          child: TextFormField(
            decoration: const InputDecoration(
              labelText: 'Why I can not input?',
            ),
          ),
        ),
      ),
    );
  }
}

You have declared the formKey inside the build method. So, whenever you click on the input field, the build method will be rerun, and a new formKey will be assigned, causing the form to lose its state. You can fix this by declaring the variable outside of the build method.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  final formKey = GlobalKey<MyHomePageState>();

  @override
  Widget build(BuildContext context) {
    var crazy = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 100,
      ),
      body: SingleChildScrollView(
        child: Form(
          key: formKey,
          child: TextFormField(
            decoration: const InputDecoration(
              labelText: 'Why I can not input?',
            ),
          ),
        ),
      ),
    );
  }
}

Pull out the formKey outside of the build method

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  final formKey = GlobalKey<MyHomePageState>();
  @override
  Widget build(BuildContext context) {
    var crazy = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 100,
      ),
      body: SingleChildScrollView(
        child: Form(
          key: formKey,
          child: TextFormField(
            decoration: const InputDecoration(
              labelText: 'Why I can not input?',
            ),
          ),
        ),
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.