How to align the dots in a row and column in flutter?

Question

I want to arrange dots like shown in image And I don't have idea how to repeat this same in a Row and Column enter image description here

did you try to add one column and inside that add 5 rows. Inside rows add those images — Ishan Fernando, Jul 03 '19 at 04:24
this could be easily possible with grid view, but that point can't be at the center of screen. — Viren V Varasadiya, Jul 03 '19 at 04:46

CopsOnRoad · Accepted Answer · 2019-07-03T11:40:30.780

5

There are many ways of doing it like a Table, or Row and Column combined. But GridView is the easiest and recommended one.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Container(
      padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10),
      color: Colors.orange,
      child: GridView.builder(
        itemCount: 25,
        itemBuilder: (context, index) => Container(decoration: BoxDecoration(color: Colors.white70, shape: BoxShape.circle)),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 5,
          mainAxisSpacing: 40,
          crossAxisSpacing: 50,
        ),
      ),
    ),
  );
}

edited Jul 03 '19 at 11:40

answered Jul 03 '19 at 06:32

CopsOnRoad

237,138
77
654
440

This worked, I am thinking of making a function in which a player (2 player game)draws a line (horizontally or vertically only) by joining dots and whoever completes the fourth side of the square should play again. when all boxes colored , game ends. I am creating logic, when you get something suggest me. – Prianca Jul 03 '19 at 09:28
There are 2 ways of doing it, 1st (easier), try making a border between 2 dots like a tubelight, initially it's color would be light white, and one user taps on it, you can change its color. 2nd way (bit complicated) would be to use `CustomPainter` to allow user to draw line between two dots, and combine this approach with `DragTarget`. – CopsOnRoad Jul 03 '19 at 11:46
Actually I want to make simple dot and box game .. So, I am talking about that joinning when a player touches a dot and can draw a line when he reaches another dot . I hope I am able to make you undertand what I want. – Prianca Jul 03 '19 at 11:50
Yes, Prianca I completely got your point, what you need is `CustomPainter` here, see [this example](https://stackoverflow.com/questions/46241071/create-signature-area-for-mobile-app-in-dart-flutter) how you can draw lines, the approach you are talking about will require significant amount of time. – CopsOnRoad Jul 03 '19 at 11:55
Okay I will see to it and just suggest me what else should I read to do this i will do that too . – Prianca Jul 03 '19 at 12:03
No, you are good with that, however I'll see if I can get enough time, I'll make the solution for you. – CopsOnRoad Jul 03 '19 at 12:07

How to align the dots in a row and column in flutter?

1 Answers1