flutter - Flutter FutureBuilder 和 ListTile 创建

Question

我已经写了下面的代码。它的作用是使用 REST API 连接到服务器并下订单。作为回报，我得到以下 JSON 响应：

{"status": "DONE", "response": {"message": "Your order saved.", "uuid": "fc1d6f52-9aef-11e3-84ae-0015af9e1aa1"}}

每次我按下“Raised Button”时，它都会连接到服务器并创建一个新订单，并每次都为我提供一个新的订单 UUID，并显示在 Text Widget 中。我想要实现的是调用 FutureBuilder 或 ListViewBuilder，这样每次我按下“Raised Button”时，都会触发构建器并且 ListTile（或容器）会出现包含新订单 UUID。

例如，如果我按“Raised Button” 4 次，我希望我的 UI 显示 4 个 ListTile（或 Container），每个都有唯一的订单 UUID。我试图寻找解决方案，但没有走运。我是 Flutter 的新手，我刚开始学习它。

import 'dart:convert';

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


class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
Future<OrderTaxi> _createOrder(String phone) async {
  final http.Response response = await http.post(
    'http://XXXXXXXXXXXXX/api/order',
    headers: <String, String>{
    },
    body: <String, String>{
      'api_key': 'XXXXXXXXXXXXXXXXXX',
      'phone': phone,
      'street': 'Testttt',
      'moderation_required': 'yes',
    },
  );
  if (response.statusCode == 200) {
    final Map responseString = jsonDecode(response.body);
    print(responseString);
    return OrderTaxi.fromJson(responseString);
  } else {
    throw Exception('Failed to create order');
  }
}


class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();
  OrderTaxi _futureOrder;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Post Request'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          
          TextField(
            controller: _controller,
          ),
          RaisedButton(
            child: Text('Place Order'),
            onPressed: () async {
              final String phone = _controller.text;
              OrderTaxi response = await _createOrder(phone);
              setState(() {
                _futureOrder = response;
              });
            },
          ),
          _futureOrder == null? Container(): Text('${_futureOrder.uuid}'),
        ],
      )
    );
  }

}

标签： flutterflutter-layoutflutter-dependencies