Flutter DIO 라이브러리 예제2

DIO 라이브러리 interceptors 사용 시 Null Safety 전후 변동사항

initializeInterceptors(){
  _dio.interceptors.add(InterceptorsWrapper(
    onError: (error){
      print(error.message);
    },
    onRequest: (request){
      print("${request.method} ${request.path}");
    },
    onResponse: (response){
      print(response.data);
    }
  ));
}
 
// ------ Null Safety 이후 -----------------------------
 
initializeInterceptors() {
  _dio.interceptors.add(InterceptorsWrapper(
    onRequest: (request, handler) async {
      print("${request.method} ${request.path}");
    },
    onResponse: (response, handler) async {
      print(response.data);
    },
    onError: (error, handler) async {
      print(error.message);
    },
  ));
}

 

pubspec.yaml 수정사항 : Null Safety 기준 : 2.12.0

- flutter pub add http 및 flutter pub add dio , flutter pub add json_serializable 을 각각 터미널 창에서 실행

- flutter pub get 를 하면 아래 dependencies 에 최신 버전이 추가된다.

environment:
  sdk: ">=2.17.5 <3.0.0"
 
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  http: ^0.13.4
  dio: ^4.0.6
  json_serializable: ^6.2.0
 
 
dev_dependencies:
  flutter_test:
    sdk: flutter
 
  flutter_lints: ^2.0.0
  build_runner: ^2.1.11
 
flutter:
 
  uses-material-design: true
  assets:
    - images/photo_base.png
 

 

User 클래스 생성하는 방법이 아래와 같은 방식으로 구글에서 많이 검색된다.

이전 게시글에서 직접 User Class 를 정의한 것과 동일하므로 비교해보는 것도 ....

user.dart 파일

import 'package:json_annotation/json_annotation.dart';
 
part 'user.g.dart';
// 아래와 같이 Class 를 정의하고 터미널 창에서
// flutter pub run build_runner build
// flutter pub get
 
@JsonSerializable()
class User {
  int idx;
  @JsonKey(name : "userNM")
  String userNM;
  @JsonKey(name : "mobileNO")
  String mobileNO;
  @JsonKey(name : "telNO")
  String telNO;
 
  String photo;
 
  User(
      {required this.idx,
        required this.userNM,
        required this.mobileNO,
        required this.telNO,
        required this.photo});
 
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
 
}

 

자동 생성된 user.g.dart 파일

// GENERATED CODE - DO NOT MODIFY BY HAND
 
part of 'user.dart';
 
// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************
 
User _$UserFromJson(Map<String, dynamic> json) => User(
      idx: json['idx'] as int,
      userNM: json['userNM'] as String,
      mobileNO: json['mobileNO'] as String,
      telNO: json['telNO'] as String,
      photo: json['photo'] as String,
    );
 
Map<String, dynamic> _$UserToJson(User instance) => <String, dynamic>{
      'idx': instance.idx,
      'userNM': instance.userNM,
      'mobileNO': instance.mobileNO,
      'telNO': instance.telNO,
      'photo': instance.photo,
    };
 

 

http_service.dart 파일

import 'package:dio/dio.dart';
 
class DioService {
  late final Dio _dio;
  final baseUrl = 'https://www.abc.com';
 
  DioService(){
    BaseOptions options = BaseOptions(
      baseUrl: baseUrl,
      connectTimeout: 3000,
      receiveTimeout: 3000,
    );
 
    _dio = Dio(options);
    initializeInterceptors();
  }
 
  Future<Response> getRequest(String endPoint) async {
    Response response;
 
    try {
      response = await _dio.get(endPoint);
    } on DioError catch (e) {
      print(e.message);
      throw Exception(e.message);
    }
 
    return response;
  }
 
  initializeInterceptors() {
    _dio.interceptors.add(InterceptorsWrapper(
      onRequest: (request, handler) async {
        print("${request.method} ${request.path}");
        return handler.next(request);
      },
      onResponse: (response, handler) async {
        print(response.headers);
        print(response.data);
        return handler.next(response);
      },
      onError: (error, handler) async {
        print(error.message);
        return handler.next(error);
      },
    ));
  }
}

 

main.dart 파일

import 'package:dio_sampe2/network/http_service.dart';
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'model/user.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'JSON Data Parsing Demo'),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
 
  final String title;
 
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  bool isLoading = false;
  late List<User> users;
  late DioService dio;
 
  Future getListUser() async {
    Response response;
    try {
      isLoading = true;
      response = await dio.getRequest("/androidSample/getData_Flutter2.php");
      isLoading = false;
 
      if (response.statusCode == 200) {
        setState(() {
          users = response.data.map<User>((json) {
            return User.fromJson(json);
          }).toList();
        });
      } else {
        print("There is some problem status code not 200");
      }
    } on Exception catch (e) {
      isLoading = false;
      print(e);
    }
  }
 
  @override
  void initState() {
    dio = DioService();
    getListUser();
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : users != null
              ? ListView.builder(
                  itemCount: users.length,
                  itemBuilder: (context, index) {
                    final user = users[index];
 
                    return ListTile(
                      title: Text(user.userNM),
                      leading: user.photo.length == 0
                          ? Image.asset('images/photo_base.png')
                          : Image.network(
                              'https://www.abc.com/androidSample/photos/${user.photo}'),
                      subtitle: Text(user.mobileNO),
                    );
                  },
                )
              : Center(
                  child: Text("No User Object"),
                ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              setState(() {
                //getServerDataWithHttp();
              });
            },
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
          SizedBox(
            width: 10.0,
            height: 10.0,
          ),
          FloatingActionButton(
            onPressed: () {
              setState(() {
                dio = DioService();
                getListUser();
              });
            },
            tooltip: 'Increment',
            child: const Icon(Icons.remove),
          ),
        ],
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
 
 

 

서버에 있는 List 자료를 가져와서 ListView 에 보여주는 코드 구현의 기본 샘플이 작성되었다.

 

https://github.com/themaaz32/dio_and_json 는 Null Safety 이전 코드인데, 참고하면 도움된다.