How to add Header to GridView in flutter?

Question

Hi i want to create a GridView.builder with crossAxisCount: 2 and scrollDirection: Axis.horizontal and each set of GridView needed an header please check the image

Need to build something link this but

Solution

You can build using gridView.builder and Row widget in following way.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      body: Container(
          child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("Top"),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: GridView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: 10,
                    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2),
                    itemBuilder: (BuildContext context, int index) {
                      return Text(index.toString());
                    },
                  ),
                )
              ],
            ),
          ),
          Text("Trending"),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: GridView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: 10,
                    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2),
                    itemBuilder: (BuildContext context, int index) {
                      return Text(index.toString());
                    },
                  ),
                )
              ],
            ),
          ),
        ],
      )),
    );
  }

Comments

[J. S.]

Share your code and what you've attempted to do. stackoverflow.com/help/how-to-ask

[Viren V Varasadiya]

what do you mean by each set of gridview?

[Thobio]

@VirenVVarasadiya can you pls check the link.

[Thobio]

@JoãoSoares im trying to create something just looks like image in the url. can you help me

[J. S.]

@Thobio If you want help, you can start by checking the link I sent you and following the question guidelines.

[Thobio]

Thank you, the widget that are in the column ("Top","Trending") will be dynamic widget may increasing or decrease depend on dynamic data eg : ("Top","Trending","Top Search" ....) please help ....

[Viren V Varasadiya]

I don't know any more context, so i can't help you that way. You can dynamically change value using variable.