如何在 Flutter 中使用 ViewPager 创建 GridView

Question

I am trying to create the grid view inside the page view, what I want is, In grid view, I want to display only 6 items and other items I want go to another page of the page view, what I mean is I only want 6 items on each page of the page view,

To clarify more, if I have 6 items, the page view will create only one page in which 6 items will appear from the gridview, or if I have 12 items, the page view will create two pages and each page will display 6 items from the gridview, or if I have 16 items, the page view will create three Pages per page 6 items, etc.,

This is the code that I tried to do, but it did not work. Can someone help me with it? Thank you

 Expanded(
            child: Container(
              decoration: const BoxDecoration(
                color: Color(0xFFE6E6E6),
                image: DecorationImage(
                  image: AssetImage('assets/images/background_image.png'),
                  fit: BoxFit.fill,
                ),
              ),
              child: PageView.builder(
                controller: _controller,
                physics: const BouncingScrollPhysics(),
                itemCount: items.length % 6,
                itemBuilder: (context, index) => GridView.builder(
                  padding:
                      EdgeInsets.symmetric(horizontal: 20.w, vertical: 20.h),
                  physics: const ClampingScrollPhysics(),
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    crossAxisSpacing: 20.w,
                    mainAxisSpacing: 20.h,
                    childAspectRatio: 4 / 1.5,
                  ),
                  itemCount: items.length,
                  primary: false,
                  itemBuilder: (context, index) => Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(15.r),
                    ),
                    child: Row(
                      children: [
                        Container(
                          width: 140.w,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15.r),
                            image: DecorationImage(
                              image: NetworkImage(
                                items[index].photoUrl,
                              ),
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                        Expanded(
                          child: Padding(
                            padding: EdgeInsets.symmetric(
                              horizontal: 16.w,
                              vertical: 18.h,
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  items[index].categoryName,
                                  style: TextStyle(
                                    fontSize: 10.sp,
                                    color: const Color(0xFFBCBCBC),
                                  ),
                                ),
                                Text(
                                  items[index].itemName,
                                  style: TextStyle(
                                    fontSize: 12.sp,
                                    color: const Color(0xFFFC4747),
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                const Spacer(),
                                Text(
                                  '${items[index].price}د.ع',
                                  style: TextStyle(
                                    color: const Color(0xFF40484E),
                                    fontSize: 12.sp,
                                  ),
                                ),
                                Row(
                                  children: [
                                    Icon(
                                      CupertinoIcons.time,
                                      size: 8.sp,
                                      color: const Color(0xFFBCBCBC),
                                    ),
                                    Text(
                                      '${items[index].time}m',
                                      style: TextStyle(
                                        fontSize: 8.sp,
                                        color: const Color(0xFFBCBCBC),
                                      ),
                                    ),
                                  ],
                                )
                              ],
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),

A picture showing the shape of the elements

Answer 1

I modified your code the way you wanted Here is the solution : My modified code will divide your main list into to small lists with 6 items. Here I take main list length is 16 so it's divide into 6 : 6 : 4 items lists.

Output :

Code :

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<int> items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
  var gridViewLists = [];
  int listBreakerSize = 6;
  @override
  void initState() {
    for (var i = 0; i < items.length; i += listBreakerSize) {
      gridViewLists.add(items.sublist(
          i, i + listBreakerSize > items.length ? items.length : i + listBreakerSize));
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: Container(
            margin: EdgeInsets.only(top: 40),
            decoration: const BoxDecoration(
              color: Color(0xFFE6E6E6),
            ),
            child: PageView.builder(
              // controller: _controller,
              physics: const BouncingScrollPhysics(),
              itemCount: (items.length / 6).ceil(),
              itemBuilder: (context, i) => GridView.builder(
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
                physics: const ClampingScrollPhysics(),
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 20,
                  mainAxisSpacing: 20,
                  childAspectRatio: 4 / 1.5,
                ),
                itemCount: gridViewLists[i].length,
                primary: false,
                itemBuilder: (context, index) => Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Row(
                    children: [
                      Container(
                        width: 116,
                        decoration: BoxDecoration(
                          color: Colors.green,
                          borderRadius: BorderRadius.circular(15),
                        ),
                      ),
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 18,
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                //items[index].categoryName,
                                'categoryName',
                                style: TextStyle(
                                  fontSize: 10,
                                  color: const Color(0xFFBCBCBC),
                                ),
                              ),
                              Text(
                                //items[index].itemName,
                                'itemName',
                                style: TextStyle(
                                  fontSize: 12,
                                  color: const Color(0xFFFC4747),
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              const Spacer(),
                              Text(
                                // '${items[index].price}د.ع',
                                'price',
                                style: TextStyle(
                                  color: const Color(0xFF40484E),
                                  fontSize: 12,
                                ),
                              ),
                              Row(
                                children: [
                                  Icon(
                                    CupertinoIcons.time,
                                    size: 8,
                                    color: const Color(0xFFBCBCBC),
                                  ),
                                  Text(
                                    //'${items[index].time}m',
                                    'time',
                                    style: TextStyle(
                                      fontSize: 8,
                                      color: const Color(0xFFBCBCBC),
                                    ),
                                  ),
                                ],
                              )
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}