Question 77972 in Flutter Question posted in
The official Flutter documentation can be found here.

How to create this custom gridlayout in Flutter and Dart?

at the moment I am using GridView.builder to create a layout of venues which looks like this: standard gridview layout.

The only problem is, I want the layout to look like this instead (i.e. after every 4 cards arranged in a grid like normal there is to be one full width card. Then the pattern continues as normal). Each card will display the name of a different venue in the database desired grid layout.

Can anyone help me to build this from scratch? I have previously used a library called flutter_staggered_grid_view but the issue I had was that every card had the same name. As such I’d like to build my own (also will come in handy in the future!)

This is the code for using the standard GridView.builder:

if (snapshot.hasData) {
     List<Venue?> venuesData = snapshot.data!; // data coming from db
       return Padding(
          padding: EdgeInsets.only(bottom: 2.h),
            child: GridView.builder(
              gridDelegate:
                const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                ),
                  itemCount: venuesData.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Card(
                      color: Colors.amber,
                      child: Center(
                        child: Text(venuesData[index]!.name)),
                      );
                    }),
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For any struggling like I was, it seems there is no way to make your own custom layout like I wanted without using a package (which seems really dumb to me). HOWEVER, there is a package that does exactly what I needed, so massive kudos to flutter_staggered_grid_view as it has saved me from banging my head against the wall! Here is the final layout and the bottom of that layout and my code in case it helps anyone else:

    
        GridView.custom(
          shrinkWrap: true,
          physics: const ScrollPhysics(),
          padding: const EdgeInsets.all(4),
          gridDelegate: SliverQuiltedGridDelegate(
            crossAxisCount: 2,
            mainAxisSpacing: 4,
            crossAxisSpacing: 4,
            repeatPattern: QuiltedGridRepeatPattern.same,
              pattern: [
                const QuiltedGridTile(1, 1),
                const QuiltedGridTile(1, 1),
                const QuiltedGridTile(1, 1),
                const QuiltedGridTile(1, 1),
                const QuiltedGridTile(1, 2),
              ],
            ),
            childrenDelegate: SliverChildBuilderDelegate(
              (context, index) {
                return Container(
                  color: Colors.amber,
                    child: Text(venuesData[index]!.name));
               },
            childCount: venuesData.length,
           ),
          ),

  2. 0

    From your description, you want to build (from scratch) a custom scrolling layout that displays 4 smaller tiles 2×2, then 1 big tile, then repeat.

    A relatively easy approach is to use a ListView (instead of trying to use a GridView like you were doing) to display the items. You can treat a "2×2 grid" as a single item in the list. First, you need to calculate how many rows (itemCount) the ListView will have. For example, if you have 5 items, the ListView will have 2 rows: 1 row with 4 smaller tiles, and 1 row with 1 big tile. If you have 10 items, you will have 4 rows.

    Next, when creating the ListView, in the itemBuilder callback, you can do your own calculation and decide if you want to return a "2×2 item" or a single "large item".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search