flutter Dio发送post请求

一,导包

python 复制代码
dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.6

二,请求、解析、刷新渲染

Dart 复制代码
import 'dart:convert';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

main() {
  runApp(const MaterialApp(
    home: H(),
  ));
}

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

  @override
  State<H> createState() => _HState();
}

class _HState extends State<H> {
  String _resStr = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("抓包测试"),
        ),
        body: Center(
          child: Text(
            _resStr,
            style: const TextStyle(fontSize: 30),
          ),
        ),
        floatingActionButton:
            FloatingActionButton(onPressed: _postRequestFunction));
  }

  void _postRequestFunction() async {
    Dio dio = Dio();
    FormData formData = FormData.fromMap({"sourceText": "Who are you?"});
    String url = "https://api.oioweb.cn/api/txt/QQFanyi";
    Response response = await dio.post(url, data: formData);
    setState(() {
      _resStr =
          json.decode(response.toString())["result"]["targetText"].toString();
    });
  }
}

三,效果

点击按钮,屏幕中心出现对应的翻译结果

相关推荐
小白|1 分钟前
Flutter 与 OpenHarmony 深度集成:实现跨设备传感器数据协同监测系统
flutter·wpf
嗝o゚25 分钟前
鸿蒙跨端协同与Flutter结合的远程办公轻应用开发
flutter·华为·wpf
豫狮恒31 分钟前
OpenHarmony Flutter 分布式权限管理:跨设备可信访问与权限协同方案
分布式·flutter·wpf·openharmony
小白|40 分钟前
Flutter 与 OpenHarmony 深度整合:构建跨设备统一剪贴板同步系统
flutter·wpf
帅气马战的账号140 分钟前
OpenHarmony 分布式数据同步:基于 ArkTS 与轻量级协议的全场景实践
flutter
ujainu1 小时前
Flutter+DevEco Studio实战:简易天气查询工具开发指南
flutter·deveco studio
小白|2 小时前
Flutter 与 OpenHarmony 深度融合:实现分布式文件共享与跨设备协同编辑系统
分布式·flutter·wpf
帅气马战的账号12 小时前
OpenHarmony与Flutter深度融合:分布式跨端开发全栈实践指南
flutter
遝靑2 小时前
Flutter 状态管理深度剖析:Provider/Bloc/GetX 原理 + 实战 + 选型(附避坑 & 性能对比)
flutter
豫狮恒2 小时前
OpenHarmony Flutter 分布式数据持久化:跨设备数据一致性与同步方案
分布式·安全·flutter·wpf·openharmony