在 Flutter 中使用 dio【Flutter 专题 3】

flutter create flutter_dio_networking

code flutter_dio_networking

dio: ^4.0.4

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dio Networking',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

GET https://reqres.in/api/users/<id>

class User {
  User({
    required this.data,
  });
  Data data;
  factory User.fromJson(Map<String, dynamic> json) => User(
        data: Data.fromJson(json["data"]),
      );
  Map<String, dynamic> toJson() => {
        "data": data.toJson(),
      };
}

dependencies:
  json_annotation: ^4.0.1
dev_dependencies:
  json_serializable: ^4.1.3
  build_runner: ^2.0.4

import 'package:json_annotation/json_annotation.dart';
import 'data.dart';
part 'user.g.dart';
@JsonSerializable()
class User {
  User({
    required this.data,
  });
  Data data;
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

flutter pub run build_runner build

flutter pub run build_runner serve --delete-conflicting-outputs

class DioClient {
  // TODO: Set up and define the methods for network operations
}

import 'package:dio/dio.dart';
class DioClient {  final Dio _dio = Dio();}

import 'package:dio/dio.dart';
class DioClient {  final Dio _dio = Dio();
  final _baseUrl = 'https://reqres.in/api';
  // TODO: Add methods}

Future<User> getUser({required String id}) async {
    // Perform GET request to the endpoint "/users/<id>"
    Response userData = await _dio.get(_baseUrl + '/users/$id');
    // Prints the raw data returned by the server
    print('User Info: ${userData.data}');
    // Parsing the raw JSON data to the User class
    User user = User.fromJson(userData.data);
    return user;
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  final DioClient _client = DioClient();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Info'),
      ),
      body: Center(
        child: FutureBuilder<User?>(
          future: _client.getUser(id: '1'),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              User? userInfo = snapshot.data;
              if (userInfo != null) {
                Data userData = userInfo.data;
                return Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Image.network(userData.avatar),
                    SizedBox(height: 8.0),
                    Text(
                      '${userInfo.data.firstName} ${userInfo.data.lastName}',
                      style: TextStyle(fontSize: 16.0),
                    ),
                    Text(
                      userData.email,
                      style: TextStyle(fontSize: 16.0),
                    ),
                  ],
                );
              }
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

import 'package:json_annotation/json_annotation.dart';
part 'user_info.g.dart';
@JsonSerializable()class UserInfo {  String name;  String job;  String? id;  String? createdAt;  String? updatedAt;
  UserInfo({    required this.name,    required this.job,    this.id,    this.createdAt,    this.updatedAt,  });
  factory UserInfo.fromJson(Map<String, dynamic> json) => _$UserInfoFromJson(json);  Map<String, dynamic> toJson() => _$UserInfoToJson(this);}

Future<UserInfo?> createUser({required UserInfo userInfo}) async {  UserInfo? retrievedUser;
  try {    Response response = await _dio.post(      _baseUrl + '/users',      data: userInfo.toJson(),    );
    print('User created: ${response.data}');
    retrievedUser = UserInfo.fromJson(response.data);  } catch (e) {    print('Error creating user: $e');  }
  return retrievedUser;}

Future<UserInfo?> updateUser({  required UserInfo userInfo,  required String id,}) async {  UserInfo? updatedUser;
  try {    Response response = await _dio.put(      _baseUrl + '/users/$id',      data: userInfo.toJson(),    );
    print('User updated: ${response.data}');
    updatedUser = UserInfo.fromJson(response.data);  } catch (e) {    print('Error updating user: $e');  }
  return updatedUser;}

Future<void> deleteUser({required String id}) async {  try {    await _dio.delete(_baseUrl + '/users/$id');    print('User deleted!');  } catch (e) {    print('Error deleting user: $e');  }}

final Dio _dio = Dio(  BaseOptions(    baseUrl: 'https://reqres.in/api',    connectTimeout: 5000,    receiveTimeout: 3000,  ),);

String imagePath;
FormData formData = FormData.fromMap({  "image": await MultipartFile.fromFile(    imagePath,    filename: "upload.jpeg",  ),});
Response response = await _dio.post(  '/search',  data: formData,  onSendProgress: (int sent, int total) {    print('$sent $total');  },);

import 'package:dio/dio.dart';
class Logging extends Interceptor {  @override  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {    print('REQUEST[${options.method}] => PATH: ${options.path}');    return super.onRequest(options, handler);  }
  @override  void onResponse(Response response, ResponseInterceptorHandler handler) {    print(      'RESPONSE[${response.statusCode}] => PATH: ${response.requestOptions.path}',    );    return super.onResponse(response, handler);  }
  @override  void onError(DioError err, ErrorInterceptorHandler handler) {    print(      'ERROR[${err.response?.statusCode}] => PATH: ${err.requestOptions.path}',    );    return super.onError(err, handler);  }}

final Dio _dio = Dio(    BaseOptions(      baseUrl: 'https://reqres.in/api',      connectTimeout: 5000,      receiveTimeout: 3000,    ),  )..interceptors.add(Logging());