• 0

تحديد عدد العناصر المعروضه في ListView in flutter

السلام عليكم ورحمة الله وبركاته

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

كثير نشاهد في التطبيقات في القائمة الرئيسية او صفحه البداية يتم عرض مجموعة منتجات ولكن بشكل ناقص بمعنى قائمة تحتوي على 6 منتجات مثلا فقط ويتم وضع خط نصي يمكن الضغط عليه تحت اسم ( شاهد الكل ) او view all or see all  وما شابه

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

مثال على المطلوب صوره لتوضيح:

6093ee1148b97_WhatsAppImage2021-05-06at5_20_16PM.thumb.jpg.582371f534a5d2fdaec78facb4dc51b0.jpg

 

 

الذي تم وضع عليه لون الاحمر هذا المنطقه التي احاول معرفة طريقة برمجتها 

ياليت الذي جرب قبل يفيدنا 

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

import 'CategoryData.dart';

void main() {
  runApp(
    MyAffpp(),
  );
}

class MyAffpp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SecondCategryPage(),
    );
  }
}

class SecondCategryPage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<SecondCategryPage> {
  var image;
  var apiURL;
  List<Category> GetData = List();
  @override
  void initState() {
    FetchTopic().then((value) {
      setState(() {
        GetData.addAll(value);
      });
    });
    super.initState();
  }

  Future<List<Category>> FetchTopic() async {
    apiURL = 'https://***********/testpage.php';
    var response = await http.get(apiURL);
    if (response.statusCode == 200) {
      final items = json.decode(response.body).cast<Map<String, dynamic>>();
      List<Category> listOfFruits = items.map<Category>((json) {
        return Category.fromJson(json);
      }).toList();

      return listOfFruits;
    } else {
      //   _showMessageInScaffold('no data');
      throw Exception('Failed to load data from Server.');
    }
  }




  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: Column(children: <Widget>[
            Flexible(
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    crossAxisSpacing: 2.0,
                    mainAxisSpacing: 2.0,
                    childAspectRatio: 2.1 / 3),
                itemCount: GetData.length,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    child: Card(
                      //  margin: EdgeInsets.all(5.0),
                      elevation: 3,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          Expanded(
                              child: GestureDetector(
                            child: Column(
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: <Widget>[
                                  ClipRRect(
                                    borderRadius: BorderRadius.vertical(
                                        top: Radius.circular(10.0)),
                                    child: Image.network(
                                        GetData[index].ImageURL,
                                        height: 120,
                                        fit: BoxFit.cover),
                                  ),
                                  // SizedBox(height: 8),
                                  // Divider(),

                                  Center(
                                    child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                        children: <Widget>[
                                          Text(GetData[index].Name),
                                        ]),
                                  ),
                                ]),
                          )),
                        ],
                      ),
                    ),
                  );
                },
              ),
            )
          ]),
        ),
      ),
    );
  }
}

ولكم جزيل الشكر

 

تمّ تعديل بواسطة مروان مروان3

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

الأمر بسيط جداً , يمكنك تغيير القيمة التالية 

itemCount: GetData.length,

إلى أي رقم تريده وليكن مثلاً 6 بهذا الشكل

itemCount: 6,

بحيث سيظهر فقط 6 منتجات فقط.

1 شخص أعجب بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ منذ ساعة مضت قال بلال زيادة:

الأمر بسيط جداً , يمكنك تغيير القيمة التالية 


itemCount: GetData.length,

إلى أي رقم تريده وليكن مثلاً 6 بهذا الشكل


itemCount: 6,

بحيث سيظهر فقط 6 منتجات فقط.

كل الشكر لك اخي الكريم 

نجح الامر

1 شخص أعجب بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن