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,
),
),
);
}
}
我正在使用两个 Consumer 小部件,一个返回一个 Text 小部件,另一个返回一个 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(),
);
},
),
);
}
}
我要提供给这些小部件的对象是包含列表的TaskList。
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();
}
}
为了添加任务,我正在使用ModalBottomSheet,其中包含:
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);
},
),
],
),
),
);
}
}
在这里,我向 AddTaskSheet 添加了一个名为 AddButton 的按钮:
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),
)
],
),
),
);
}
}
现在,每当我将新任务添加到列表中时,即使在调用notifyListener后, ListView 也不会使用新任务进行更新,但是另一方面,文本小部件会更新具有新的列表大小。
我不知道怎么了。 有人可以帮忙吗。