Build Dynamic Grid view UI for Virtual meeting in Flutter

Question

I have to develop a dynamic tile layout in a grid view of the tiles. Depending on the number of items, the tiles should dynamically fill the entire screen.Google Meet is the point of reference. The number of rows and columns is dynamic. Assistance is appreciated.

Answer 1

you can use the code below as a reference.

class DynamicGrid extends StatelessWidget {
// Example number of items
final int numberOfItems = 10;

const DynamicGrid({super.key}); 

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text('Dynamic Grid Layout'),
  ),
  body: LayoutBuilder(
    builder: (context, constraints) {
      // Get the screen width and height
      double screenWidth = constraints.maxWidth;
      double screenHeight = constraints.maxHeight;

      // Calculate number of columns and rows
      int columns = (sqrt(numberOfItems)).ceil();
      int rows = (numberOfItems / columns).ceil();

      // Calculate tile size
      double tileWidth = screenWidth / columns;
      double tileHeight = screenHeight / rows;

      return GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: columns,
          childAspectRatio: tileWidth / tileHeight,
        ),
        itemCount: numberOfItems,
        itemBuilder: (context, index) {
          return Container(
            color: Colors.blueAccent,
            margin: const EdgeInsets.all(4.0),
            child: Center(
              child: Text(
                'Tile ${index + 1}',
                style: const TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          );
        },
      );
    },
  ),
);
}
}

Screenshots