Flutter Dio Options ResponseTypes.stream 的代码演示

41 min read

以下是一个使用Dio库的Flutter代码示例,演示如何使用Options的responseType属性来发送流式的网络请求:

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

class StreamRequestDemo extends StatefulWidget {
  @override
  _StreamRequestDemoState createState() => _StreamRequestDemoState();
}

class _StreamRequestDemoState extends State<StreamRequestDemo> {
  Dio _dio;
  Stream<List<int>> _responseStream;

  @override
  void initState() {
    super.initState();
    _dio = Dio();
  }

  void makeStreamRequest() async {
    try {
      Response response = await _dio.get(
        'https://example.com/stream',
        options: Options(
          responseType: ResponseType.stream,
        ),
      );

      if (response.statusCode == 200) {
        _responseStream = response.data.stream;
        setState(() {});
      }
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stream Request Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              onPressed: makeStreamRequest,
              child: Text('Make Stream Request'),
            ),
            SizedBox(height: 20),
            if (_responseStream != null)
              StreamBuilder<List<int>>(
                stream: _responseStream,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Text('Received data: ${String.fromCharCodes(snapshot.data)}');
                  } else if (snapshot.hasError) {
                    return Text('Error: ${snapshot.error}');
                  } else {
                    return CircularProgressIndicator();
                  }
                },
              ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们首先创建了一个Dio实例,并定义了一个Stream来持有响应的数据。然后,我们定义了一个makeStreamRequest的方法,该方法使用Dio库的get方法发送一个GET请求,并在Options中设置了responseType为ResponseType.stream,以表示我们希望返回的响应数据是一个流。在获取到响应后,我们可以通过response.data.stream访问到流式的数据,并将其赋值给_responseStream变量。然后,在UI中,我们通过一个RaisedButton来触发makeStreamRequest方法,并使用StreamBuilder来监听_responseStream流的变化,以便在接收到数据时更新UI。