ظهور الصوره قبل انتهاء الاتصال flutter

Flutter Dev · 10 سبتمبر 2021

تحيه طيبه للجميع

استعمال الكود التالي لتحقق من توفر البيانات في القائمة من عدمه :

Widget getTasListView() {
        return arrList.isNotEmpty
            ? ListView.builder(
                itemCount: arrList.length,
                itemBuilder: (BuildContext context, int position) {
                  return Card(
                    color: Colors.white,
                    elevation: 2.0,
                    child: Column(
                      children: <Widget>[
                        ListTile(
                          title: Text(this.list[position].task),
                          onLongPress: () =>
                              navigateToDetail(this.list[position], 'Edit Task'),
                        )
                      ],
                    ),
                  );
                })
            : Center(child: Image.asset("path/image/img.png"));
      }

المشكله التي اعاني منها ان الصوره في بعض الاوقات تظهر قبل انتهاء الاتصال او ظهور العناصر في القائمة حتى لو كانت ليست فارغه بمعنى حسب ما فهمت ان لو تاخر تحميل العناصر قليلا يتم اظهار الصوره حتى ظهور العناصر ثم تظهر العناصر وتختفي الصوره

هل يوجد حل لهذا المشكله بحيث لو كان هنالك بيانات انا لا احتاج الى اظهار الصوره كامل فقط تظهر لو لم يكن هنالك بيانات

وهذا الكود المستعمل للاتصال مع قاعدة البيانات :

 Future<List<Data>> fetchNotes() async {
    final String url = 'https://***************.php?id=' + id.toString();
    var response = await http.post(Uri.parse(url));
    var flowers = List<Data>();
    if (response.statusCode == 200) {

        final flowersJsonData = json.decode(response.body).cast<Map<String, dynamic>>();
        for (var flower in flowersJsonData) {
          flowers.add(Data.fromJson(flower));
        }

    }
    else {
      throw Exception('Failed to load data from Server.');
    }
    return flowers;
  }

بلال زيادة · 10 سبتمبر 2021

ما تفعله خاطئ, يجب عليك إظهار صورة التحميل , أو صورة التي تدل على أن البيانات يتم جلبها في FutureBuilder , بحيث تتحقق من وصول البيانات باستخدام snapshot.hasData بهذه الطريقة

return snapshot.hasData ? _build(context,snapshot.data) : Container();

بحيث إذا لا توجد بيانات يمكنك تغيير Container إلى الصورة التي تستخدمها أو إلى

CircularProgressIndicator()

فتكون FutureBuilder بهذا الشكل كاملاً

child: FutureBuilder(
future: future,
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
  case ConnectionState.none:
  return Center(
  child: Text('No Connection'),
  );
  break;
  case ConnectionState.waiting:
  case ConnectionState.active:
  return CircularProgressIndicator();
  break;
  case ConnectionState.done:
  if (snapshot.hasError) {
  print(snapshot.error);
  print("Dashboard Error");
}

return snapshot.hasData ? _build(context, snapshot.data) : CircularProgressIndicator();
break;
}
return Container();
},
),

Flutter Dev · 10 سبتمبر 2021

بتاريخ 16 دقائق مضت قال بلال زيادة:
ما تفعله خاطئ, يجب عليك إظهار صورة التحميل , أو صورة التي تدل على أن البيانات يتم جلبها في FutureBuilder , بحيث تتحقق من وصول البيانات باستخدام snapshot.hasData بهذه الطريقة
return snapshot.hasData ? _build(context,snapshot.data) : Container();
بحيث إذا لا توجد بيانات يمكنك تغيير Container إلى الصورة التي تستخدمها أو إلى
CircularProgressIndicator()
فتكون FutureBuilder بهذا الشكل كاملاً
child: FutureBuilder<List<ProductsModel>>(
future: future,
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
  case ConnectionState.none:
  return Center(
  child: Text('No Connection'),
  );
  break;
  case ConnectionState.waiting:
  case ConnectionState.active:
  return CircularProgressIndicator();
  break;
  case ConnectionState.done:
  if (snapshot.hasError) {
  print(snapshot.error);
  print("Dashboard Error");
}

return snapshot.hasData ? _build(context, snapshot.data) : CircularProgressIndicator();
break;
}
return Container();
},
),

اهلا بك اخي الكريم

شاكر لك ردك اخي

سوال لو سمحت في هذا السطر

return snapshot.hasData ? _build(context, snapshot.data) : CircularProgressIndicator();

ما المقصود بـ _build هنا ؟

بلال زيادة · 10 سبتمبر 2021

بتاريخ 15 دقائق مضت قال مروان مروان3:
اهلا بك اخي الكريم

شاكر لك ردك اخي

سوال لو سمحت في هذا السطر
return snapshot.hasData ? _build(context, snapshot.data) : CircularProgressIndicator();
ما المقصود بـ _build هنا ؟

هذا مثال قمت بوضعه ، اسف لم انتبه انني لم أوضح أن هذا الكود مثال ، ولكن هذه widget أقوم بتمرير اليها البيانات و من ثم في هذه widget أقوم ببناء الواجهة و توزيع البيانات على الواجهة.

Flutter Dev · 10 سبتمبر 2021

بتاريخ الآن قال بلال زيادة:

هذا مثال قمت بوضعه ، اسف لم انتبه انني لم أوضح أن هذا الكود مثال ، ولكن هذه widget أقوم بتمرير اليها البيانات و من ثم في هذه widget أقوم ببناء الواجهة و توزيع البيانات على الواجهة.

انا قمت بتطبيقه بشكل مختلف ولكن نفس الكود المشكله ان بعد ان تتوقف CircularProgressIndicator لا تظهر الصورة في حالة عدم توفر البيانات

قمت بوضع الصوره هنا بستبدال return Container();

بلال زيادة · 10 سبتمبر 2021

بتاريخ 1 دقيقة مضت قال مروان مروان3:

انا قمت بتطبيقه بشكل مختلف ولكن نفس الكود المشكله ان بعد ان تتوقف CircularProgressIndicator لا تظهر الصورة في حالة عدم توفر البيانات

قمت بوضع الصوره هنا بستبدال return Container();

ممكن توفق كامل الكود بعد التعديل الذي قمت به ، يرجى وضع الكود داخل ملف و إرفاق الملف كاملا

Flutter Dev · 10 سبتمبر 2021

بتاريخ منذ ساعة مضت قال بلال زيادة:

ممكن توفق كامل الكود بعد التعديل الذي قمت به ، يرجى وضع الكود داخل ملف و إرفاق الملف كاملا

اهلا بك اخي مثالك كان شغال لدي ولكن المشكلة كانت في كود الاتصال قمت بوضع دالة شرطيه فيه وتم حل المشكله ولله الحمد كل الشكر على اضافتك فادتني كثير

ظهور الصوره قبل انتهاء الاتصال flutter

السؤال

Flutter Dev

رابط هذا التعليق

شارك على الشبكات الإجتماعية

6 أجوبة على هذا السؤال

Recommended Posts

بلال زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Flutter Dev

رابط هذا التعليق

شارك على الشبكات الإجتماعية

بلال زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Flutter Dev

رابط هذا التعليق

شارك على الشبكات الإجتماعية

بلال زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Flutter Dev

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية