dart HTTP 请求接口

安装 http 库：

dart pub add http

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

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

  @override
  State<HttpStudy> createState() => _HttpStudyState();
}

class _HttpStudyState extends State<HttpStudy> {
  var result = '';
  void setResult(String value) {
    setState(() {
      result = value;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Http 接口调用')),
      body: Center(child: Column(
        children: [
          _doHttp(),
          Text(result),
        ],
      )),
    );
  }

  ElevatedButton _doHttp() {
    return ElevatedButton(
      onPressed: () async {
        var url = Uri.parse(
          'https://api.devio.org/uapi/test/test?requestPrams=11',
        );
        var response = await http.post(
          url,
          body: {'name': 'doodle', 'color': 'blue'},
        );
        print('Response status: ${response.statusCode}');
        print('Response body: ${response.body}');
        setResult(response.body);
      },
      child: Text('点击发送请求'),
    );
  }
}

• json 数据

var url = Uri.parse('https://api.devio.org/uapi/test/testJson');
const params = {'name': 'doodle', 'age': 2};
// 发送 POST 请求，将参数编码为 JSON 字符串
var response = await http.post(
  url,
  headers: {'Content-Type': 'application/json'},
  body: jsonEncode(params),
);
final map = jsonDecode(response.body);
setResult(map);

fromJson

import 'dart:convert';

class User {
  final String name;
  final int age;

  User({required this.name, required this.age});

  // fromJson 方法（工厂构造）
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      name: json['name'],
      age: json['age'],
    );
  }

  Map<String, dynamic> toJson() => {
        'name': name,
        'age': age,
      };
}

void main() {
  // ----- 1. 假设服务器返回 JSON 字符串 -----
  const jsonStr = '{"name": "Tom", "age": 20}';

  // ----- 2. jsonDecode：JSON 字符串 → Map -----
  final map = jsonDecode(jsonStr);
  print(map);        // {name: Tom, age: 20}
  print(map['name']); // Tom

  // ----- 3. fromJson：Map → 对象 -----
  final user = User.fromJson(map);
  print(user.name);  // Tom
  print(user.age);   // 20

  // ----- 4. toJson：对象 → Map（再转 JSON）-----
  final jsonOut = jsonEncode(user.toJson());
  print(jsonOut); // {"name":"Tom","age":20}
}

FutureBuilder 完整使用示例

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

class User {
  final String name;
  final int age;

  User({required this.name, required this.age});

  factory User.fromJson(Map<String, dynamic> json) =>
      User(name: json['name'], age: json['age']);
}

class UserPage extends StatelessWidget {
  const UserPage({super.key});

  // 备注：模拟异步请求
  Future<User> fetchUser() async {
    final url = Uri.parse("https://example.com/user");
    final res = await http.get(url);
    final data = jsonDecode(res.body);
    return User.fromJson(data);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<User>(
      future: fetchUser(), // 传入 Future（类似 Promise）
      builder: (context, snapshot) {
        // ----- 1. 还在等数据（pending）-----
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }

        // ----- 2. 出错（rejected）-----
        if (snapshot.hasError) {
          return Center(
            child: Text("出错啦：${snapshot.error}"),
          );
        }

        // ----- 3. 请求成功（fulfilled）-----
        if (snapshot.hasData) {
          final user = snapshot.data!;
          return Center(
            child: Text("名字：${user.name}，年龄：${user.age}"),
          );
        }

        // ----- 4. 空数据 -----
        return const Center(child: Text("暂无数据"));
      },
    );
  }
}