I have a modal bottom sheet which has a textfield and a button:

import 'package:flutter/material.dart';

class AddTaskScreen extends StatelessWidget {
  Function addTaskCallback;
  String newTaskTitle = "";

  AddTaskScreen(this.addTaskCallback);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xff757575),
      child: Container(
        padding: EdgeInsets.all(30),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              "Add Task",
              style: TextStyle(
                color: Colors.blueAccent,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.center,
            ),
            TextField(
              autofocus: true,
              onChanged: (newText) {
                newTaskTitle = newText;
              },
            ),
            SizedBox(
              height: 30,
            ),
            RaisedButton(
              onPressed: (){
                addTaskCallback(newTaskTitle);
              },
              color: Colors.blueAccent,
              child: Text(
                "Add",
                style: TextStyle(
                  color: Colors.white
                ),
              ),
            )
          ],
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(20),
            topLeft: Radius.circular(20)
          ),
        ),
      ),
    );
  }
}

I have used the callback function like this:

floatingActionButton: FloatingActionButton(
        onPressed: (){
          showModalBottomSheet(
            builder: (context) => AddTaskScreen(
                (newTaskTitle) {
                  print(newTaskTitle);
                }
            ),
            context: context
          );
        },
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      )

But whenever I am printing the text obtained from the modal bottom sheet it is always null.

What to do so that the text isn't null?

I have even assigned the variable newTaskTitle to the onChanged property of textfield and it isn't null locally but is null when I use that value in other class.

CodePudding user response：

You used a stateless widget that's why when you change the value it's not updated value. Try with TextEditingController.

import 'package:flutter/material.dart';

class AddTaskScreen extends StatelessWidget {
  Function addTaskCallback;
  String newTaskTitle = "";
TextEditingController _controller = TextEditingController();

  AddTaskScreen(this.addTaskCallback);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xff757575),
      child: Container(
        padding: EdgeInsets.all(30),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              "Add Task",
              style: TextStyle(
                color: Colors.blueAccent,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.center,
            ),
            TextField(
             controller: _controller,
              autofocus: true,
              onChanged: (newText) {
                newTaskTitle = newText;
              },
            ),
            SizedBox(
              height: 30,
            ),
            RaisedButton(
              onPressed: (){
                addTaskCallback(_controller.text); // added textController value
              },
              color: Colors.blueAccent,
              child: Text(
                "Add",
                style: TextStyle(
                  color: Colors.white
                ),
              ),
            )
          ],
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(20),
            topLeft: Radius.circular(20)
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

//declare new function callback with text as parameter
typedef OnTextChanged = Function(String newText);


class AddTaskScreen extends StatelessWidget {
//use that custom function here
  OnTextChanged addTaskCallback;
  String newTaskTitle = "";

  AddTaskScreen(@required this.addTaskCallback);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xff757575),
      child: Container(
        padding: EdgeInsets.all(30),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              "Add Task",
              style: TextStyle(
                color: Colors.blueAccent,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.center,
            ),
            TextField(
              autofocus: true,
              onChanged: (newText) {
                newTaskTitle = newText;
              },
            ),
            SizedBox(
              height: 30,
            ),
            RaisedButton(
              onPressed: (){
                //look here, we need to call that function
                addTaskCallback.call(newTaskTitle);
              },
              color: Colors.blueAccent,
              child: Text(
                "Add",
                style: TextStyle(
                  color: Colors.white
                ),
              ),
            )
          ],
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(20),
            topLeft: Radius.circular(20)
          ),
        ),
      ),
    );
  }
}