Problem in using Provider package in Flutter - flutter

Question

main.dart
void main() {
runApp(ToDo());
}
class ToDo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) => TaskList(),
),
],
child: MaterialApp(
debugShowCheckedModeBanner: false,
home: TaskPage(),
theme: ThemeData.dark().copyWith(
canvasColor: Colors.transparent,
),
),
);
}
}
I am using two Consumer Widget one is returning a Text widget and another is returning a ListView.
class TaskPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xff212121),
body: Container(
padding: EdgeInsets.only(top: 50),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListTile(
leading: CircleAvatar(
radius: 25,
backgroundColor: Colors.white,
child: Icon(
Icons.check,
color: Colors.black,
size: 40,
),
),
title: Text(
'ToDo',
style: TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.w900,
),
),
),
SizedBox(
height: 40,
),
Center(
child: Consumer<TaskList>(
builder: (context, list, child) {
print('making new text');
return Text(
'${list.length} Tasks Remaining',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
);
},
),
),
Expanded(
child: Container(
child: Consumer<TaskList>(
builder: (context, list, child) {
return ListView(
children: list.taskList,
);
},
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(
Icons.add,
color: Colors.white,
),
backgroundColor: Colors.blueGrey,
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) => AddTaskSheet(),
);
},
),
);
}
}
The object which I want to provide to these widget is TaskList containing a List.
class TaskList with ChangeNotifier {
List<TaskTile> taskList = [
TaskTile(taskData: TaskData(task: 'Code')),
TaskTile(taskData: TaskData(task: 'Code Again')),
TaskTile(taskData: TaskData(task: 'Keep Coding')),
];
int get length => taskList.length;
void addTask(TaskTile newTaskTile) {
taskList.add(newTaskTile);
notifyListeners();
}
}
In order to add a task I am using a ModalBottomSheet which contain:
class AddTaskSheet extends StatelessWidget {
#override
Widget build(BuildContext context) {
String newTask;
return Container(
color: Colors.transparent,
child: Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Color(0xff212121),
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
topLeft: Radius.circular(40.0),
),
),
child: Column(
children: <Widget>[
TextField(
onChanged: (value) {
newTask = value;
},
decoration: InputDecoration(
hintText: 'Describe Your Task',
hintStyle: TextStyle(
color: Colors.white38,
),
fillColor: Colors.black,
filled: true,
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.all(Radius.circular(30)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 2.5),
borderRadius: BorderRadius.all(Radius.circular(30)),
),
),
),
SizedBox(height: 30),
AddButton(
onTap: () {
print(newTask);
Provider.of<TaskList>(context, listen: false).addTask(
TaskTile(
taskData: TaskData(task: newTask),
),
);
Navigator.pop(context);
},
),
],
),
),
);
}
}
Here I added a button named AddButton to AddTaskSheet:
import 'package:flutter/material.dart';
class AddButton extends StatelessWidget {
final Function onTap;
AddButton({this.onTap});
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
child: ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 60),
title: Text(
'ADD NEW TASK',
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.bold,
),
),
leading: Icon(
Icons.add,
color: Colors.white70,
),
),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.all(
Radius.circular(30),
),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black38,
blurRadius: 5.0,
offset: Offset(-5.0, 15.0),
)
],
),
),
);
}
}
Now Whenever I add a new task to my list then even after calling notifyListener the ListView do not update with new task but on the other hand the Text widget gets update with new size of list.
I don't know whats going wrong.
Can someone please help.