Python+Flutter前后端分离开发跨平台待办事项APP实战

以下是一个简单的示例，展示如何使用 Flutter 开发一个待办事项应用，并通过 FastAPI 和 SQLAlchemy 作为后端接口。为了简化代码，所有的 Flutter 前端代码将写在一个 main.dart 文件中。

1. 后端部分（FastAPI + SQLAlchemy）

首先，我们需要创建一个简单的 FastAPI 后端服务，用于处理待办事项的增删改查操作。

安装依赖

在你的 Python 环境中安装以下依赖：

pip install fastapi uvicorn sqlalchemy

创建 FastAPI 应用

创建一个文件 main.py，并写入以下代码：

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
from sqlalchemy import create_engine, Column, Integer, String, Boolean
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker

# 数据库配置
DATABASE_URL = "sqlite:///./test.db"
engine = create_engine(DATABASE_URL)
SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
Base = declarative_base()

# 待办事项模型
class TodoItem(Base):
    __tablename__ = "todo_items"
    id = Column(Integer, primary_key=True, index=True)
    title = Column(String, index=True)
    completed = Column(Boolean, default=False)

# 创建数据库表
Base.metadata.create_all(bind=engine)

# Pydantic 模型
class TodoItemCreate(BaseModel):
    title: str

class TodoItemUpdate(BaseModel):
    title: str = None
    completed: bool = None

# FastAPI 应用
app = FastAPI()

# 获取数据库会话
def get_db():
    db = SessionLocal()
    try:
        yield db
    finally:
        db.close()

# 获取所有待办事项
@app.get("/todos/")
def read_todos():
    db = SessionLocal()
    items = db.query(TodoItem).all()
    return [{"id": item.id, "title": item.title, "completed": item.completed} for item in items]

# 创建待办事项
@app.post("/todos/")
def create_todo(item: TodoItemCreate):
    db = SessionLocal()
    new_item = TodoItem(title=item.title, completed=False)
    db.add(new_item)
    db.commit()
    db.refresh(new_item)
    return {"id": new_item.id, "title": new_item.title, "completed": new_item.completed}

# 更新待办事项
@app.put("/todos/{todo_id}")
def update_todo(todo_id: int, item: TodoItemUpdate):
    db = SessionLocal()
    db_item = db.query(TodoItem).filter(TodoItem.id == todo_id).first()
    if not db_item:
        raise HTTPException(status_code=404, detail="Item not found")
    if item.title is not None:
        db_item.title = item.title
    if item.completed is not None:
        db_item.completed = item.completed
    db.commit()
    db.refresh(db_item)
    return {"id": db_item.id, "title": db_item.title, "completed": db_item.completed}

# 删除待办事项
@app.delete("/todos/{todo_id}")
def delete_todo(todo_id: int):
    db = SessionLocal()
    db_item = db.query(TodoItem).filter(TodoItem.id == todo_id).first()
    if not db_item:
        raise HTTPException(status_code=404, detail="Item not found")
    db.delete(db_item)
    db.commit()
    return {"message": "Item deleted"}

启动 FastAPI 服务

运行以下命令启动服务：

uvicorn main:app --reload

服务默认运行在 http://127.0.0.1:8000，你可以通过访问 /docs 查看 API 文档。

2. Flutter 前端部分（main.dart）

接下来，我们编写 Flutter 应用来与后端交互。所有代码将写在一个 main.dart 文件中。

安装依赖

在 Flutter 项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.5
  provider: ^6.0.5

运行 flutter pub get 安装依赖。

编写 Flutter 代码

以下是完整的 main.dart 文件代码：

import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TodoListScreen(),
    );
  }
}

class TodoListScreen extends StatefulWidget {
  @override
  _TodoListScreenState createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
  List<dynamic> _todos = [];
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _fetchTodos();
  }

  Future<void> _fetchTodos() async {
    try {
      final response = await http.get(Uri.parse('http://127.0.0.1:8000/todos/'));
      if (response.statusCode == 200) {
        setState(() {
          _todos = json.decode(response.body);
        });
      } else {
        throw Exception('Failed to load todos');
      }
    } catch (e) {
      print('Error fetching todos: $e');
    }
  }

  Future<void> _createTodo(String title) async {
    try {
      final response = await http.post(
        Uri.parse('http://127.0.0.1:8000/todos/'),
        headers: {'Content-Type': 'application/json'},
        body: json.encode({'title': title}),
      );
      if (response.statusCode == 200) {
        _fetchTodos();
      } else {
        throw Exception('Failed to create todo');
      }
    } catch (e) {
      print('Error creating todo: $e');
    }
  }

  Future<void> _updateTodo(int id, {String? title, bool? completed}) async {
    try {
      final response = await http.put(
        Uri.parse('http://127.0.0.1:8000/todos/$id'),
        headers: {'Content-Type': 'application/json'},
        body: json.encode({
          'title': title,
          'completed': completed,
        }),
      );
      if (response.statusCode == 200) {
        _fetchTodos();
      } else {
        throw Exception('Failed to update todo');
      }
    } catch (e) {
      print('Error updating todo: $e');
    }
  }

  Future<void> _deleteTodo(int id) async {
    try {
      final response = await http.delete(Uri.parse('http://127.0.0.1:8000/todos/$id'));
      if (response.statusCode == 200) {
        _fetchTodos();
      } else {
        throw Exception('Failed to delete todo');
      }
    } catch (e) {
      print('Error deleting todo: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _todos.length,
              itemBuilder: (context, index) {
                final todo = _todos[index];
                return ListTile(
                  title: Text(todo['title']),
                  trailing: Checkbox(
                    value: todo['completed'],
                    onChanged: (bool? value) {
                      _updateTodo(todo['id'], completed: value);
                    },
                  ),
                  onLongPress: () {
                    _deleteTodo(todo['id']);
                  },
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _textEditingController,
                    decoration: InputDecoration(
                      hintText: 'Enter a new todo',
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    final title = _textEditingController.text;
                    if (title.isNotEmpty) {
                      _createTodo(title);
                      _textEditingController.clear();
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

3. 运行和测试

启动 FastAPI 后端服务：

uvicorn main:app --reload

运行 Flutter 应用：
在 Flutter 项目目录下运行：

flutter run

测试功能：

• 在 Flutter 应用中添加待办事项，查看是否成功保存到后端。
• 勾选或取消勾选待办事项，查看是否更新状态。
• 长按待办事项删除，查看是否从后端删除。