I am trying to make a todo list app which will create a Todo task appear when I click a plus button and disappear when I click the remove icon on the task. this code does that but the changes are not done in real time. a task will be added after I click the pulse button only if I save my code and run it, not as soon as I press it.
import 'package:flutter/material.dart';
import 'package:my_app/main.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePage();
}
class _HomePage extends State<HomePage> {
List TodoList = [];
callback(varTodoList) {
setState(() {
TodoList = varTodoList;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[300],
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 5,
child: ListView.builder(
shrinkWrap: true,
itemCount: TodoList.length,
itemBuilder: (context, index) {
return TodoTasks(TodoList: TodoList, index: index, callback: callback);
}
),
),
Expanded(
flex: 1,
child:
AddButton(TodoList: TodoList, callback: callback)
)
],
)
)
);
}
}
class TodoTasks extends StatelessWidget {
List TodoList;
int index;
Function callback;
TodoTasks({required this.TodoList, required this.index, required this.callback});
@override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 300,
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(30),
boxShadow: [BoxShadow(
color: Colors.grey.shade500,
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0
),
BoxShadow(
color: Colors.white,
offset: Offset(-4.0, -4.0),
blurRadius: 15.0,
spreadRadius: 1.0
),
]
),
child:
Row( children: [
Expanded(
flex: 11,
child:
Center(child: Text(TodoList[index], style: TextStyle(fontSize: 30))),
),
Expanded(
flex: 1,
child:
GestureDetector(
onTap: () {
callback(TodoList.remove(TodoList[index]));
},
child:
Container(
height: 30,
width: 30,
decoration: BoxDecoration(
color: Colors.grey[700],
borderRadius: BorderRadius.circular(30)
),
child: Icon(Icons.delete, color: Colors.grey[300], size: 20),
),
)
)
])
);
}
}
class AddButton extends StatelessWidget {
List TodoList = [];
Function callback;
AddButton({required this.TodoList, required this.callback});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
callback(TodoList.add('toDo: ' (TodoList.length 1).toString()));
},
child: Container(
height: 80,
width: 80,
margin: EdgeInsets.all(30),
child: Icon(Icons.add,size: 50),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.grey.shade500,
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0
),
BoxShadow(
color: Colors.white,
offset: Offset(-4.0, -4.0),
blurRadius: 15,
spreadRadius: 1
),
]
),
),
);
}
}
CodePudding user response:
I will be better to include dataType on list. Check the code-snippet, you will get the point.
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePage();
}
class _HomePage extends State<HomePage> {
List<String> todoList = [];
callback(varTodoList) {
setState(() {
todoList = varTodoList;
});
print(varTodoList.length);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[300],
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 5,
child: ListView.builder(
shrinkWrap: true,
itemCount: todoList.length,
itemBuilder: (context, index) {
return TodoTasks(
todoList: todoList,
index: index,
callback: (v) {
print(v.toString());
callback(v);
},
);
},
),
),
Expanded(
flex: 1,
child: AddButton(
todoList: todoList,
callback: (v) {
callback(v);
print("OnAdd BTN: ${v.toString()}");
}),
),
],
),
),
);
}
}
class TodoTasks extends StatelessWidget {
final List todoList;
final int index;
final Function callback;
const TodoTasks({
Key? key,
required this.todoList,
required this.index,
required this.callback,
});
@override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 300,
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Colors.grey.shade500,
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0),
BoxShadow(
color: Colors.white,
offset: Offset(-4.0, -4.0),
blurRadius: 15.0,
spreadRadius: 1.0),
]),
child: Row(children: [
Expanded(
flex: 11,
child: Center(
child: Text(todoList[index], style: TextStyle(fontSize: 30))),
),
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
callback(
todoList
..remove(
todoList[index],
),
);
},
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
color: Colors.grey[700],
borderRadius: BorderRadius.circular(30)),
child: Icon(Icons.delete, color: Colors.grey[300], size: 20),
),
))
]));
}
}
class AddButton extends StatelessWidget {
final List<String> todoList;
final Function(List<String>) callback;
AddButton({
Key? key,
required this.todoList,
required this.callback,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print("ONPressed : ${todoList.length}");
callback(
// passing new list with including one
todoList
..add(
'toDo: ' (todoList.length 1).toString(),
),
);
},
child: Container(
height: 80,
width: 80,
margin: EdgeInsets.all(30),
child: Icon(Icons.add, size: 50),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.grey.shade500,
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0),
BoxShadow(
color: Colors.white,
offset: Offset(-4.0, -4.0),
blurRadius: 15,
spreadRadius: 1),
]),
),
);
}
}