I'm working on a flutter project and I made a GridView with images and titles but I want the title to be outside the square, If I make padding they give this error BOTTOM OVERFLOWED BY 32 PIXELS. Any help is highly appreciated.

this is my code :

Card makeDashboardItem(String title, String img, int index) {
    return Card(
      elevation: 2,
      margin: const EdgeInsets.all(3),
      child: Container(
        child: InkWell(
          onTap: () {
            setState(() {
              isLoading = true;
            });
            _splitScreen2(index);
          },
          child: Column(
            children: <Widget>[
              const SizedBox(height: 10),
              Center(
                child: Image.asset(img,
                    alignment: Alignment.center),
                ),
              const SizedBox(height: 1),
              Center(
                child: Text(
                  title,
                  style: const TextStyle(
                      fontSize: 13,
                      color: Colors.black,
                      ),
                ),
              ),
            ],
          ),
      ),
      ),
    );
  }

CodePudding user response：

GridView children size depends on aspect ratio, which is 1 by default. In your case, image is not getting proper height.

For your case, You can use fit on Image.asset.

Image.asset(
  "",
  fit: BoxFit.cover, // or the .width or the one you prefer
),

Also you can try GridTile

GridTile(
  child: Image.asset(
    "",
    fit: BoxFit.cover,
  ),
  footer: Text("title"),
),

More about

Check DartPad

The Main problem was overflow so we wrap Expanded widget on Image widget.

Nb: Remove Expanded widget from Image widget You can see the difference

CardWidget

    class ItemWidget extends StatelessWidget {
  var data;

  ItemWidget(this.data, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: Card(
        child: Column(
          children: [
            Expanded(
              child: Container(
                height: 125,
                child: Image.network(
                  data["Image"],
                  alignment: Alignment.center,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Center(
                child: Text(
              data["Name"],
              style: TextStyle(fontSize: 12),
            ))
          ],
        ),
      ),
    );
  }
}

Fullcode

import 'package:flutter/material.dart';


  runApp(
    MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()),
  );
}



class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var list = [
      {
        "Name": "ElectroniQues",
        "Image":
            "https://ecommerce.ccc2020.fr/wp-content/uploads/2020/10/electronic-gadgets.jpeg"
      },
      {
        "Name": "Accessories",
        "Image":
            "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/classic-accessories-1516305397.jpg"
      },
      {
        "Name": "Hommes",
        "Image":
            "https://teja12.kuikr.com/is/a/c/880x425/gallery_images/original/cf5d08bff955e71.gif"
      },
      {
        "Name": "Femmes",
        "Image":
            "https://cdn.pixabay.com/photo/2013/07/13/14/08/apparel-162192_1280.png"
      },
      {
        "Name": "Enfants",
        "Image": "https://images.indianexpress.com/2019/09/toys.jpg"
      },
      {
        "Name": "Sunglasses",
        "Image": "https://m.media-amazon.com/images/I/51zEsraniRL._UX569_.jpg"
      },
      {
        "Name": "ElectroniQues",
        "Image":
            "https://ecommerce.ccc2020.fr/wp-content/uploads/2020/10/electronic-gadgets.jpeg"
      },
      {
        "Name": "Accessories",
        "Image":
            "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/classic-accessories-1516305397.jpg"
      },
      {
        "Name": "Hommes",
        "Image":
            "https://teja12.kuikr.com/is/a/c/880x425/gallery_images/original/cf5d08bff955e71.gif"
      },
      {
        "Name": "Femmes",
        "Image":
            "https://cdn.pixabay.com/photo/2013/07/13/14/08/apparel-162192_1280.png"
      },
      {
        "Name": "Enfants",
        "Image": "https://images.indianexpress.com/2019/09/toys.jpg"
      },
      {
        "Name": "Sunglasses",
        "Image": "https://m.media-amazon.com/images/I/51zEsraniRL._UX569_.jpg"
      },
    ];
    var column = Column(mainAxisAlignment: MainAxisAlignment.start, children: [
      ...list.map((e) {

        return GestureDetector(onTap:(){},child: ItemWidget(e));
      }).toList()
    ]);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Row(
          children: [
            SideWidget(),
            Expanded(
              child: Scaffold(
                bottomNavigationBar: buildBottomNavigationBar(),
                body: Padding(
                  padding: const EdgeInsets.only(top: 18.0),
                  child:
                      // column
                      GridView.count(
                    crossAxisCount: 3,
                    mainAxisSpacing: 2,
                    crossAxisSpacing: 2,
                    children: [
                      ...list.map((e) {

                        return InkWell(onTap:(){},child: ItemWidget(e));
                      }).toList()
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  BottomNavigationBar buildBottomNavigationBar() {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          label: 'Business',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          label: 'School',
        ),
      ],
      currentIndex: 0,
      selectedItemColor: Colors.amber[800],
      onTap: (v) {},
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        width: 63,
        color: Colors.white,
        child: ListView(
          children: [
            ...[
              Icons.headset,
              Icons.pets,
              Icons.watch,
              Icons.color_lens,
              Icons.today
            ]
                .map((e) => Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 16.0, horizontal: 4.0),
                      child: TextButton(
                        onPressed: () {},
                        child: Icon(
                          e,
                          color: Colors.blueGrey,
                          size: 40,
                        ),
                      ),
                    ))
                .toList()
          ],
        ),
      ),
    );
  }
}

class ItemWidget extends StatelessWidget {
  var data;

  ItemWidget(this.data, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: Card(
        child: Column(
          children: [
            Expanded(
              child: Container(
                height: 125,
                child: GridTile(
                  // footer:Text(data["Name"]) ,
                  child: Image.network(
                    data["Image"],
                    alignment: Alignment.center,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            Center(
                child: Text(
              data["Name"],
              style: TextStyle(fontSize: 12),
            ))
          ],
        ),
      ),
    );
  }
}