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

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

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


步骤 4:创建任务编辑页面

我们将创建一个任务编辑页面,用于添加新任务或编辑现有任务的标题、描述和完成状态。在lib/screens/todo_edit_screen.dart中创建一个新的Dart文件,并添加以下代码:

 

import 'package:flutter/material.dart';import 'package:todo_app/models/todo.dart';
class TodoEditScreen extends StatefulWidget {
  final Todo? todo;
  TodoEditScreen({this.todo});
  @override
  _TodoEditScreenState createState() => _TodoEditScreenState();}
class _TodoEditScreenState extends State {
  late TextEditingController _titleController;
  late TextEditingController _descriptionController;
  bool _isCompleted = false;
  @override
  void initState() {
    super.initState();
    _titleController = TextEditingController(text: widget.todo?.title ?? '');
    _descriptionController =
        TextEditingController(text: widget.todo?.description ?? '');
    _isCompleted = widget.todo?.isCompleted ?? false;
  }
  @override
  void dispose() {
    _titleController.dispose();
    _descriptionController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.todo == null ? 'Add Todo' : 'Edit Todo'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _titleController,
              decoration: InputDecoration(
                labelText: 'Title',
              ),
            ),
            SizedBox(height: 16.0),
            TextField(
              controller: _descriptionController,
              decoration: InputDecoration(
                labelText: 'Description',
              ),
            ),
            SizedBox(height: 16.0),
            CheckboxListTile(
              title: Text('Completed'),
              value: _isCompleted,
              onChanged: (value) {
                setState(() {
                  _isCompleted = value!;
                });
              },
            ),
            SizedBox(height: 16.0),
            RaisedButton(
              onPressed: () {
                _saveTodo();
              },
              child: Text('Save'),
            ),
          ],
        ),
      ),
    );
  }
  void _saveTodo() {
    final newTodo = Todo(
      title: _titleController.text,
      description: _descriptionController.text,
      isCompleted: _isCompleted,
    );
    Navigator.pop(context, newTodo);
  }}

 

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

相关文章
|
1月前
|
iOS开发 UED
Flutter 动态修改应用图标功能指南
探索Flutter中动态应用图标的实现方法,了解如何为用户提供独特体验,促进用户升级和应用内购买。
Flutter 动态修改应用图标功能指南
|
3天前
|
缓存
使用Riverpod在Flutter中创建Todo列表
学习如何使用Riverpod在Flutter中构建一个功能完整的Todo列表应用。通过Consumer组件、ConsumerStatefulWidget类、ref.read方法和provider build重写,了解Riverpod的状态管理和更新状态机制。
270 6
使用Riverpod在Flutter中创建Todo列表
|
30天前
|
运维 监控 安全
应用研发平台EMAS常见问题之sophix ios flutter热更新如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
73 0
|
30天前
|
运维 监控 定位技术
应用研发平台EMAS常见问题之flutter插件不支持自定义图标如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
76 0
|
2月前
|
Dart JavaScript
Flutter - Dart 基础(数据类型)
【2月更文挑战第3天】
60 1
|
2月前
|
Dart JavaScript 安全
|
2月前
|
Dart Shell 开发工具
解决windows安装Flutter时出现Unknown operating system. Cannot install Dart SDK.问题
解决windows安装Flutter时出现Unknown operating system. Cannot install Dart SDK.问题
|
2月前
|
开发框架 开发者 UED
跨平台开发框架Flutter在移动应用开发中的应用与前景
【2月更文挑战第3天】本文将探讨跨平台开发框架Flutter在移动应用开发中的应用价值和未来发展前景。通过分析Flutter的特点和优势,以及其在实际项目中的应用案例,展示了Flutter在提升开发效率、降低成本、增强用户体验等方面的优势。同时,对Flutter在未来移动应用开发领域的发展趋势进行了展望,指出了其在日益激烈的市场竞争中的巨大潜力。
|
3月前
|
JSON Dart 算法
Dart/Flutter工具模块:the_utils
Dart/Flutter工具模块:the_utils
46 0
|
3月前
|
容器
Flutter笔记:Box协议的布局约束原理与应用
Flutter笔记:Box协议的布局约束原理与应用
47 0