Как добавить вертикальную и горизонтальную линию вокруг вида сетки Flutter?

Question

Я новичок, и сейчас работаю над приложением для онлайн-игр.На главной странице я реализовал слайдер изображений и вид сетки, которые показывают категорию игр. Я хочу добавить вертикальную и горизонтальную линию вокруг вида сетки, как изображение, я попытался добавить разделитель, но результат не совпадает с тем, что я хочу.

Я хочу сделать то же самое изображение

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

Я действительно не знаю, как рисовать такие линии.

Вот часть моего кода, который я пытался достичь этого

_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

Попробуйте поместить gridView внутри контейнера с цветом желаемого дайвера, затем добавьте интервал к кресту и главной оси следующим образом:

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),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );

результат:

Answer 2

Измените Card на Container и добавьте BoxDecoration, так как это даст вам границу

Например:

Container(
  child: yourWidget,
  boxdecoration: BoxDecoration(
    border: Border.all(
      width: 1,
    ),
  );
)

И удалите Divider