发送数据到互联网并显示返回值

Question

我目前正在学习如何将数据发送到互联网 我使用保存数据的heroku服务器

现在，我设法清除了 http post 请求中的一些错误。 问题是我无法在我的应用程序中将返回值显示为字符串。

我总是以

No data available

结束。

有人可以帮忙吗？ 我不确定 url 或请求本身是否有问题。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: busNearby(),
    );
  }
}

class busNearby extends StatefulWidget {
  const busNearby({super.key});

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

class busNearbyState extends State<busNearby> {
  final TextEditingController queryController = TextEditingController();
  List<Map<String, dynamic>> dataList = [];
  String busCode = '';
  late BuildContext scaffoldContext;

  Future<http.Response> fetchData(String c) async {
    final response = await http.post(
      Uri.parse('https://laravelsyd-fypfinalver.herokuapp.com/getBusService'),

      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body:
        jsonEncode({'bus_stop_id': busCode}),);
    return response;
        
  }

  
  String showFetchedData() {
    if (dataList.isEmpty) {
      return 'No data available.';
    } else {
      // You can format the data as a string here if needed
      String result = '';
      for (var item in dataList) {
        result += 'Service: ${item['service']}, Next Bus: ${item['next bus']}\n';
      }
      return result;
    }
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Data Retrieval Example'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: TextField(
                onChanged: (value){
                  setState(() {
                    busCode = value;
                  });
                },
                controller: queryController,
                decoration: const InputDecoration(
                  labelText: 'Enter Bus Service Code',

                ),
              ),
            ),
            Builder(
              builder: (context) {
                scaffoldContext = context;
                
                return ElevatedButton(
                    onPressed: () async {
                      await fetchData(queryController.text);
                      String message = showFetchedData();
                      if (message.isNotEmpty) {
                        // Show the message using a dialog or other UI element
                        showDialog(
                          context: context,
                          builder: (context) => AlertDialog(
                            title: const Text('Data Retrieval Result'),
                            content: Text(message),
                            actions: [
                              TextButton(
                                onPressed: () {
                                  Navigator.pop(context);
                                  },
                                child: const Text('OK'),
                              ),
                            ],
                          ),
                        );
                      }
                      }, child: const Text('Fetch Data'),
                );},
            ),
            if (dataList.isNotEmpty) // Show fetched data if available
              Expanded(
                child: ListView.builder(
                  itemCount: dataList.length,
                  itemBuilder: (context, index) {
                    final item = dataList[index];
                    return ListTile(
                      title: Text('Service: ${item['service']}'),
                      subtitle: Text('Next Bus: ${item['next bus']}'),
                    );
                  },
                ),
              ),
            DataTable(
              columns: const <DataColumn>[
                DataColumn(label: Text('Service Code')),
                DataColumn(label: Text('Location')),
              ],
              rows: const <DataRow>[
                DataRow(cells: <DataCell>[
                  DataCell(Text('1076')),
                  DataCell(Text('Larkin Terminal')),
                ]),
                DataRow(cells: <DataCell>[
                  DataCell(Text('1084')),
                  DataCell(Text('Taman Universiti')),
                ]),
                DataRow(cells: <DataCell>[
                  DataCell(Text('1019')),
                  DataCell(Text('Skudai Prade')),
                ]),
                DataRow(cells: <DataCell>[
                  DataCell(Text('1052')),
                  DataCell(Text('Opposite Skudai Prade')),
                ]),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

返回值显示在警报框中

这将根据用户输入的巴士区域代码显示可用的巴士

预期输出示例：

输出：返回特定公交车站所有公交车服务的预计到达时间。绝对时间和相对时间，即26分钟和38分钟到达 [{"route_id":1,"bus_service_no":"7","eta":[{"时间":"2020-07-10 15:17:07","relative_time":26},{"时间" :"2020-07-10 15:29:21","relative_time":38}]}]

Answer 1

您的

fetchData(String c)

方法不完整。 您发送 HTTP 请求，但对响应不执行任何操作。

大概应该是这样的

Future<http.Response> fetchData(String c) async {
    final response = await http.post(
        Uri.parse('https://laravelsyd-fypfinalver.herokuapp.com/getBusService'),
        headers: <String, String>{
          'Content-Type': 'application/json; charset=UTF-8',
        },
        body: jsonEncode({'bus_stop_id': busCode}),);

     if (response.statusCode == 200) {
         var returnedData = jsonDecode(response.Body) as Map<string,dynamic>;
         // If desired, perform some data validation
         // ...
         dataList = returnedData
     } else {
         // Display error message
         throw Exception('Failed to load data');
     }
    return response;
}

这只是一个简单的实现。您可能应该花一些时间考虑数据验证、错误处理、日志记录等。

但重要的部分是

dataList = returnedData

。您需要将加载的数据分配给您的状态属性。否则应用程序现在不会有任何新数据