flutter 实现TodoList windows桌面应用exe

avatar
作者
筋斗云
阅读量:0

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<TodoListPage> {   List<Todo> _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<void> _loadTodos() async {     final prefs = await SharedPreferences.getInstance();     setState(() {       final String? todosString = prefs.getString('todos');       if (todosString != null) {         final List<dynamic> decoded = jsonDecode(todosString);         _todos = decoded.map((item) => Todo.fromJson(item)).toList();       }     });   }    Future<void> _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<String, dynamic> toJson() => {     'text': text,     'completed': completed,   };    factory Todo.fromJson(Map<String, dynamic> 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是浏览器打开查看
在这里插入图片描述
在这里插入图片描述
浏览器:
在这里插入图片描述

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!