CODEWITHSUNDEEP
flutter
Jacob Mutale
Jacob Mutale

Reputation: 57

How can achieve such a grid in flutter?

hello I have this grid I'm trying to replicate for practice:

enter image description here

I am using

 return Scaffold(
        body: GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, mainAxisSpacing: 3, ),
      itemBuilder: (BuildContext context, int index) {
        return Center(
          child: Card(
            child: InkWell(
              splashColor: Colors.black,
            ),
          ),
        );
      },
      itemCount: 8,
    ));

and this is what I get:

enter image description here

Upvotes: 0

Views: 67

Answers (1)

Thierry
Thierry

Reputation: 8393

This seems to be precisely the main example of the Flutter Staggered Grid View package.

enter image description here

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'StaggeredGridView Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StaggeredGridView.countBuilder(
        crossAxisCount: 4,
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) => new Container(
            color: Colors.green,
            child: Center(
              child: CircleAvatar(
                backgroundColor: Colors.white,
                child: Text('$index'),
              ),
            )),
        staggeredTileBuilder: (int index) =>
            StaggeredTile.count(2, index.isEven ? 2 : 1),
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
      ),
    );
  }
}

Upvotes: 2

Related Questions