根据用户输入从互联网检索数据

Question

所以我是 flutter dart 的新手..我想根据用户输入代码检索数据

数据将显示在弹出窗口小部件中 我没有看到任何错误，但数据没有显示

`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();//retrieve user input n use in query
  List<Map<String, dynamic>> dataList = [];
  String dummy = '1086';
  late BuildContext scaffoldContext;

//rest api
  Future<void> fetchData(String query) async {
    final response = await http.get(
        Uri.parse(('https://laravelsyd-fypfinalver.herokuapp.com/getBusService?query=$query'))); //link

    if (response.statusCode == 200) {
      final List<dynamic> data = json.decode(response.body);
      dataList = List<Map<String, dynamic>>.from(data);
    } else {
      throw Exception('Failed to load data');
    }
  }

  void showFetchedData() {
    showModalBottomSheet(
      context: scaffoldContext,
      builder: (BuildContext context) {
        return Container(
          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']}'),
              );
            },
          ),
        );
      },
    );
  }

  @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(
                controller: queryController,
                decoration: const InputDecoration(
                  labelText: 'Enter Bus Service Code',
                ),
              ),
            ),
            Builder(
              builder: (context) {
                scaffoldContext = context;
                return ElevatedButton(
                  onPressed: () {
                    fetchData(queryController.text);
                    showFetchedData(); // Call this method after data is fetched
                  },
                  child: const Text('Fetch Data'),
                );
              },
            ),
            if (dataList.isNotEmpty)//display data in a sizedbox
              SizedBox(
                width: 200,
                height: 100,
                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']}'),
                    );
                  },
                ),
              ),

// area code 
            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')),
                ]),
              ],
            ),
          ],
        ),
      ),
    );
  }`

我已尝试错误检查，但没有显示错误 唯一的问题是数据不会显示

它将在用户输入的区号中显示当前可用的巴士服务

如果我在网站上尝试它确实有数据

Answer 1

onPressed: () {
  fetchData(queryController.text);
  showFetchedData(); // Call this method after data is fetched
},

您完全忽略了

fetchData

返回

Future<>

的事实，这意味着它是异步工作的。所以你的“Call this after”实际上并不是后来调用的。一开始就叫。

至少你需要这样做：

onPressed: () async {
  await fetchData(queryController.text);
  showFetchedData(); // Call this method after data is fetched
},

更好的方法是阅读并理解什么是 Future 以及如何使用它？，因为这不是您遇到问题的唯一情况。