在现代生活中，时间管理变得尤为重要。我们经常会有许多任务和活动需要安排和追踪。为了满足这个需求，我们可以使用Flutter来构建一个日程管理应用。在本篇博客中，我将手把手地教你使用Flutter构建一个实用的日程管理应用。
准备工作
在开始之前，请确保你已经安装了Flutter SDK，并设置好了你的开发环境。如果还没有安装，请访问Flutter的官方网站（https://flutter.dev/）查看安装指南。
另外，你还需要一个集成开发环境（IDE）来开发Flutter应用。我推荐使用Visual Studio Code（https://code.visualstudio.com/）并安装Flutter和Dart插件。
创建项目
首先，创建一个新的Flutter项目。打开你的命令行终端，导航到你想要创建项目的目录，然后运行以下命令：
flutter create schedule_app
这将会创建一个名为schedule_app的新的Flutter项目。接下来，进入项目目录：
cd schedule_app
配置依赖
在项目根目录下的pubspec.yaml文件中，配置我们需要的依赖。在dependencies下添加以下依赖：
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
provider: ^6.0.1
保存文件后，运行以下命令来获取依赖包：
flutter pub get
创建日程列表
我们首先来创建一个显示日程列表的页面。在lib目录下创建一个新的文件夹，命名为screens，并在该文件夹下创建一个新的文件，命名为schedule_screen.dart。
在schedule_screen.dart文件中，导入必要的依赖，并创建一个类ScheduleScreen，继承自StatefulWidget：
import 'package:flutter/material.dart';
class ScheduleScreen extends StatefulWidget {
@override
_ScheduleScreenState createState() => _ScheduleScreenState();
}
class _ScheduleScreenState extends State<ScheduleScreen> {
@override
Widget build(BuildContext context) {
return Container(
child: Text('Schedule List'),
);
}
}
现在，我们需要将这个页面设置为应用的初始页面。打开lib目录下的main.dart文件，删除其中的示例代码，并添加以下内容：
import 'package:flutter/material.dart';
import 'package:schedule_app/screens/schedule_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Schedule App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ScheduleScreen(),
);
}
}
这样，我们就完成了日程列表页面的创建和设置。
创建日程卡片
现在，我们来创建一个用于显示每个日程的卡片。在screens文件夹下创建一个新的文件，命名为schedule_card.dart。
在schedule_card.dart文件中，导入必要的依赖，并创建一个类ScheduleCard，继承自StatelessWidget，并接受一个参数来设置日程的标题和时间：
import 'package:flutter/material.dart';
class ScheduleCard extends StatelessWidget {
final String title;
final String time;
ScheduleCard({required this.title, required this.time});
@override
Widget build(BuildContext context) {
return Card(
child: ListTile(
title: Text(title),
subtitle: Text(time),
),
);
}
}
显示日程列表
现在，我们需要在ScheduleScreen中显示日程列表。首先，在_ScheduleScreenState类中添加一个_list变量来存储日程数据：
List<Map<String, String>> _list = [
{'title': 'Meeting', 'time': '9:00 AM'},
{'title': 'Lunch', 'time': '12:30 PM'},
{'title': 'Gym', 'time': '6:00 PM'},
];
接下来，在build方法中，将ListView.builder作为容器的child，并设置itemCount为_list的长度。在itemBuilder中，使用Index来获取每个日程的数据，然后创建一个ScheduleCard的实例并将数据传递进去：
@override
Widget build(BuildContext context) {
return Container(
child: ListView.builder(
itemCount: _list.length,
itemBuilder: (context, index) {
return ScheduleCard(
title: _list[index]['title']!,
time: _list[index]['time']!,
);
},
),
);
}
现在，运行你的应用，你将看到一个简单的日程列表，每个日程都显示在一个卡片中。
添加新日程
接下来，我们将为应用添加一个添加新日程的功能。在schedule_screen.dart文件中，添加一个浮动按钮（FloatingActionButton）来触发添加日程的操作。在FloatingActionButton的onPressed回调函数中，显示一个对话框来获取用户输入的新日程信息：
// ...
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Schedule List'),
),
body: // ...,
floatingActionButton: FloatingActionButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Add New Schedule'),
content: Column(
children: [
TextField(
decoration: InputDecoration(labelText: 'Title'),
),
TextField(
decoration: InputDecoration(labelText: 'Time'),
),
],
),
actions: [
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Cancel'),
),
ElevatedButton(
onPressed: () {
// TODO: Add new schedule
Navigator.of(context).pop();
},
child: Text('Add'),
),
],
),
);
},
child: Icon(Icons.add),
),
);
}
// ...
在对话框中，我们使用两个TextField来获取日程的标题和时间。对话框中还包含两个ElevatedButton，分别用于取消和添加日程。目前，通过点击添加按钮，对话框将会关闭，但并没有添加新的日程。
使用Provider来管理日程
为了管理我们的日程数据，我们可以使用Flutter的Provider库。首先，在pubspec.yaml文件中添加provider依赖。然后，在main.dart文件中导入provider，并使用ChangeNotifierProvider包裹MaterialApp，将ScheduleList作为数据模型传递给ChangeNotifierProvider：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:schedule_app/models/schedule_list.dart';
import 'package:schedule_app/screens/schedule_screen.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => ScheduleList(),
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Schedule App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ScheduleScreen(),
);
}
}
接下来，我们将创建一个新的文件夹，命名为models，并在该文件夹下创建一个新的文件，命名为schedule_list.dart。在schedule_list.dart文件中，导入必要的依赖，并创建一个类ScheduleList，继承自ChangeNotifier。在该类中，我们需要定义一个变量来存储日程数据，并添加方法来添加新的日程：
import 'package:flutter/foundation.dart';
class ScheduleList with ChangeNotifier {
List<Map<String, String>> _list = [];
List<Map<String, String>> get list => _list;
void addSchedule(Map<String, String> schedule) {
_list.add(schedule);
notifyListeners();
}
}
现在，回到schedule_screen.dart文件中，导入provider，并在_ScheduleScreenState类中添加一个_list变量，用来获取ScheduleList数据模型。然后，在添加新日程的逻辑中，通过Provider.of来获取ScheduleList的实例，并调用addSchedule方法来添加日程：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:schedule_app/models/schedule_list.dart';
// ...
@override
Widget build(BuildContext context) {
var scheduleList = Provider.of<ScheduleList>(context);
return Scaffold(
appBar: AppBar(
title: Text('Schedule List'),
),
body: // ...,
floatingActionButton: FloatingActionButton(
onPressed: () {
showDialog(
// ...
ElevatedButton(
onPressed: () {
scheduleList.addSchedule({
'title': titleController.text,
'time': timeController.text,
});
Navigator.of(context).pop();
},
child: Text('Add'),
),
],
),
);
},
child: Icon(Icons.add),
),
);
}
// ...
现在，当你点击添加按钮并填写日程信息后，日程列表将会被更新，新的日程将会显示在列表中。
总结
恭喜你！你已经完成了一个使用Flutter构建的日程管理应用。你学会了如何创建日程列表和日程卡片，以及如何使用Provider来管理日程数据。通过这个简单的示例，你可以深入学习和定制Flutter应用，并将其适应于你的实际项目。
希望本文对你有所帮助。如果你对更多关于Flutter的学习有兴趣，请继续探索Flutter官方文档和其他相关资源。
Happy coding！
本文来自极简博客，作者：星辰漫步，转载请注明原文链接：手把手教你使用Flutter构建日程管理应用
