先上源码

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController typeControllerType = TextEditingController();
  String showText = '测试号看看';
  String showTextSec = '';
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
          appBar: AppBar(title: Text('商城首页'), backgroundColor: Colors.blue),
          body: Container(
            child: Column(
              children: <Widget>[
                TextField(
                  controller: typeControllerType,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.all(10.0),
                    labelText: '选择类型',
                    helperText: '请输入类型',
                  ),
                  onChanged: (text) {
                      //内容改变的回调
                    setState(() {
                      showText = text;
                      showTextSec = text;
                    });
                    },
                  autofocus: false,
                ),
                RaisedButton(
                  onPressed: () {
                    getHttps(showText);
                  },
                  child: Text('data'),
                ),
                Text(showText),
                Text(showTextSec)
              ],
            ),
          )),
    );
  }
  Future getHttps(String type) async{
    Response response;
    try {
      response = await Dio().get('http://rap2api.taobao.org/app/mock/229850/queryList/?type=${type}');
      print(response.data['foo'].toString());
      setState(() {
        showText = response.data['foo'].toString();
      });
    } catch (e) {
      print('异常抛出${e}');
    }
  }
}

image.png

很简单的一个页面
点击data后请求网络返回 接口数据 和一个text输入框的 数据更新

数据接口采用的是 mock 阿里的rap2 来写的 大家可以自己定义