使用 Flask 连接我的 Python 后端和我的 Flutter 前端

Question

所以目前我正在尝试学习如何使用 flask 将 flutter 前端与 Python 后端连接起来，我正在做一个基本项目，你基本上在 flutter 应用程序中输入一个数字你输入的数字作为我存储在我的 python 应用程序中的列表的索引，python 应用程序将 return 您指定的索引处的数字，并将显示在屏幕上。我遇到的问题是，当我运行应用程序时，flutter 应用程序只显示一条错误消息。我已经尝试了很多东西，但无法弄清楚哪里出了问题

这是我的 Flutter 应用程序的屏幕截图 link（包括从服务器收到的错误消息）：

https://imgur.com/a/K6KYRAu

这是我的Python代码

from flask import Flask
from flask_restful import Api, Resource

app = Flask(__name__)
api = Api(app)
myList = [3,4,8,1,9,4,2,0,2,9,3,8,4,7,2,7,0,1]

@app.route('/', methods = ['GET'])
class Update(Resource):
    def get(self,pos):
        if(pos > len(myList)):
            return {"num" : "invalid number: out of list range"}
        else:
            return {"num": str(myList[pos])}
        

api.add_resource(Update, "/Update/<int:pos>")

if __name__ == "__main__":
    app.run(debug=True)

这是我的 Flutter 代码：

import 'dart:async';
import 'dart:convert';

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

Future<Entry> fetchEntry() async {
  final response =
      await http.get('https://127.0.0.1:5000/Update/3');

  if (response.statusCode == 200) {
    return Entry.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load Entry');
  }
}

class Entry {
  final String number;

  Entry({this.number});

  factory Entry.fromJson(Map<String, dynamic> json) {
    return Entry(
      number: json['num'],
    );
  }
}

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<Entry> futureEntry;

  @override
  void initState() {
    super.initState();
    futureEntry = fetchEntry();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Entry>(
            future: futureEntry,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data.number);
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              // By default, show a loading spinner.
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

我还仔细检查了我的 pubspec.yaml 文件和 AndroidManifest.xml 文件中的依赖项，所以这不应该是问题所在。非常感谢任何帮助，谢谢。

编辑：为澄清起见，我正在为此使用 android 模拟器，并尝试为我的 flutter get 请求使用不同的 ip 地址（我在试图弄清楚如何解决这个问题时找到了 ip 地址并且它说 ip 地址需要用于 android 模拟器）但是当我这样做时它仍然 returned 相同的错误。

Answer 1

不确定为什么会抛出此错误，因为您将端口指定为 5000，但一个简单的解决方案是将烧瓶端口更改为 50162。

if __name__ == '__main__':
  app.run(debug=True, host='0.0.0.0', port=50162)

编辑：

经过进一步审查，您可能希望将 flutter 代码中的 http 请求更改为 http，而不是 https。

Answer 2

我找到了解决方案：

对于我的 get 请求，我需要使用 android 可以使用的 IP 地址 android 使用的 IP 地址是 10.0.2.2 我在这个堆栈溢出 post:

使用 Flask 连接我的 Python 后端和我的 Flutter 前端

Connecting my Python backend with my Flutter Frontend using Flask

python

localhost

flask

flutter