如何将flutter移动应用程序连接到托管在heroku中的node js中的rest API？

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

class ApiService {
  static const String apiUrl = 'https://your-heroku-api-url.com'; // 替换为您的Heroku API URL

  static Future<String> fetchData() async {
    final response = await http.get(Uri.parse('$apiUrl/data'));
    if (response.statusCode == 200) {
      return response.body;
    } else {
      throw Exception('Failed to fetch data from API');
    }
  }

  static Future<void> sendData(String data) async {
    final response = await http.post(Uri.parse('$apiUrl/data'),
        body: {'data': data});
    if (response.statusCode != 201) {
      throw Exception('Failed to send data to API');
    }
  }
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _data = '';

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

  Future<void> _fetchDataFromApi() async {
    try {
      final data = await ApiService.fetchData();
      setState(() {
        _data = data;
      });
    } catch (e) {
      setState(() {
        _data = 'Error: $e';
      });
    }
  }

  Future<void> _sendDataToApi() async {
    try {
      await ApiService.sendData('Hello from Flutter');
      // 发送成功后执行其他操作
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter App')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Data from API: $_data'),
              ElevatedButton(
                onPressed: _sendDataToApi,
                child: Text('Send Data to API'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}