why am i getting a null value out of this callback? - flutter

Question

I'm trying to move the value of newTaskText from the second class to the first one , I have a callback
which is addTaskCallback in the second class that i use when i press the flat button to move the value up to the first one which is TasksScreen but when i try to print the value it comes out as null , any idea why ?
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:todoey/widgets/tasks_list.dart';
import 'add_task_screen.dart';
import 'package:todoey/models/task.dart';
class TasksScreen extends StatefulWidget {
#override
_TasksScreenState createState() => _TasksScreenState();
}
class _TasksScreenState extends State<TasksScreen> {
List<Task> tasks = [
Task(name: 'Buy Milk'),
Task(name: 'Buy eggs'),
Task(name: 'Buy bread'),
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightBlueAccent,
//backgroundColor: Colors.lightBlueAccent,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.lightBlueAccent,
//backgroundColor: Colors.lightBlueAccent,
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) => AddTaskScreen(
(newTaskText) {
print(newTaskText);
},
),
);
},
child: Icon(Icons.add),
),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(
top: 60.0, bottom: 30.0, right: 30.0, left: 30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
backgroundColor: Colors.white,
radius: 30.0,
child: Icon(
Icons.list,
color: Colors.lightBlueAccent,
size: 30.0,
),
),
SizedBox(height: 10.0),
Text(
'Todoey',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 50.0,
),
),
Text(
'12 tasks',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
),
),
],
),
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: TasksList(tasks),
),
),
],
),
),
);
}
}
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:todoey/models/task.dart';
class AddTaskScreen extends StatelessWidget {
final Function addTaskCallback;
AddTaskScreen(this.addTaskCallback);
#override
Widget build(BuildContext context) {
String newTaskTitle;
return Container(
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Add Task',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: 30.0,
),
),
TextField(
autofocus: true,
textAlign: TextAlign.center,
onChanged: (newText) {
newTaskTitle = newText;
},
),
SizedBox(
height: 10.0,
),
FlatButton(
color: Colors.lightBlueAccent,
onPressed: () {
addTaskCallback(newTaskTitle);
print(newTaskTitle);
},
child: Text(
'Add',
style: TextStyle(
color: Colors.white,
),
),
)
],
),
),
);
}
}

Answer 1

Your problem here is that you defined the var newTaskTitle in the build method. Moving it out from the build method should fix your problem !
There is nothing wrong with your implementation of the callback. The only thing that could be improved is to define the Type of the variable sent in the callback Function with
final Function(String) addTaskCallback;
You could also use a TextController instead of a var updated in the onChanged method.
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
class AddTaskScreen extends StatefulWidget {
final Function(String) addTaskCallback;
AddTaskScreen(this.addTaskCallback);
#override
_AddTaskScreenState createState() => _AddTaskScreenState();
}
class _AddTaskScreenState extends State<AddTaskScreen> {
TextEditingController textController = new TextEditingController();
#override
Widget build(BuildContext context) {
return Container(
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Add Task',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: 30.0,
),
),
TextField(
autofocus: true,
controller: textController,
textAlign: TextAlign.center,
),
SizedBox(
height: 10.0,
),
FlatButton(
color: Colors.lightBlueAccent,
onPressed: () {
widget.addTaskCallback(textController.text);
print(textController.text);
},
child: Text(
'Add',
style: TextStyle(
color: Colors.white,
),
),
)
],
),
),
);
}
}
Have fun with Flutter !