Flutter网络请求插件http4的使用

当然，以下是一个关于如何在Flutter项目中使用http包（注意：http4并不是一个广泛认可的Flutter插件，通常我们使用的是http包）来进行网络请求的示例代码。这个示例将展示如何发送GET和POST请求，并处理响应。

首先，确保你已经在pubspec.yaml文件中添加了http依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3  # 请检查最新版本号并更新

然后运行flutter pub get来安装依赖。

接下来是一个简单的Flutter应用示例，展示如何使用http包进行网络请求：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter HTTP Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _responseText = '';

  void _makeGetRequest() async {
    try {
      var response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
      if (response.statusCode == 200) {
        setState(() {
          _responseText = jsonDecode(response.body).toString();
        });
      } else {
        setState(() {
          _responseText = 'Error: ${response.statusCode}';
        });
      }
    } catch (e) {
      setState(() {
        _responseText = 'Error: $e';
      });
    }
  }

  void _makePostRequest() async {
    try {
      var url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
      var body = jsonEncode(<String, dynamic>{
        'title': 'foo',
        'body': 'bar',
        'userId': 1,
      });

      var response = await http.post(url,
          headers: <String, String>{
            'Content-Type': 'application/json',
          },
          body: body);

      if (response.statusCode == 201) {
        setState(() {
          _responseText = jsonDecode(response.body).toString();
        });
      } else {
        setState(() {
          _responseText = 'Error: ${response.statusCode}';
        });
      }
    } catch (e) {
      setState(() {
        _responseText = 'Error: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter HTTP Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Response:', style: TextStyle(fontSize: 18)),
            SizedBox(height: 16),
            Expanded(
              child: SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: Text(_responseText, style: TextStyle(fontSize: 16)),
              ),
            ),
            SizedBox(height: 24),
            Row(
              children: <Widget>[
                Expanded(
                  child: ElevatedButton(
                    onPressed: _makeGetRequest,
                    child: Text('Make GET Request'),
                  ),
                ),
                SizedBox(width: 16),
                Expanded(
                  child: ElevatedButton(
                    onPressed: _makePostRequest,
                    child: Text('Make POST Request'),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

代码说明：

1. 依赖管理：在pubspec.yaml中添加http依赖。
2. GET请求：_makeGetRequest方法使用http.get发送一个GET请求到https://jsonplaceholder.typicode.com/posts/1，并处理响应。
3. POST请求：_makePostRequest方法使用http.post发送一个POST请求到https://jsonplaceholder.typicode.com/posts，并包含JSON格式的数据。
4. UI：使用Flutter的Material组件构建了一个简单的UI，显示响应文本并提供两个按钮来触发GET和POST请求。

这个示例展示了如何在Flutter应用中集成和使用http包进行基本的网络请求。记得在实际应用中处理更多的错误情况和边界条件。