1. Flutter dio

在上一篇文章介绍了如何搭建Flutter web开发环境，这一篇介绍flutter web请求flask接口的一个小例子。
在最新的dio 3.0已经支持flutter web，可以很方便的请求数据了。在依赖项目里添加以下配置安装即可。

dependencies:
  dio: 3.0.3 #latest version

2. Flutter HelloWorld

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage2(),
    );
  }
}

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

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

class _MyHomePage2State extends State<MyHomePage2> {
  var _data = "default data";

  void getData() async {
    try {
      Response response = await Dio().get("http://localhost:9000/test");
      print(response);
      _data = response.data['msg'];
      setState(() {});
    } catch (e) {
      print(e);
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello World!"),
        centerTitle: true,
      ),
      body: Center(
        child: Text(_data),
      ),
    );
  }
}

在组建创建的时候会请求flask接口，由于调试端口和flask server端口一般不同。在flask需要设置cors

3. Flask Server

需要安装 flask-cors模块。

from flask import Flask, jsonify
from flask_cors import CORS

CORS(app, supports_credentials=True)
@app.route('/test')
def test():
    return jsonify({"msg": "hello world from flask!"})

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