GridView with Horizontal and Vertical center align dividers

Question

I am trying to draw separation lines like in the image below.

I was thinking of adding a 5 columns horizontally and making the separator columns smaller with a 1 dp line. However in Flutter all columns get equal width it seems or may be I am wrong.

How can I draw rows and column separators like the image below?

This is the code I am using

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
   @override
Widget build(BuildContext context) {
 
  Widget gridSection = Expanded(
    flex: 1,
    child: GridView.count(
      crossAxisCount: 3,
      childAspectRatio: 1.0,
      shrinkWrap:true,
      mainAxisSpacing: 2.0,      
      crossAxisSpacing: 2.0,
      padding: const EdgeInsets.all(4.0),
      children: <String>[
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
          ].map((String url) {
            return GridTile(
                child: Image.network(url, fit: BoxFit.cover));
          }).toList()),
  );
 
  Widget body = Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      gridSection,
    ],
  );
 
  return Scaffold(
    appBar: AppBar(
      title: Text("Example 2 Page"),
    ),
    body: Padding(
      padding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 0.0),
      child: body,
    ),
  );
}
}

Can you link some code ? It's pretty unclear what you currently possess. — Rémi Rousselet, Jul 05 '18 at 15:02
same as https://stackoverflow.com/questions/12109126/android-gridview-row-dividers-separators — user1546570, Jul 05 '18 at 15:13

score 1 · Answer 1 · answered Oct 22 '20 at 12:58

I would generate GridView children used List.generate and warp each child with a different border based on child's index.

Your GridView should look something like this:

  Widget getGridView() {
    return GridView.count(
      crossAxisCount: 3,
      shrinkWrap: true,
      children: List.generate(listOfPictures.length, (index) {
        return getWarppedPicture(
            listOfPictures[index], index, listOfPictures.length);
      }),
    );
  }

And getWarppedPicture function should look like this:

  Widget getWarppedPicture(element, int index, totalLegth) {
    int tempIndex = index + 1;

    // if bottomRigth
    if (tempIndex % 3 == 0 && tempIndex + 3 >= totalLegth) {
      return Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: Image.network(element.picPath).image,
          ),
        ),
      );
    }

    // if bottom
    if (tempIndex + 3 >= totalLegth) {
      return Row(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: Image.network(element.picPath).image,
              ),
            ),
          ),
          Center(
            child: Container(
              height: 50,
              width: 1,
            ),
          ),
        ],
      );
    }

    // if rigth
    if (index % 3 == 0) {
      Column(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: Image.network(element.picPath).image,
              ),
            ),
          ),
          Center(
            child: Container(
              height: 1,
              width: 50,
            ),
          ),
        ],
      );
    }
    
    // all the rest
    return Column(
      children: [
        Row(
          children: [
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: Image.network(element.picPath).image,
                ),
              ),
            ),
            Center(
              child: Container(
                height: 50,
                width: 1,
              ),
            ),
          ],
        ),
        Center(
          child: Container(
            height: 1,
            width: 50,
          ),
        ),
      ],
    );
  }

I have decided that the default warp will be border on bottom and right of the element.

The sketch describes each index and it's border condition:

Enjoy! ;)

score 0 · Answer 2 · answered Mar 13 '19 at 15:29

0

It's too late I know but I think you can achieve that (or achieved that) with Stack, and the lines can be static image and the Grid be above it

answered Mar 13 '19 at 15:29

Abdallah Gaber

65
1
11

GridView with Horizontal and Vertical center align dividers

2 Answers2