FastAPI+Flutter渲染用户列表信息

要使用 FastAPI 开发一个用户列表接口，并使用 Flutter 3 渲染用户列表，你可以按照以下步骤进行：

1. 使用 FastAPI 开发用户列表接口

首先，安装 FastAPI 和 Uvicorn（用于运行 FastAPI 应用）：

pip install fastapi uvicorn

然后，创建一个main.py文件，编写 FastAPI 应用：

from fastapi import FastAPI

from pydantic import BaseModel

from typing import List

app = FastAPI()

# 定义用户模型

class User(BaseModel):

  name: str

  age: int

# 模拟用户数据

users = [

  User(name="Alice", age=25),

  User(name="Bob", age=30),

  User(name="Charlie", age=35),

]

# 获取用户列表的接口

@app.get("/users", response_model=List[User])

def get_users():

  return users

# 添加用户的接口

@app.post("/users")

def add_user(user: User):

  users.append(user)

  return {"message": "User added successfully"}

# 运行应用

if __name__ == "__main__":

  import uvicorn

  uvicorn.run(app, host="0.0.0.0", port=8000)

运行 FastAPI 应用：

python main.py

现在，你可以通过http://127.0.0.1:8000/users访问用户列表接口。

2. 使用 Flutter 3 渲染用户列表

首先，确保你已经安装了 Flutter 3。然后，创建一个新的 Flutter 项目：

flutter create user_list_app

cd user_list_app

在lib/main.dart中编写 Flutter 应用代码：

import 'package:flutter/material.dart';

import 'dart:convert';

import 'package:http/http.dart' as http;

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

  return MaterialApp(

    title: 'User List',

    theme: ThemeData(

      primarySwatch: Colors.blue,

    ),

    home: UserListScreen(),

  );

}

}

class UserListScreen extends StatefulWidget {

@override

_UserListScreenState createState() => _UserListScreenState();

}

class _UserListScreenState extends State<UserListScreen> {

List<dynamic> users = [];

@override

void initState() {

  super.initState();

  fetchUsers();

}

Future<void> fetchUsers() async {

  final response = await http.get(Uri.parse('http://127.0.0.1:8000/users'));

  if (response.statusCode == 200) {

    setState(() {

      users = json.decode(response.body);

    });

  } else {

    throw Exception('Failed to load users');

  }

}

@override

Widget build(BuildContext context) {

  return Scaffold(

    appBar: AppBar(

      title: Text('User List'),

    ),

    body: ListView.builder(

      itemCount: users.length,

      itemBuilder: (context, index) {

        return ListTile(

          title: Text(users[index]['name']),

          subtitle: Text('Age: ${users[index]['age']}'),

        );

      },

    ),

  );

}

}

运行 Flutter 应用：

flutter run

3. 运行和测试

确保 FastAPI 应用正在运行。

运行 Flutter 应用，你应该会看到一个用户列表，显示从 FastAPI 接口获取的用户数据。

4. 添加用户功能（可选）

你可以在 Flutter 应用中添加一个表单，允许用户输入姓名和年龄，并通过 POST 请求将新用户添加到 FastAPI 的用户列表中。

在UserListScreen中添加一个 FloatingActionButton 来打开一个表单：

class _UserListScreenState extends State<UserListScreen> {

List<dynamic> users = [];

final _formKey = GlobalKey<FormState>();

final _nameController = TextEditingController();

final _ageController = TextEditingController();

@override

void initState() {

  super.initState();

  fetchUsers();

}

Future<void> fetchUsers() async {

  final response = await http.get(Uri.parse('http://127.0.0.1:8000/users'));

  if (response.statusCode == 200) {

    setState(() {

      users = json.decode(response.body);

    });

  } else {

    throw Exception('Failed to load users');

  }

}

Future<void> addUser(String name, int age) async {

  final response = await http.post(

    Uri.parse('http://127.0.0.1:8000/users'),

    headers: <String, String>{

      'Content-Type': 'application/json; charset=UTF-8',

    },

    body: jsonEncode(<String, dynamic>{

      'name': name,

      'age': age,

    }),

  );

  if (response.statusCode == 200) {

    fetchUsers(); // 刷新用户列表

  } else {

    throw Exception('Failed to add user');

  }

}

void _showAddUserDialog() {

  showDialog(

    context: context,

    builder: (BuildContext context) {

      return AlertDialog(

        title: Text('Add User'),

        content: Form(

          key: _formKey,

          child: Column(

            mainAxisSize: MainAxisSize.min,

            children: <Widget>[

              TextFormField(

                controller: _nameController,

                decoration: InputDecoration(labelText: 'Name'),

                validator: (value) {

                  if (value == null || value.isEmpty) {

                    return 'Please enter a name';

                  }

                  return null;

                },

              ),

              TextFormField(

                controller: _ageController,

                decoration: InputDecoration(labelText: 'Age'),

                keyboardType: TextInputType.number,

                validator: (value) {

                  if (value == null || value.isEmpty) {

                    return 'Please enter an age';

                  }

                  return null;

                },

              ),

            ],

          ),

        ),

        actions: <Widget>[

          TextButton(

            child: Text('Cancel'),

            onPressed: () {

              Navigator.of(context).pop();

            },

          ),

          TextButton(

            child: Text('Add'),

            onPressed: () {

              if (_formKey.currentState!.validate()) {

                addUser(_nameController.text, int.parse(_ageController.text));

                Navigator.of(context).pop();

              }

            },

          ),

        ],

      );

    },

  );

}

@override

Widget build(BuildContext context) {

  return Scaffold(

    appBar: AppBar(

      title: Text('User List'),

    ),

    body: ListView.builder(

      itemCount: users.length,

      itemBuilder: (context, index) {

        return ListTile(

          title: Text(users[index]['name']),

          subtitle: Text('Age: ${users[index]['age']}'),

        );

      },

    ),

    floatingActionButton: FloatingActionButton(

      onPressed: _showAddUserDialog,

      tooltip: 'Add User',

      child: Icon(Icons.add),

    ),

  );

}

}

现在，你可以通过点击右下角的加号按钮来添加新用户。

5. 总结

通过以上步骤，你已经成功使用 FastAPI 开发了一个用户列表接口，并使用 Flutter 3 渲染了用户列表。你还可以根据需要扩展功能，例如添加用户、编辑用户、删除用户等。