view.dart

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

void main() {
  runApp(MyApp());
  debugPaintSizeEnabled = false;
}

class MyApp extends StatelessWidget {
  List<Widget> tiles = [
    Tile('https://source.unsplash.com/random/1', 1),
    Tile('https://source.unsplash.com/random/2', 2),
    Tile('https://source.unsplash.com/random/3', 3),
    Tile('https://source.unsplash.com/random/4', 4),
    Tile('https://source.unsplash.com/random/5', 5),
    Tile('https://source.unsplash.com/random/6', 6),
    Tile('https://source.unsplash.com/random/7', 7),
    Tile('https://source.unsplash.com/random/8', 8),
    Tile('https://source.unsplash.com/random/9', 9),
    Tile('https://source.unsplash.com/random/10', 10),
    Tile('https://source.unsplash.com/random/11', 11),
    Tile('https://source.unsplash.com/random/12', 12),
    Tile('https://source.unsplash.com/random/13', 13),
    Tile('https://source.unsplash.com/random/14', 14),
    Tile('https://source.unsplash.com/random/15', 15),
    Tile('https://source.unsplash.com/random/16', 16),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: StaggeredGridView.count(
          crossAxisCount: 2,
          primary: false,
          staggeredTiles: List.generate(
            tiles.length,
            (index) => StaggeredTile.fit(1),
          ),
          children: tiles,
        ),
      ),
    );
  }
}

class Tile extends StatelessWidget {
  const Tile(this.source, this.index);

  final String source;
  final int index;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          Image.network(source),
          Padding(
            padding: const EdgeInsets.all(4),
            child: Column(
              children: <Widget>[
                Text(
                  'Image number $index',
                  style: const TextStyle(fontWeight: FontWeight.bold),
                ),
                const Text(
                  'Vincent Van Gogh',
                  style: TextStyle(color: Colors.grey),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}