flutter 实现TodoList windows桌面应用exe
创始人
2024-11-19 20:35:16

1、安装flutter

下载Flutter SDK
访问Flutter官网 (https://flutter.dev/docs/get-started/install) 选择你的操作系统,下载Flutter SDK。
在这里插入图片描述

解压Flutter SDK
将下载的zip文件解压到你想要的目录。注意:不要将Flutter放在需要高权限的目录中。
更新环境变量
将Flutter的bin目录添加到你的PATH环境变量中。
在这里插入图片描述
检测安装情况:
在这里插入图片描述

2、创建项目

注意:flutter_todolist项目名称只能下划线,不能横线

flutter create flutter_todolist 

在这里插入图片描述
进入项目,然后打开编辑器

cd flutter_todolist ##vscode code . 

看着默认创建的项目,支持很多平台,桌面和手机app
在这里插入图片描述
lib/main.dart文件,实现todolist的UI:

import 'package:flutter/material.dart'; import 'package:shared_preferences/shared_preferences.dart'; import 'dart:convert';  void main() {   runApp(MyApp()); }  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Todo List',       theme: ThemeData(         primarySwatch: Colors.blue,       ),       home: TodoListPage(),     );   } }  class TodoListPage extends StatefulWidget {   @override   _TodoListPageState createState() => _TodoListPageState(); }  class _TodoListPageState extends State {   List _todos = [];   TextEditingController _controller = TextEditingController();    @override   void initState() {     super.initState();     _loadTodos();   }    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text('Todo List'),       ),       body: Column(         children: [           Padding(             padding: const EdgeInsets.all(8.0),             child: Row(               children: [                 Expanded(                   child: TextField(                     controller: _controller,                     decoration: InputDecoration(                       hintText: 'Enter a todo item',                     ),                   ),                 ),                 ElevatedButton(                   child: Text('Add'),                   onPressed: _addTodo,                 ),               ],             ),           ),           Expanded(             child: ListView.builder(               itemCount: _todos.length,               itemBuilder: (context, index) {                 return _buildTodoItem(_todos[index]);               },             ),           ),         ],       ),     );   }    Widget _buildTodoItem(Todo todo) {     return ListTile(       leading: Checkbox(         value: todo.completed,         onChanged: (bool? value) {           setState(() {             todo.completed = value!;             _saveTodos();           });         },       ),       title: Text(         todo.text,         style: TextStyle(           decoration: todo.completed ? TextDecoration.lineThrough : null,         ),       ),       trailing: IconButton(         icon: Icon(Icons.delete),         onPressed: () {           setState(() {             _todos.remove(todo);             _saveTodos();           });         },       ),     );   }    void _addTodo() {     setState(() {       final text = _controller.text;       if (text.isNotEmpty) {         _todos.add(Todo(text: text));         _controller.clear();         _saveTodos();       }     });   }    Future _loadTodos() async {     final prefs = await SharedPreferences.getInstance();     setState(() {       final String? todosString = prefs.getString('todos');       if (todosString != null) {         final List decoded = jsonDecode(todosString);         _todos = decoded.map((item) => Todo.fromJson(item)).toList();       }     });   }    Future _saveTodos() async {     final prefs = await SharedPreferences.getInstance();     final String encoded = jsonEncode(_todos);     await prefs.setString('todos', encoded);   } }  class Todo {   String text;   bool completed;    Todo({required this.text, this.completed = false});    Map toJson() => {     'text': text,     'completed': completed,   };    factory Todo.fromJson(Map json) => Todo(     text: json['text'],     completed: json['completed'],   ); } 

使用shared_preferences包来实现本地存储。首先,在pubspec.yaml文件中添加依赖:
添加完运行flutter pub get安装依赖

flutter pub get 

在这里插入图片描述
在这里插入图片描述

3、打包

首先,确保你的Flutter支持Windows平台: flutter config --enable-windows-desktop  然后,构建Windows应用: flutter build windows 

在这里插入图片描述
在这里插入图片描述

4、运行exe查看

可以正常执行,就是运行界面有点一般
在这里插入图片描述

另外项目也可以运行flutter run实时查看
选择对应平台,这里1是windows应用,打开右侧有debug标;选择2是浏览器打开查看
在这里插入图片描述
在这里插入图片描述
浏览器:
在这里插入图片描述

相关内容

热门资讯

刚刚,Claude最新功能泄露... 新智元报道 编辑:定慧 大卫 【新智元导读】2026年5月4日,testingcatalog在An...
高分辨大宽带集成光子光谱仪成功... 麦姆斯咨询获悉,近日,中国科学院南京天文光学技术研究所天文光子学团队在面向天文观测的高分辨大宽带集成...
性价比高又稳定的云手机哪个好?... 作为搬了4年砖、踩过无数云手机坑的老玩家,今天直接给你们唠唠性价比高又稳定的云手机选法,全是实战干货...
以灵石破局,万物云参编国内首部... 4月23日,由低碳智慧建筑产业技术创新战略联盟与北京清华同衡规划设计研究院有限公司主办、万物云作为协...
专访 | CLA成功反哺全球 ... 2026年,是奔驰诞生的140周年,也是奔驰进入中国内地市场的20周年。 140年间,从第一款汽车问...