الفواصل في ListView.separated لا تعمل في Flutter

يمكننا محاولة بناء مصفوفة الأبناء children بطريقة ديناميكية، سوف نضع separetor بين العناصر

children: [
                Text("${snapshot.data[index]['Name']}"),
                Text("${snapshot.data[index]['Age']}"),
                Text("${snapshot.data[index]['Location']}"),
                Text("${snapshot.data[index]['Others']}"),
              ],

=>
children: [
  snapshot.data[index].forEach((key, value){
      return Container(
          margin: const EdgeInsets.only( right: 20.0),
                  child:  Text("value"),
      )
  }
],

      
  

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

بعد تطبيق الكود بشكل أعلاه احصل على الخطاء التالي:

عملت تعديل للكود الأول،

الفكرة أن الفاصل العمودي عملته هوامش خارجية للحاوبة container و كل قيمة ضمن Text ويتم المرور على snapshot.data[index] و استخلاص القيم حسب عدد المفاتيح فيها

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

قمت بتطبيق الكود اخي بشكل أعلاه ثم حصلت على الخطاء التالي:

type 'Null' is not a subtype of type 'Widget'

ما السطر الذي يعيد null؟

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

صورة توضح ما أحاول القيام به:

لقد فهمت من سؤالك الأول أنك تريد وضع القيم بجانب بعضها مع مسافات أفقية بينها..

ما الفائدة من استخدام ListView.separated إن كان لديك عنصر واحد؟ أليس من الأفضل عمل التصميم بشكل عمود بسيط

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

وماذا تقصد ب شكل العمودي

الصورة التقريبية التي أرفقتها للتصميم

كيف يظهر التصميم حالياً.

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

هو شغال بشكل هذا ولكن الفواصل لا تظهر بينهم

لقد وجدت فكرة خلال البحث، وهي حقن ال divider لمصفوفة widgets بالاستعانة بمفهوم الإضافة extention من خلال عمل مؤشر يتحرك على القائمة ثم يبني واحدة أخرى ديناميكياً بإضافة widget هي separator

extension IterableExt<T> on Iterable<T> {
  Iterable<T> superJoin(T separator) {
    final iterator = this.iterator;
    if (!iterator.moveNext()) return [];

    final _l = [iterator.current];
    while (iterator.moveNext()) {
      _l..add(separator)..add(iterator.current);
    }
    return _l;
  }
}

وطريقة الاستدعاء تكون:

return Row(
      children: <Widget>[
        const Text('Foo'),
        const Text('Foo'),
        const Text('Bar'),
      ].superJoin(const SizedBox(width: 10,)).toList(),
      
    );

نقوم باستدعاء superJoin وتمرير الفاصل له ليقوم بحقنه بين كل عنصرين.

لطريقة أخرى، عليكا بناء دالة تعيد 

List<Widget>

وتنفيذ الفكرة كالتالي:

• دالة تعيد قائمة من الواجهات
• تستقبل قائمة من العناصر 
• نمرر لها separator
• نقوم بالمرور على القائمة الأساسية و نأخذ منها العناصر ونضيفهم للقائمة الثانية مع ال separator بالتناوب
• سوف يمثل استدعاء هذه الدالة قيمة children

List<Widget> createRowChildrenWithPadding(List<Widget> widgets, Padding pading) {
    var joined = List<Widget>();

    for (var i = 0;  i < widgets.length; i++) {
        if ( i != widgets.length - 1)  {
            joined.add(widgets[i]);
            joined.add(padding);
        } else {
            joined.add(widgets[i]);
        }
    }
    return joined;
}

بالنسبة للخطأ السابق،

أعتقد أن حله يكون كالتالي:

return Column(
                  children: <Widget>
                    snapshot.data[index].forEach((key, value){
                      return Container(
                        margin:  EdgeInsets.only(left: 20.0, right: 20.0),
                        child:  Text(snapshot.data[index]['name']),
                      );

                    }
                    ),

                );

 ListView.separated(
              separatorBuilder: (BuildContext context, int index) {
                return Divider(
                  thickness: 1,
                );
              },
              shrinkWrap: true,
              itemCount: snapshot.data.length,
              scrollDirection: Axis.vertical,
              physics: ScrollPhysics(),
              itemBuilder: (BuildContext context, int index) {
                return Column(
                  children: <Widget>[
                    snapshot.data[index].forEach((key, value){
                      return Container(
                        margin:  EdgeInsets.only(left: 20.0, right: 20.0),
                        child:  Text(snapshot.data[index]['name']),
                      );

                    }
                    )],

                );
              });

قمت بتطبيق الكود اخي بشكل أعلاه ثم حصلت على الخطاء التالي:

type 'Null' is not a subtype of type 'Widget'

بتاريخ الآن قال Wael Aljamal:

عملت تعديل للكود الأول،

الفكرة أن الفاصل العمودي عملته هوامش خارجية للحاوبة container و كل قيمة ضمن Text ويتم المرور على snapshot.data[index] و استخلاص القيم حسب عدد المفاتيح فيها

مرحبا اخي نعم اعتذر كنت أحاول تطبيق فكرة 

قمت بإرجاع الكود ولكن نفس المشكلة تظهر

بتاريخ 3 دقائق مضت قال Wael Aljamal:

ما السطر الذي يعيد null؟

لقد فهمت من سؤالك الأول أنك تريد وضع القيم بجانب بعضها مع مسافات أفقية بينها..

ما الفائدة من استخدام ListView.separated إن كان لديك عنصر واحد؟ أليس من الأفضل عمل التصميم بشكل عمود بسيط

هذا السطر الذي يعيد قيمة فارغة :

    snapshot.data[index].forEach((key, value){

لم افهم هذا النقطة اخي الكريم أي عنصر تقصد؟ وماذا تقصد ب شكل العمودي

ما الفائدة من استخدام ListView.separated إن كان لديك عنصر واحد؟ أليس من الأفضل عمل التصميم بشكل عمود بسيط

التصميم عمودي اخي وليس افقي 

يعني الاسم

ثم ياتي اسفله

العمر

ثم ياتي اسفل العمر

الموقع .. الخ

ولكني ارغب بوضع بين هذا الاسطر الفاصله

بتاريخ 5 دقائق مضت قال Wael Aljamal:

الصورة التقريبية التي أرفقتها للتصميم

كيف يظهر التصميم حالياً.

نعم اخي

شكل القائمة المعتاد ما أحاول القيام به 

عناصر متاليه 

كل واحد يأتي بعد الذي أعلاه

هو شغال بشكل هذا ولكن الفواصل لا تظهر بينهم

بتاريخ 5 ساعات قال Wael Aljamal:

لقد وجدت فكرة خلال البحث، وهي حقن ال divider لمصفوفة widgets بالاستعانة بمفهوم الإضافة extention من خلال عمل مؤشر يتحرك على القائمة ثم يبني واحدة أخرى ديناميكياً بإضافة widget هي separator

extension IterableExt<T> on Iterable<T> {
  Iterable<T> superJoin(T separator) {
    final iterator = this.iterator;
    if (!iterator.moveNext()) return [];

    final _l = [iterator.current];
    while (iterator.moveNext()) {
      _l..add(separator)..add(iterator.current);
    }
    return _l;
  }
}

وطريقة الاستدعاء تكون:

return Row(
      children: <Widget>[
        const Text('Foo'),
        const Text('Foo'),
        const Text('Bar'),
      ].superJoin(const SizedBox(width: 10,)).toList(),
      
    );

نقوم باستدعاء superJoin وتمرير الفاصل له ليقوم بحقنه بين كل عنصرين.

لطريقة أخرى، عليكا بناء دالة تعيد 

List<Widget>

وتنفيذ الفكرة كالتالي:

• دالة تعيد قائمة من الواجهات
• تستقبل قائمة من العناصر 
• نمرر لها separator
• نقوم بالمرور على القائمة الأساسية و نأخذ منها العناصر ونضيفهم للقائمة الثانية مع ال separator بالتناوب
• سوف يمثل استدعاء هذه الدالة قيمة children

List<Widget> createRowChildrenWithPadding(List<Widget> widgets, Padding pading) {
    var joined = List<Widget>();

    for (var i = 0;  i < widgets.length; i++) {
        if ( i != widgets.length - 1)  {
            joined.add(widgets[i]);
            joined.add(padding);
        } else {
            joined.add(widgets[i]);
        }
    }
    return joined;
}

بالنسبة للخطأ السابق،

أعتقد أن حله يكون كالتالي:

return Column(
                  children: <Widget>
                    snapshot.data[index].forEach((key, value){
                      return Container(
                        margin:  EdgeInsets.only(left: 20.0, right: 20.0),
                        child:  Text(snapshot.data[index]['name']),
                      );

                    }
                    ),

                );

 

اهلا اخي الكريم اعتذر على تأخر الرد

بالنسبة الي الطريقة الأولى حقيقه تبدو معقده قليلا علي 

اما التعديل الثاني ما تزال نفس المشكلة 

type 'Null' is not a subtype of type 'Widget'

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

بالنسبة الي الطريقة الأولى حقيقه تبدو معقده قليلا علي 

هذه أفضل طريقة حاول مجدداً تطبيقها. أرجو تجاهل الحل السابق الأول