شرح كيفية عمل Cache للبيانات من الApi بإستخدام Dio في Flutter

شرح كيفية عمل Cache للبيانات من الApi بإستخدام Dio

في هذا المقال نشرح لكم كيف تقوم بتخزين البيانات التي تحصل عليها من الانترنت وخصوصا من api بداخل الذاكرة المؤقته في جهازك بحيث يمكنك عرض البيانات في حالة عدم وجود انترنت وايضا تخزين البيانات بمده معينه وبعدها يتم حذفها بشكل اوتوماتيكي من الذاكرة المؤقته , وهذا من اكثر الدروس التي يبحث عنها عدد كبير من المستخدمين ويريدون اضافتها في تطبيقات الاندرويد الخاصه بهم او حتى لانظمة ios والامر بسيط جدا وفي هذا المقال سوف نتعرف على الطريقة بكل سهوله .

هل تريد تطبيقًا لأي شيء ولكنك تفتقر إلى الإمكانات اللازمة لتحقيق ذلك؟ هل تمتلك شركة وتدرك الفوائد العديدة التي سيحققها التطبيق لاسمك ولكنك تفتقر إلى الحد الأدنى البالغ 25000 دولار لدفع مطور التطبيق؟ هل لديك الكثير من الأفكار للتطبيقات ولكنك تفتقر إلى مهارات الترميز أو المهارات التقنية اللازمة لعملها؟ هناك العديد من الأسباب المقنعة للانضمام لتعلم برمجة تطبيقات الهاتف المحمول وتطوير تطبيقات Android و iOS ، وهذا ما توفره لنا Flutter برمز واحد

Packages

  dio: ^4.0.6

  dio_http_cache: ^0.3.0

How to Cache data to local database in Flutter

بعد اضافة المكتبات السابقة تستطيع اضافة البيانات بداخل cache في تطبيقك بسهوله وذلك يكون عن طريق DioCacheManager وبعدها تقوم بعمل Options ويكون buildCacheOptions وبداخله ضع المده التي تريد حفظ البيانات بداخلها وبعدها يمكنك عمل forceRefresh ومن خلاله اذا كانت نعم فسوف يحضر البيانات من السيرفر في حالة وجود انترنت واذا لم يكن هناك انترنت سوف يتم عرضها من الذاكرة المؤقته واذا كانت الاجابة لا فسيتم عرض البيانات من الذاكره المؤقته دائما الى ان تنتهي المده التي يتم تخزين بها البيانات .

dio.dart

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  Dio dio = Dio();
  List<MovieModel> list = [];
  
  @override
  void initState() {
    super.initState();
  }


  // good idea
  Future<List<MovieModel>> getData() async {

    DioCacheManager dioCacheManager = DioCacheManager(CacheConfig());
    // If you want to retrieve data from the Internet, if there is an Internet, you can use forceRefresh: true.
    // If you want to display only the data in the cache, you can use forceRefresh: false.
    Options options = buildCacheOptions(const Duration(seconds: 60),forceRefresh: true);
    dio.interceptors.add(dioCacheManager.interceptor);

    final response = await dio.get(ApiConstance.nowPlayingMoviesPath,options: options);

    for (var element in (response.data['results'] as List)) {
      list.add(MovieModel.fromJson(element));
    }
    return list;
  }

  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<MovieModel>>(
          future: getData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(child: CircularProgressIndicator(),);
            }
            if (snapshot.hasError) {
              return Center(child:Text('Error: Check Internet Connection'));
            }
            return Padding(
              padding: EdgeInsets.all(15.0),
              child: ListView.builder(
                physics: const BouncingScrollPhysics(),
                itemBuilder: (context, index) => ListTile(
                  title: Text(list[index].title.toString()),
                ),
                itemCount: snapshot.data!.length,
              ),
            );
          }),
    );
  }
}