带你读《深入浅出Dart》三十、Flutter实战之TODO应用(1)

简介: 带你读《深入浅出Dart》三十、Flutter实战之TODO应用(1)

三十、Flutter实战之TODO应用

在本篇文章中,我们将构建一个TODO应用,使用最新的Dart语法和Flutter框架。这个TODO应用将具备添加、编辑、删除任务,以及任务的状态管理等功能。让我们一步一步地构建这个TODO应用。

步骤 1:创建Flutter项目

首先,我们需要创建一个Flutter项目。打开终端并执行以下命令:

 

flutter create todo_app
cd todo_app

 

这将创建一个名为todo_app的Flutter项目,并进入项目目录。

步骤 2:创建模型类

我们将创建一个模型类Todo来表示任务,包含任务的标题、描述和完成状态。在lib/models/todo.dart中创建一个新的Dart文件,并添加以下代码:

 

class Todo {
  String title;
  String description;
  bool isCompleted;
  Todo({
    required this.title,
    required this.description,
    this.isCompleted = false,
  });}

步骤 3:创建任务列表页面

我们将创建一个任务列表页面,显示所有的任务,并提供添加、编辑、删除任务的功能。在lib/screens/todo_list_screen.dart中创建一个新的Dart文件,并添加以下代码:

 

import 'package:flutter/material.dart';import 'package:todo_app/models/todo.dart';import 'package:todo_app/screens/todo_edit_screen.dart';
class TodoListScreen extends StatefulWidget {
  @override
  _TodoListScreenState createState() => _TodoListScreenState();}
class _TodoListScreenState extends State {
  List _todos = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TODO List'),
      ),
      body: ListView.builder(
        itemCount: _todos.length,
        itemBuilder: (context, index) {
          final todo = _todos[index];
          return ListTile(
            title: Text(todo.title),
            subtitle: Text(todo.description),
            trailing: Checkbox(
              value: todo.isCompleted,
              onChanged: (value) {
                setState(() {
                  todo.isCompleted = value!;
                });
              },
            ),
            onTap: () {
              _navigateToEditScreen(todo);
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _navigateToEditScreen(null);
        },
        child: Icon(Icons.add),
      ),
    );
  }
  void _navigateToEditScreen(Todo? todo) async {
    final editedTodo = await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => TodoEditScreen(todo: todo),
      ),
    );
    if (editedTodo != null) {
      setState(() {
        if (todo == null) {
          _todos.add(editedTodo);
        } else {
          final index = _todos.indexOf(todo);
          _todos[index] = editedTodo;
        }
      });
    }
  }}

 

在这段代码中,我们创建了一个TodoListScreen类作为任务列表页面,它是一个有状态的小部件。在build方法中,我们使用ScaffoldListView.builder来显示所有的任务,并为每个任务提供了标题、描述和完成状态的展示。

 

我们还实现了_navigateToEditScreen方法,用于导航到任务编辑页面。当用户点击某个任务时,会跳转到任务编辑页面并将对应的任务传递过去。


带你读《深入浅出Dart》三十、Flutter实战之TODO应用(2)https://developer.aliyun.com/article/1348582?groupCode=tech_library

相关文章
|
7月前
|
存储 Android开发
如何查看Flutter应用在Android设备上已被撤销的权限?
如何查看Flutter应用在Android设备上已被撤销的权限?
332 64
|
9月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
604 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
7月前
|
机器学习/深度学习 JSON 自然语言处理
Flutter敏感词过滤实战:基于AC自动机的高效解决方案
在社交、直播等场景中,敏感词过滤至关重要。本文介绍基于AC自动机的Flutter高效敏感词过滤方案,通过构建Trie树与失败指针实现线性时间复杂度的多模式匹配,支持干扰字符处理与动态优化。代码实战结合性能对比,助你打造毫秒级响应的过滤系统,适用于聊天、评论、内容审核等场景,保障平台安全。
404 69
|
4月前
|
前端开发 Java 开发者
SpringBoot 3 + Flutter3 实战低代码运营管理
Spring Boot 3 与 Flutter 3 强强联合,助力现代 Web 与移动应用开发。Spring Boot 3 提升后端开发效率,支持最新 Java 特性;Flutter 3 实现跨平台高性能 UI,热重载加速前端迭代。两者结合打造高效、可扩展的应用开发新体验。
221 0
|
9月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
631 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
303 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
11月前
|
Dart 前端开发 IDE
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
1051 5
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
1103 8
|
传感器 前端开发 Android开发
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例,如相机插件的开发步骤,同时强调了版本兼容性、性能优化等注意事项,并展望了插件开发的未来趋势。
326 2
|
存储 缓存 Dart
[Flutter]足够入门的Dart语言系列之面向对象:类成员的可见性、常量和工厂构造函数详解
类和成员的可见性,这在基于库或包的开发中非常重要,Dart中提供了工厂构造函数,可以方便的实现单例、缓存实例对象、返回子类等,以及常量构造函数的使用......
464 0
[Flutter]足够入门的Dart语言系列之面向对象:类成员的可见性、常量和工厂构造函数详解