如何将Flutter项目main.dart的number变量传递到Node.js后端app.js中使用

第一步：修改Node.js后端（app.js），新增HTTP接口接收号码参数 #

原来的app.js是单次执行的脚本，需要改成可接收前端请求的服务：

• 先安装所需依赖：npm install express cors
• 修改后的app.js代码如下：

const express = require('express');
const cors = require('cors');
const accountSid = '***';
const authToken = '***';
const client = require('twilio')(accountSid, authToken);

const app = express();
const port = 3000;

// 解析JSON格式的请求参数
app.use(express.json());
// 允许跨域请求，调试阶段可开启，线上按需配置
app.use(cors());

// 对外提供的拨号接口
app.post('/make-call', async (req, res) => {
  const { toNumber } = req.body;
  if (!toNumber) {
    return res.status(400).json({ error: '缺少拨打号码参数' });
  }
  try {
    const call = await client.calls.create({
      url: 'http://demo.twilio.com/docs/voice.xml',
      to: toNumber, // 直接使用前端传入的号码
      from: '+1000000', // 替换为你自己的Twilio平台号码
    });
    res.json({ success: true, callSid: call.sid });
  } catch (err) {
    console.log('呼叫错误：', err);
    res.status(500).json({ error: err.message });
  }
});

app.listen(port, () => {
  console.log(`后端服务已启动，访问地址：http://localhost:${port}`);
});

第二步：修改Flutter前端（main.dart），向后端发送拨号号码 #

• 先在项目根目录的pubspec.yaml中添加网络请求依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0
  flutter_dialpad: ^最新版本

• 修改后的main.dart代码如下：

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

// 如果是开发移动端APP，可删除原来的dart:js相关导入，仅web端需要

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

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

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

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
            child:
            DialPad(
                enableDtmf: true,
                outputMask: "(000) 000-0000",
                backspaceButtonIconColor: Colors.red,
                makeCall: (number) async {
                  // 先处理拨号盘返回的掩码格式，去除括号、空格、横杠
                  String processedNumber = number.replaceAll(RegExp(r'[()\s-]'), '');
                  // 按Twilio要求转成E.164格式，补充对应国家码，比如中国号码加+86
                  String e164Number = '+86$processedNumber';
                  // 替换为你后端服务的实际地址，真机调试需填后端设备的局域网IP
                  final apiUrl = Uri.parse('http://你的后端IP:3000/make-call');
                  try {
                    final response = await http.post(
                      apiUrl,
                      headers: {'Content-Type': 'application/json'},
                      body: jsonEncode({'toNumber': e164Number}),
                    );
                    if (response.statusCode == 200) {
                      print('呼叫发起成功：${response.body}');
                    } else {
                      print('呼叫失败：${response.body}');
                    }
                  } catch (e) {
                    print('请求异常：$e');
                  }
                }
            )
        ),
      ),
    );
  }
}

注意事项 #

• Twilio试用账号需要先在后台把要拨打的目标号码加入验证列表，否则会触发呼叫失败
• 前端和后端需要在同一网络环境下调试，避免跨域或网络不通问题
• 线上部署时需要配置HTTPS证书，同时限制接口调用权限，避免被恶意刷取呼叫接口

内容的提问来源于stack exchange，提问作者4PS18CS033 Fathima Zia