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

flutter dart alignment flutter-layout

973

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

973

Author by

Prianca

I am a learner ..

Updated on December 12, 2022

Comments

Prianca over 1 year

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
Prianca almost 5 years

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.
CopsOnRoad almost 5 years

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.
Prianca almost 5 years

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.
CopsOnRoad almost 5 years

Yes, Prianca I completely got your point, what you need is CustomPainter here, see this example how you can draw lines, the approach you are talking about will require significant amount of time.
Prianca almost 5 years

Okay I will see to it and just suggest me what else should I read to do this i will do that too .
CopsOnRoad almost 5 years

No, you are good with that, however I'll see if I can get enough time, I'll make the solution for you.