flutter 实现TodoList windows桌面应用exe

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是浏览器打开查看


浏览器：