اذهب إلى المحتوى
  • 0

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

Flutter Dev

السؤال

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

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

كثير نشاهد في التطبيقات في القائمة الرئيسية او صفحه البداية يتم عرض مجموعة منتجات ولكن بشكل ناقص بمعنى قائمة تحتوي على 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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

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

itemCount: GetData.length,

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

itemCount: 6,

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

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

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

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


itemCount: GetData.length,

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


itemCount: 6,

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

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

نجح الامر

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

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...