How to add vertical and horizontal line around Flutter grid view?

Question

I am new to flutter and currently I'm working on an Online game app. In main page I have implemented image slider and grid view that show category of Games.I want to add vertical and horizontal line around the grid view like image attached, I have tried to add Divider but result is not same what I want.

I want to do same this image

https://dribbble.com/shots/6913576-Papricon-Premium-Icons-from-Paperpillar/attachments

I really don't know how to draw line like that.

Here is some of my code which I tried to achieve this

_buildGameCategory() {
    List<Map<String, dynamic>> games = [
      {
        "title": AppMenu.sport,
        "page": "Sport",
        "icon": AppImages.icon_sport,
      },
      {
        "title": AppMenu.live_casino,
        "page": "LiveCasino",
        "icon": AppImages.icon_casino,
      },
      {
        "title": AppMenu.virtual_sport,
        "page": "VirtualSport",
        "icon": AppImages.icon_sport,
      },
      {
        "title": AppMenu.game,
        "page": "Games",
        "icon": AppImages.icon_casino,
      },
      {
        "title": AppMenu.game,
        "page": "Games",
        "icon": AppImages.icon_casino,
      },
      {
        "title": AppMenu.game,
        "page": "Games",
        "icon": AppImages.icon_casino,
      }
    ];
return GridView.count(
  shrinkWrap: true,
  crossAxisCount: 3,
  padding: EdgeInsets.all(Constant.sizeMedium),
  crossAxisSpacing: Constant.sizeSmall,
  mainAxisSpacing: Constant.sizeSmall,
  physics: BouncingScrollPhysics(),
  children: games.map((category) {
    return GestureDetector(
      child: Card(
          elevation: 0.0,
          color: AppColors.color2,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(
                child: Container(
                  width: 80.0,
                  height: 80.0,
                  child: Stack(
                    children: <Widget>[AppIcons.iconGame],
                  ),
                ),
              ),
              Expanded(
                child: Text(
                  category["title"],
                  style: TextStyle(
                      fontSize: FontSize.s18,
                      fontWeight: FontWeight.w400,
                      color: AppColors.color1),
                ),
              ),
              Divider(color: Colors.white, thickness: 1.0),
            ],
          )),
      onTap: () {
        print(category);
      },
    );
  }).toList(),
);

}

Answer 1

Try to put a gridView inside a container with a color of the diver you want, then add spacing to cross and main axis like this:

Scaffold(
      body: SafeArea(
        child: Container(
          child: Column(
            children: <Widget>[
              Expanded(
                child: Image.network(
                  "https://www.roadaffair.com/wp-content/uploads/2017/10/kabukicho-tokyo-japan-shutterstock_637989430-1024x683.jpg",
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  gradient: RadialGradient(colors: [
                    Colors.grey[800],
                    Colors.black,
                  ], radius: 0.85, focal: Alignment.center),
                ),
                child: GridView(
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisSpacing: 2,
                    mainAxisSpacing: 2,
                    crossAxisCount: 3,
                  ),
                  children: <Widget>[
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                    Container(color: Colors.black),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );

result: