شرح استخدام grid view مع staggered في Flutter بعدة انماط

شرح استخدام grid view مع staggered في Flutter بعدة انماط

بسم الله الرحمن الرحيم في هذه المقالة سوف نشرح لكم الحالات المختلفه في استخدام grid view وكيف تقوم بعمل تصميم مخصص لك او اختيار او تصميم من التصميمات التي نقدمها لكم بالاسفل كما هو موضح , حيث تعد ال grid view نوع من انواع ال listView وهيا تقوم بعرض الlist ولكن بشكل مخصص حتى تستطيع استخدامها في تطبيقك بدون مشاكل وتحسين من شكل التطبيق بشكل كبير جدا ويوجد مكتبة بسيطه تقوم بتنفيذ كل ما تم ذكرة بالاعلى .

add packages:

flutter_staggered_grid_view: ^0.6.2

How to use staggered_grid_view in Flutter

الامر بسيط جدا سوف تجد مجموعه من الاشكال وكل شكل موجود بصورة المقاله سوف تجد الرقم الخاص به في الاكواد التاليه اختر الشكل الذي ترغب به واستخدمه في تطبيقك بدون ادنى مشاكل , الشكل الاول وهو قريب للشكل الموجود في تطبيق انستقرام الغني عن التعريف .

style1.dart

class MyMobileBody extends StatelessWidget {
  const MyMobileBody({Key? key}) : super(key: key);

  static final List<Color> colorsList = [
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.yellow,
    Colors.purple,
    Colors.orange,
    Colors.pink,
    Colors.brown,
    Colors.teal,
    Colors.cyan,
    Colors.indigo,
    Colors.lime,
    Colors.amber,
    Colors.deepOrange,
    Colors.deepPurple,
    Colors.lightBlue,
    Colors.lightGreen,
    Colors.grey,
    Colors.black,
    Colors.white,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: null,
      body: Container(
        margin: EdgeInsets.all(12),
        child:  GridView.custom(
            gridDelegate: SliverQuiltedGridDelegate(
              crossAxisCount: 4,
              crossAxisSpacing: 4,
              mainAxisSpacing: 4,
              repeatPattern: QuiltedGridRepeatPattern.inverted,
              pattern: [
                QuiltedGridTile(2, 2),
                QuiltedGridTile(1,1),
                QuiltedGridTile(1,1),
                QuiltedGridTile(1,2),
              ],
            ),
            childrenDelegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    color: colorsList[index],
                  ),
                  child: Center(
                    child: Text('Item $index'),
                  ),
                );
              },
              childCount: colorsList.length,
            ),
    ),
      ),
    );
  }
}

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

style2.dart

Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Container(
          margin: EdgeInsets.all(12),
          child: StaggeredGrid.count(
            crossAxisCount: 4,
            mainAxisSpacing: 4,
            crossAxisSpacing: 4,
            children: [
              StaggeredGridTile.count(
                crossAxisCellCount: 2,
                mainAxisCellCount: 2,
                child:
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    color: colorsList[1],
                  ),
                  child: Center(
                    child: Text('Item 1'),
                  ),
                ),
              ),
              StaggeredGridTile.count(
                crossAxisCellCount: 2,
                mainAxisCellCount: 1,
                child:
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    color: colorsList[0],
                  ),
                  child: Center(
                    child: Text('Item 2'),
                  ),
                ),
              ),
              StaggeredGridTile.count(
                crossAxisCellCount: 1,
                mainAxisCellCount: 1,
                child:
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    color: colorsList[3],
                  ),
                  child: Center(
                    child: Text('Item 3'),
                  ),
                ),
              ),
              StaggeredGridTile.count(
                crossAxisCellCount: 1,
                mainAxisCellCount: 1,
                child:
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    color: colorsList[4],
                  ),
                  child: Center(
                    child: Text('Item 4'),
                  ),
                ),
              ),
              StaggeredGridTile.count(
                crossAxisCellCount: 4,
                mainAxisCellCount: 2,
                child:
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    color: colorsList[10],
                  ),
                  child: Center(
                    child: Text('Item 10'),
                  ),
                ),
              ),
            ],

          ),
        ),
      ),
    )
    

هذا الشكل بسيط جدا وهو لعمل تصميم اكبر من الاخر وذلك عن طريق استخدام القسمه على 2 واذا كان الناتج صحيح سوف يتم عمل الحجم كبير واذا خطا سوف يتم تقليص الحجم قليلا .

style3.dart

MasonryGridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 27,
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      crossAxisSpacing: 23,
      itemCount: 20,
      itemBuilder: (context, index) {
        return ClipRRect(
          borderRadius: BorderRadius.circular(12),
          child: Image.asset(
            height: index % 2 == 0 ? 180 : 120,
            width: 100,
            fit: BoxFit.cover,
            index % 2 == 0
                ? 'assets/img/background/image-3.jpg'
                : 'assets/img/background/image-4.jpg',
          ),
        );
      },
    )
    

github