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

user_14115760 0
Viewed 145

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,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
flutter-layout flutter
1 Answers

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 !

user_23201270
Related