شرح كيفية عمل تحديث للبيانات الموجوده بداخل الصفحه وجلب بيانات جديده في فلاتر

شرح كيفية عمل تحديث للبيانات الموجوده بداخل الصفحه وجلب بيانات جديده في فلاتر

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

مر وقت كان عليك فيه الاختيار بين إنشاء تطبيقات أصلية وتطبيقات عالمية للأجهزة المحمولة. غالبًا ما تعمل تقنيات الويب مثل HTML و JavaScript ، والتي كانت تستخدمها التطبيقات العالمية ، بشكل سيئ على الأجهزة المحمولة. على الرغم من كونها أكثر تكلفة وتتطلب فريق تطوير متخصصًا لكل منصة ، إلا أن التطبيقات المحلية كانت تعمل بشكل أفضل حيث تم إنشاؤها خصيصًا لكل جهاز ترغب في دعمه.

تم تغيير ذلك بواسطة Flutter ، إطار عمل مفتوح المصدر أنشأته Google. Ionic و React Native و Xamarin ليست سوى عدد قليل من الحلول المتاحة للمطورين اليوم لبناء تطبيقات محمولة سريعة تعمل عبر منصات مختلفة. لا تزال Dart ، لغة البرمجة المدمجة في Flutter ، محبوبة ومستخدمة جيدًا.

بالإضافة إلى تطبيقات Android المكتبية الأولية ، فإن Flutter 3 ، الذي تم تقديمه في وقت سابق من هذا العام ، يدعم أيضًا تطبيقات سطح المكتب لنظامي التشغيل MacOS و Linux.

How to get New data and refresh

قمنا هنا بعمل custom widget لتنفيذ عملية انتظار البيانات الى ان يتم التحميل كما هو موضح , وبعدها قمنا بعمل methode تحمل البيانات مع انتظار بعض الوقت الى ان يتم التحميل وفي ال body قمنا بعمل اختبار اذا كانت البيانات قد التحميل او تم تحمليها وبناء على القيمه سوف يتم تنفيذ العمليه سواء عرض البيانات او عرض شريط التحميل الذي قمنا بتصميمه .

ui.dart

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

  @override
  State<FullPage> createState() => _FullPageState();
}

class _FullPageState extends State<FullPage> {
  List<int> data = [];

  @override
  void initState() {
    super.initState();
    loadList();
  }

  Future loadList() async {
    await Future.delayed(Duration(seconds: 2));
    final random = Random();
    final data = List.generate(50, (index) => random.nextInt(100));
    setState(() => this.data = data);
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(backgroundColor: Colors.orange[100],appBar: AppBar(
      backgroundColor: Colors.orange[300],
    ), body: buildGetData());
  }

  Widget buildGetData() => data.isEmpty
      ? Center(child: CircularProgressIndicator())
      : RefreshWidget(
          onRefresh: loadList,
          child: ListView.builder(
              // if used buildIosList ==> use shrinkWrap + primary
              shrinkWrap: true,
              primary: false,
              padding: const EdgeInsets.all(8),
              itemCount: data.length,
              itemBuilder: (context, index) {
                final name = data[index];
                return buildItem(name);
              }),
        );

  Widget buildItem(int name) {
    return Center(
      child: Text(
        name.toString(),
        style: const TextStyle(
            color: Colors.black, fontSize: 32, fontWeight: FontWeight.bold),
      ),
    );
  }
}

Refresh widget flutter

RefreshWidget.dart

class RefreshWidget extends StatefulWidget {
  const RefreshWidget({Key? key, required this.child, required this.onRefresh})
      : super(key: key);
  final Widget child;
  final Future Function() onRefresh;

  @override
  State<RefreshWidget> createState() => _RefreshWidgetState();
}

class _RefreshWidgetState extends State<RefreshWidget> {
  @override
  Widget build(BuildContext context) => buildIosList();

  Widget buildAndroidList() =>
      RefreshIndicator(child: widget.child,
          onRefresh: widget.onRefresh);

  Widget buildIosList() => CustomScrollView(
    physics: BouncingScrollPhysics(),
    slivers: [
      CupertinoSliverRefreshControl(
        onRefresh: widget.onRefresh,
      ),
      SliverToBoxAdapter(child: widget.child),
    ],
  );
}

مزيد من المقالات

• تصميم صفحة sign in و sign up بإستخدام animation في flutter
• كيفية وضع العناصر فوق بعض في فلاتر بدون مكتبات باستخدام Stack
•  التعديل على زر الرجوع للخلف في فلاتر
• شرح تمرير البيانات في Flutter اثناء الانتقال بين الصفحات
•  تغيير علامة التحميل في فلاتر الى مجموعه من الاشكال الرائعه