flutter TextField get text using TextEditingController but got empty-CodePudding

I have two simple TextField Widgets, and one custom 'PublishAction' page including submit button.

child: Column(
  children: [
    TextField(
      decoration: const InputDecoration(labelText: "Topic"),
    ),
    TextField(
      decoration: const InputDecoration(labelText: "Context"),
    ),
    PublishAction(
      topic: "flutter/topic",
      message: "Hello World",
    ),
  ],
),

and I try to use TextEditingController to handle the text, pass values to custom 'PublishAction', like below

final _topicController = TextEditingController();
final _messageController = TextEditingController();

child: Column(
  children: [
    TextField(
      controller: _topicController,
      decoration: const InputDecoration(labelText: "Topic"),
    ),
    TextField(
      controller: _messageController,
      decoration: const InputDecoration(labelText: "Context"),
    ),
    PublishAction(
      topic: _topicController.text,
      message: _messageController.text,
    ),
  ],
),

but in my PublishAction page, after I printed it out, I found both values were empty

I've tried something like this, but it works pretty well

child: Column(
  children: [
    TextField(
      controller: _topicController,
      decoration: const InputDecoration(labelText: "Topic"),
      onchange: () {
        print(_topicController.text);
      }
    ),
  ],
),

how do I not get empty value when passing TextEditingController.text as a function parameter?

edit:

here is how PublishAction looks like:

class PublishAction extends StatelessWidget {
  final String topic;
  final String message;

  const PublishAction({
    Key? key,
    required this.topic,
    required this.message,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
        child: const Icon(Icons.send),
        onPressed: () {
          print("topic - $topic, message - $message");
        });
  }
}

and the output:

topic - , message -

CodePudding user response：

here in this code you give final values '' or Empty to the TextEditingController() so it can't be changed, so you have to do the following and it should work,

TextEditingController _topicController = TextEditingController();
TextEditingController _messageController = TextEditingController();

child: Column(
  children: [
    TextField(
      controller: _topicController,
      decoration: const InputDecoration(labelText: "Topic"),
    ),
    TextField(
      controller: _messageController,
      decoration: const InputDecoration(labelText: "Context"),
    ),
    PublishAction(
      topic: _topicController.text,
      message: _messageController.text,
    ),
  ],
),

CodePudding user response：

For that you have to use onChanged() method like below->

            onChanged: (val) {
              setState(() {
                _topicController.text = val.toString();
              });
            },

Try this it will help you, And let me know any issue? For more details you can see this.