Flutter textfield is not updating another variable

Question

I have the following widget.

import 'package:flutter/material.dart';

class AddTaskScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String? newTaskTitle;

    return Container(
      color: Color(0xFF757575),
      child: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              'Add Task',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 30,
                color: Colors.lightBlueAccent,
              ),
            ),
            TextField(
              autofocus: true,
              textAlign: TextAlign.center,
              onChanged: (String newText) {
                newTaskTitle = newText;
              },
            ),
            FlatButton(
              child: Text(
                'Add',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              color: Colors.lightBlueAccent,
              onPressed: () {
                // this line prints null
                // even though I typed something in my textfield
                print(newTaskTitle);
              },
            )
          ],
        ),
      ),
    );
  }
}

Here I am updating my textfield value with the variable newTaskTitle. It successfully updates when the text value changes. But when I click on the add button, it prints the newTaskTitle as null. I even print it inside the onChanged of textfield, and it was getting the updated value. But it is not getting the updated value inside the onPressed function of the add button. How do I get the updated value and what am I doing wrong here?

I can confirm that the code provided works perfectly as @esentis says — t00n, Aug 12 '21 at 12:10

score 0 · Answer 1 · edited Nov 04 '21 at 10:25

User TextEditingController and pass _nameController.text.

import 'package:flutter/material.dart';
    
    class AddTaskScreen extends StatelessWidget {
TextEditingController _nameController = TextEditingController();
      @override
      Widget build(BuildContext context) {
        String? newTaskTitle;
    
        return Container(
          color: Color(0xFF757575),
          child: Container(
            padding: EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Text(
                  'Add Task',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 30,
                    color: Colors.lightBlueAccent,
                  ),
                ),
                TextField(
                  controller: _nameController,
                  autofocus: true,
                  textAlign: TextAlign.center,
                  onChanged: (String newText) {
                    newTaskTitle = newText;
                  },
                ),
                FlatButton(
                  child: Text(
                    'Add',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  color: Colors.lightBlueAccent,
                  onPressed: () {
                    // this line prints null
                    // even though I typed something in my textfield
                    print(_nameController.text);
                  },
                )
              ],
            ),
          ),
        );
      }
    }

Christian · Answer 2 · 2021-08-12T12:17:30.043

That is because you have a stateless widget with a String? newTaskTitle;

which is null by default and doesn't get updated. Try this instead:

import 'package:flutter/material.dart';

class AddTaskScreen extends StatelfulWidget {

 //your constructor here

@override
_AddTaskScreenState createState() => _AddTaskScreenState();
}

class _AddTaskScreenState extends State<AddTaskScreen>{
  String? newTaskTitle;

  @override
  Widget build(BuildContext context) {
    

    return Container(
      color: Color(0xFF757575),
      child: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              'Add Task',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 30,
                color: Colors.lightBlueAccent,
              ),
            ),
            TextField(
              autofocus: true,
              textAlign: TextAlign.center,
              onChanged: (String newText) {
                setState((){
                 newTaskTitle = newText;
                });                   
              },
            ),
            FlatButton(
              child: Text(
                'Add',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              color: Colors.lightBlueAccent,
              onPressed: () {
                // this line prints null
                // even though I typed something in my textfield
                print(newTaskTitle);
              },
            )
          ],
        ),
      ),
    );
  }
}

@nvoigt Have you tried the OP's code? It works perfectly. This answers is not correct. String? newTaskTitle is cause null-safety — t00n, Aug 12 '21 at 12:27

Flutter textfield is not updating another variable

2 Answers2