Article series

A review of Flutter Dio

HttpClient, Http, Dio

Analysis of Flutter Dio source code (iii)- In-depth analysis

Analysis of Flutter Dio source code (iv)– Encapsulation

Video series

A review of The source code for Flutter Dio

A review of the source code for Flutter Dio

Analysis of Flutter Dio source code (iii)- In-depth analysis of the video tutorial

Analysis of The Source code of Flutter Dio (iv)– Encapsulating video tutorials

Source repository address

Github repository address

preface

In the previous article we gave a basic introduction to Dio and a simple example. Today we will continue to compare the three methods of Flutter network requests to better understand the Dio network request library.

The system has its own network request HttpClient

Step 1: Create an HttpClient

HttpClient httpClient = HttpClient();
Copy the code

Step 2: Open the HTTP connection and set the request header

HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));
Copy the code

Step 3: You can set the request header using HttpClientRequest

request.headers.add("token"."123456");
Copy the code

Step 4: Wait to connect to the server

HttpClientResponse response = await request.close();
Copy the code

Step 5: Read the response content

// The response stream data is returned in utF8 encoding format
String responseBody = await response.transform(utf8.decoder).join();
Copy the code

Step 6: The request is complete and the httpClient is shut down

httpClient.close();
Copy the code

Complete sample code

import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';

class HttpClientExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    void _getUserInfo() async {
      try {
        // 1. Create httpClient
        HttpClient httpClient = HttpClient();
        // 2. Open the HTTP connection and set the request header
        HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));
        // 3. Request headers can be set using HttpClientRequest
        request.headers.add("token"."123456");
        // 4. Wait to connect to the server
        HttpClientResponse response = await request.close();
        // 5. Read the response
        String responseBody = await response.transform(utf8.decoder).join();
        // 6. The request ends and the httpClient is closed
        httpClient.close();

        print(responseBody);
      } catch (e) {
        print(e); }}return Scaffold(
      appBar: AppBar(
        title: Text("DioExample"),
      ),
      body: Center(
        child: Column(
          children: [
            TextButton(
              onPressed: _getUserInfo,
              child: Text("Send a GET request"() [() [() [() [() }}Copy the code

Third party network request library Http

Step 1: Add dependencies

dependencies:
  http: ^0.133. #latest version
Copy the code

Step 2: Import the library

import 'package:http/http.dart' as http;
Copy the code

Step 3: Send the request

var response = await http.post(Uri.parse("http://localhost:8080/getUserInfo"));
Copy the code

Complete example code

import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';

class HttpClientExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    void _getUserInfo() async {
      try {
        // 1. Create httpClient
        HttpClient httpClient = HttpClient();
        // 2. Open the HTTP connection and set the request header
        HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));
        // 3. Request headers can be set using HttpClientRequest
        request.headers.add("token"."123456");
        // 4. Wait to connect to the server
        HttpClientResponse response = await request.close();
        // 5. Read the response
        String responseBody = await response.transform(utf8.decoder).join();
        // 6. The request ends and the httpClient is closed
        httpClient.close();

        print(responseBody);
      } catch (e) {
        print(e); }}return Scaffold(
      appBar: AppBar(
        title: Text("DioExample"),
      ),
      body: Center(
        child: Column(
          children: [
            TextButton(
              onPressed: _getUserInfo,
              child: Text("Send a GET request"() [() [() [() [() }}Copy the code

Third party network request library Dio

Step 1: Add dependencies

dependencies:
  dio: ^4.0. 0 #latest version
Copy the code

Step 2: Import the library

import 'package:dio/dio.dart';
Copy the code

Step 3: Send the request

var response = await Dio().get('http://localhost:8080/getUserInfo');
Copy the code

Complete sample code

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

class DioExample extends StatelessWidget {

  void _getUserInfo() async {
    try {
      var response = await Dio().get('http://localhost:8080/getUserInfo');
      print(response);
    } catch (e) {
      print(e); }}@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DioExample"),
      ),
      body: Center(
        child: Column(
          children: [
            TextButton(
              onPressed: _getUserInfo,
              child: Text("Send a GET request"() [() [() [() [() }}Copy the code

conclusion

Native HttpClient network request is very complex, many things also need to be handled manually. If it involves uploading, downloading, resumable, etc., it must be very tedious and is not recommended. Dio and HTTP are two third-party components, they package similar functions, but Dio is more powerful and easy to use, and from the Star of Gitbub, Dio10000 Star, while HTTP only 691 Star, the data from August 24, 2021 statistics.