如何在 Dart Flutter gridView 上面添加文字？

Question

I made an application like this:

I want to add a little info text on top of this gridView structure. How can I do it? I'm a beginner and I just couldn't do it.

Codes:

body: Container(
    padding: EdgeInsets.all(7),
    child: GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,

      ),
      itemCount: subjects.length,
      itemBuilder: (BuildContext context, int index) {
        return Padding(
          
          padding: const EdgeInsets.all(2.0),
          child: Container(
            child: InkWell(
              
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(color: Colors.black),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  
                    children: [
                      Image.asset(subjects[index].subjectImage, fit: BoxFit.cover, height: 50, width: 50,),
                      SizedBox(height: 15,),
                      Text(subjects[index].subjectName, style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),),
                      
                    ],
                    
                  ),
                  
                ),
                onTap: () {},
            ),
          ),
        );
      },
    ),

How can I do it? Thanks in advance.

Answer 1

Try below code. I have added text like Text("1234567890")

body: Container(
  padding: EdgeInsets.all(7),
  child: Column(
    children: [
      Text("1234567890"), //<------------


      Expanded(
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          ),
          itemCount: subjects.length,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(2.0),
              child: Container(
                child: InkWell(
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(color: Colors.black),
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          subjects[index].subjectImage,
                          fit: BoxFit.cover,
                          height: 50,
                          width: 50,
                        ),
                        SizedBox(
                          height: 15,
                        ),
                        Text(
                          subjects[index].subjectName,
                          style: TextStyle(
                              fontSize: 20, fontWeight: FontWeight.w500),
                        ),
                      ],
                    ),
                  ),
                  onTap: () {},
                ),
              ),
            );
          },
        ),
      ),
    ],
  ),
);

Answer 2

You can use @DholaHardik's answer. Just need to wrap the Grid View Builder to a Sized Box and give it a height let's say height = MediaQuery.of(context).size.height and if the error says Overyflow by say 45 pixels.. You can change height to MediaQuery.of(context).size.height - 45;