面试题：Flutter中如何使用http库实现网络请求并显示进度

Question

在Flutter项目里，要求使用http库发起一个GET网络请求，同时通过一个进度条显示请求的下载进度，简要描述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 引入http库来发起GET请求。
2. 使用StreamedResponse来获取响应的数据流，以便监听下载进度。
3. 在界面中使用LinearProgressIndicator来展示下载进度。
4. 通过StreamBuilder监听进度变化并更新进度条。

关键代码片段

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

class HttpProgressExample extends StatefulWidget {
  @override
  _HttpProgressExampleState createState() => _HttpProgressExampleState();
}

class _HttpProgressExampleState extends State<HttpProgressExample> {
  double _progress = 0.0;

  Future<void> _fetchData() async {
    final response = await http.get(
      Uri.parse('https://example.com'),
      headers: {'Accept': 'application/json'},
    );
    if (response.statusCode == 200) {
      // 处理响应数据
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTTP Progress Example'),
      ),
      body: Column(
        children: [
          LinearProgressIndicator(
            value: _progress,
          ),
          ElevatedButton(
            onPressed: _fetchData,
            child: Text('Fetch Data'),
          ),
        ],
      ),
    );
  }
}

改进版以监听进度

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

class HttpProgressExample extends StatefulWidget {
  @override
  _HttpProgressExampleState createState() => _HttpProgressExampleState();
}

class _HttpProgressExampleState extends State<HttpProgressExample> {
  double _progress = 0.0;

  Future<void> _fetchData() async {
    final response = await http.get(
      Uri.parse('https://example.com'),
      headers: {'Accept': 'application/json'},
    );
    if (response.statusCode == 200) {
      // 处理响应数据
    } else {
      throw Exception('Failed to load data');
    }
  }

  Future<void> _fetchDataWithProgress() async {
    final client = http.Client();
    try {
      final request = http.Request('GET', Uri.parse('https://example.com'));
      final streamedResponse = await client.send(request);
      streamedResponse.stream.listen((data) {
        setState(() {
          _progress += data.length / streamedResponse.contentLength!;
        });
      }, onDone: () {
        setState(() {
          _progress = 1.0;
        });
      });
      final response = await http.Response.fromStream(streamedResponse);
      if (response.statusCode == 200) {
        // 处理响应数据
      } else {
        throw Exception('Failed to load data');
      }
    } finally {
      client.close();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTTP Progress Example'),
      ),
      body: Column(
        children: [
          LinearProgressIndicator(
            value: _progress,
          ),
          ElevatedButton(
            onPressed: _fetchDataWithProgress,
            child: Text('Fetch Data with Progress'),
          ),
        ],
      ),
    );
  }
}