CODEWITHSUNDEEP
user-interfacefluttergridviewdart
Simran Aswani
Simran Aswani

Reputation: 1316

How do I convert a listView to a GridView flutter?

I have a scrollable list view in a horizontal format that I want to covert into a grid view with the same elements. 

Container(
  height: MediaQuery.of(context).size.height / 4,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: homeList.length,
    itemBuilder: (ctx, i) {
      return GestureDetector(
        onTap: () {
          if (i == 0) {            
            _interstitialAd.show();
          } else if (i == 1) {

          } else if (i == 2) {
            sendInvite();
          }
        },
      );
    },
  ),
)

This is what the list view looks like:enter image description here

And this is what I want it to look like: enter image description here

Upvotes: 1

Views: 4391

Answers (1)

jamesblasco
jamesblasco

Reputation: 1882

Flutter has the equivalent to ListView.builder for GridView. You only need to tell it the number of columns/rows(depending in the orientation) you want.

GridView.builder(
          itemCount: homeList.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:2),
          itemBuilder: (BuildContext context, int index) {
             return GestureDetector(
                 onTap: () {
                  if (i == 0) {
                       _interstitialAd.show();
                  } else if (i == 1) {

                  } else if (i == 2) {
                      sendInvite();
                  });
          },
    )

Upvotes: 9

Related Questions