staggered grid view in Flutter

In this article, let's see how to create a Staggered grid view in flutter.

This is how Staggered Grid View looks like.

First import the package.


  flutter_staggered_grid_view: ^0.4.0

And then use the following code to create the example.



import 'package:flutter/material.dart';

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @
override

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('StaggeredGridView Example'),
        ),
        body: new StaggeredGridView.countBuilder(
          crossAxisCount: 4,
          itemCount: 16,
          itemBuilder: (BuildContext context, int index) => new Container(
              color: Colors.green,
              child: new Center(
                child: new CircleAvatar(
                  backgroundColor: Colors.white,
                  child: new Text('
$
index
'),
                ),
              )),
          staggeredTileBuilder: (int index) =>
              new StaggeredTile.count(2, index.isEven ? 1 : 2),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        ),
      ),
    );
  }
}

If you want to play more, make modifications to the following line.



staggeredTileBuilder: (int index) =>
              new StaggeredTile.count(2, index.isEven ? 1 : 2),

Thanks,

Srikanth

0 Comments

Recent Comments