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

Viewed 1241

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

1 Answers

enter image description here

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