Flutter获取输入框文本并传递至API请求失败求助

原代码存在的问题 #

• TextEditingController定义在build方法内，组件重建时会被重置，无法正确保留输入内容
• 页面跳转时未将输入框的文本传递给目标页面
• API服务中的YoutubeMp3s是getter方法，无法接收外部传入的视频URL参数
• 目标页面procesarBotonParaDescargarMp3没有接收参数的构造函数，无法获取传递的URL
• API请求中使用未定义的URLVIDEO变量，导致请求地址无效

修改后的完整代码 #

1. 表单页面（FormularioYoutube）

class FormularioYoutube extends StatelessWidget {
  final _controller = TextEditingController(); // 提升为类成员变量
  const FormularioYoutube({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: TextFormField(
            controller: _controller,
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              labelText: 'Insert Url Youtube',
            ),
          ),
        ),
        MaterialButton(
          onPressed: () {
            final videoUrl = _controller.text.trim(); // 获取输入框文本
            if (videoUrl.isNotEmpty) {
              Navigator.push(
                context,
                MaterialPageRoute(
                  // 跳转时传递视频URL
                  builder: (context) => procesarBotonParaDescargarMp3(videoUrl: videoUrl),
                ),
              );
            }
          },
          color: Colors.blue,
          child: const Text('Descargar MP3', style: TextStyle(color: Colors.white)),
        )
      ],
    );
  }
}

2. 处理页面（procesarBotonParaDescargarMp3）

class procesarBotonParaDescargarMp3 extends StatelessWidget {
  final String videoUrl; // 定义接收URL的变量
  const procesarBotonParaDescargarMp3({super.key, required this.videoUrl}); // 添加构造函数

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Second Route")),
      body: FutureBuilder<YoutubeMp3?>(
        // 调用带参数的API方法
        future: ApiRequest().getYoutubeMp3(videoUrl),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator.adaptive());
          }
          final YoutubeMp3? yt = snapshot.data;
          return ListView.builder(
            itemCount: 1,
            itemBuilder: (context, index) {
              return ListTile(title: Text(yt?.title ?? "无数据")); // 处理空值避免崩溃
            },
          );
        },
      ),
    );
  }
}

3. API服务（ApiRequest）

import 'package:http/http.dart' as http;
import 'package:flutter_application_1/src/model/youTubeMp3Model.dart';

class ApiRequest {
  // 改成带参数的普通方法，接收视频URL
  Future<YoutubeMp3?> getYoutubeMp3(String videoUrl) async {
    final http.Response response = await http.get(
      Uri.parse('http://url/UrlVideoYoutube/' + videoUrl),
    );
    if (response.statusCode == 200) {
      print(response.body);
      return youtubeMp3FromJson(response.body);
    }
    return null; // 处理请求失败的情况
  }
}

关键修改说明 #

1. 输入框控制器：将TextEditingController提升为类成员，避免组件重建时丢失输入内容
2. 参数传递：跳转页面时通过构造函数将输入的视频URL传递给目标页面
3. API方法改造：将getter改为带参数的方法，接收外部传入的URL，替换原未定义的URLVIDEO变量
4. 空值处理：在展示数据时添加空值判断，避免因API返回null导致崩溃
5. 输入校验：添加输入框文本非空判断，避免传递空字符串给API

内容的提问来源于stack exchange，提问作者ele