حزمة Dio في تطبيقات Flutter

الاتصال بمصدر خارجي لجلب البيانات احد المهام المطلوب منك اتقانها كمبرمج Flutter سنتعلم اليوم كيفية استخدام حزمة Dio للاتصال بمصدر بيانات وعرضها في التطبيق.

ماهو Dio :

عبارة عن حزمة تستخدم للاتصال Http لجلب البيانات من API وعرضها في التطبيقز تستطيع في Flutter استخدام حزمة Http الموجودة مسبقا ولكن Dio يحتوي على العديد من المميزات القوية والمدعوم بشكل كبير من مجموعة Flutter China, واهم المميزات في الحزمة هي الاعتراض وتحميل الملفات ايضا يدعم FormData بالاضافة لـTimeout.
في هذا الدرس سوف نستخدم jsonplaceholder وهي خدمة للمبرمجين لاختبار والاتصال وايضا لانشاء أمثلة.

اضافة حزمة Dio:

للبدء في استخدام Dio يجب علينا اضافته لمشروع وذلك عن طريق اضافة dio في ملف pubspec.yaml.

dependencies:
  dio: 3.0.10

الان تم تحميل الحزمة للمشروع٫.

دائما تاكد من اخر اصدارات الحزم وذلك بالبحث عنها في موق pub.dev

انشاء اتصال بسيط:

الان سنقوم بانشاء اتصال بسيط لعرض Todo باستخدام خدمة jsonplaceholder في الكود التالي سنقوم بالاتصال بـAPI وعرض البيانات في log.

  void getHttp() async {
    try {
      Response response =
          await Dio().get("https://jsonplaceholder.typicode.com/todos");
      print(response);
    } catch (e) {
      print(e);
    }
  }

لا تنسى اضافة الحزمة حتى تستطيع استخدامها٫.

import 'package:dio/dio.dart';

عند الاتصال ستكون المخرجات كما في التالي:

{userId: 1, id: 1, title: delectus aut autem, completed: false}, {userId: 1, id: 2, title: quis ut nam facilis et officia qui, completed: false}, {userId: 1, id: 3, title: fugiat veniam minus, completed: false}, {userId: 1, id: 4, title: et porro tempora, completed: true}, {userId: 1, id: 5, title: laboriosam mollitia et enim quasi adipisci quia provi

لان حصلنا على البيانات لكن التعامل معها سيكون غير عملي بالشكل هذا لذلك سنتعلم كيفية تحويل البيانات الى dart object.

تحويل البيانات الى Dart Object:

يوجد العديد من الحزم لتحويل json الى dart object ولكن في هذا المثال سنستخدم اقلها تعقيد عشان نركز على موضوعنا المهم وهو dio. سننشئ كائن ونسميه Todo لحمل البيانات٫.

class Todo {
  final int userId;
  final int id;
  final String title;
  final bool completed;

  Todo({this.userId, this.id, this.title, this.completed});

  factory Todo.fromJson(Map<String, dynamic> json) {
    return Todo(
        userId: json['userId'],
        id: json['id'],
        title: json['title'],
        completed: json['completed']);
  }
}

الان نستطيع تحويل json الى dart object وذلك بتمرير map الى fromJson, الان سنقوم بطلب البيانات وتحويلها الى Object بشكل بسيط٫.

  Future<List<Todo>> loadTodo() async {
    try {
      Response response =
          await Dio().get("https://jsonplaceholder.typicode.com/todos");
      final todos = response.data;
      return todos.map<Todo>((json) => Todo.fromJson(json)).toList();
    } catch (e) {
      throw Exception('Failed to load todos $e');
    }
  }

• في الشفرة السابقة نسنتخدم try للاتصال٫
• في حال الاتصال قمنا بتحويل json الى List من نوع Todo باستخدام fromJson, تلاحظ اننا قمنا بعمل دوراة على كل البيانات العائدة بحكم اننا نستخدم List في حال كنت تريد استعادة todo واحد فقط فالكود يختلف٫
• استخدمنا catch في حال حدوث خطأ في الاتصال سيقوم بايقاف لتطبيق٫.

استدعاء البيانات :

الان سنقوم باستدعاْ البيانات لعرضها للمستخدم في التطبيق٫ سنقوم بتحميل البيانات مباشرة عن تشغيل التطبيق وذلك باضافة دالة الاستدعاء في initState في StateFullWidget.

class _MyHomePageState extends State<MyHomePage> {
  Future<List<Todo>> futureTodos;

  @override
  void initState() {
    futureTodos = loadTodo();
    super.initState();
  }

عرض البيانات:

سنقوم الان بعرض البيانات للمستخدم باستخدام FutureBuilder بحيثيقوم بتحميل البيانات وبعد ذلك عرضها للمستخدم في شكل قائمة ويجب عليك اضافة future و builder للـFutureBuilder بحيث ان future يقوم باستدعاء البيانات من الـApi والـbuilder تعرض البيانات للمستخدم٫.

FutureBuilder<List<Todo>>(
        future: futureTodos,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(itemBuilder: (_, index) {
              final Todo todo = snapshot.data[index];
              return ListTile(
                  title: Text(todo.title),
                  subtitle: Text(todo.userId.toString()),
                  leading: Text(todo.id.toString()),
                  trailing: Icon(
                    Icons.fiber_manual_record,
                    color: todo.completed ? Colors.green : Colors.grey,
                  ));
            });
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          }

          // By default, show a loading spinner.
          return CircularProgressIndicator();
        },
      )

ارسال البيانات:

يمكن ارسال البيانات باستخدام post للـApi لاضافتها لقاعدة البيانات ويمكنك ذلك باستخدام.

response = await dio.post("/test", data: {"id": 12, "name": "wendu"});

انتظار اكثر من طلب:

اذا اردت جلب اكثر من future يمكنك ذلك باستخدام wait فيعيد البيانات او تنفيذها مع بعض.

response = await Future.wait([dio.post("/info"), dio.get("/token")]);

تحميل ملف :

اذا تطبيقك يقوم بتحميل الملفات في جهاز المستخدم مثلا pdf او الصور او فيديو فبامكانك استخدام دالة download

response = await dio.download("https://www.google.com/", "./xx.html");

هذا الدرس لليوم اتمنى لك يوميا سعيد واكواد بلا اخطاء