Skip to content

Instantly share code, notes, and snippets.

@brendoncheung
Created June 25, 2021 14:37
Show Gist options
  • Save brendoncheung/fb167fec63082f6b8835648ff4c8b341 to your computer and use it in GitHub Desktop.
Save brendoncheung/fb167fec63082f6b8835648ff4c8b341 to your computer and use it in GitHub Desktop.
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),
),
],
),
)
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment