first commit

moehu/moehu_fontend/lib/widget/WaterfallFlow/.pydio

@@ -0,0 +1 @@
+508f6717-b2ff-4096-b80e-91c006bbd44d

moehu/moehu_fontend/lib/widget/WaterfallFlow/StaggeredGridViewPage.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
+import 'TileWidget.dart';
+
+class StaggeredGridViewPage extends StatelessWidget {
+  const StaggeredGridViewPage.count({
+    @required this.title,
+    @required this.crossAxisCount,
+    @required this.tiles,
+    this.mainAxisSpacing: 4.0,
+    this.crossAxisSpacing: 4.0,
+  })  : _staggeredGridViewMode = _StaggeredGridViewMode.count,
+        maxCrossAxisExtent = null;
+
+  const StaggeredGridViewPage.extent({
+    @required this.title,
+    @required this.maxCrossAxisExtent,
+    @required this.tiles,
+    this.mainAxisSpacing: 4.0,
+    this.crossAxisSpacing: 4.0,
+  })  : _staggeredGridViewMode = _StaggeredGridViewMode.extent,
+        crossAxisCount = null;
+
+  static const EdgeInsetsGeometry padding =
+      const EdgeInsets.symmetric(horizontal: 4.0);
+
+  final String title;
+  final List<StaggeredTile> tiles;
+  final int crossAxisCount;
+  final double mainAxisSpacing;
+  final double crossAxisSpacing;
+  final double maxCrossAxisExtent;
+  final _StaggeredGridViewMode _staggeredGridViewMode;
+
+  @override
+  Widget build(BuildContext context) {
+    return new Scaffold(
+        body: new Padding(
+            padding: const EdgeInsets.only(top: 4.0),
+            child: _buildStaggeredGridView(context)));
+  }
+
+  Widget _buildStaggeredGridView(BuildContext context) {
+    switch (_staggeredGridViewMode) {
+      case _StaggeredGridViewMode.count:
+        return new StaggeredGridView.countBuilder(
+          crossAxisCount: crossAxisCount,
+          itemCount: tiles.length,
+          itemBuilder: _getChild,
+          mainAxisSpacing: mainAxisSpacing,
+          crossAxisSpacing: crossAxisSpacing,
+          padding: padding,
+          staggeredTileBuilder: _getStaggeredTile,
+        );
+      default:
+        return new StaggeredGridView.extentBuilder(
+          maxCrossAxisExtent: maxCrossAxisExtent,
+          itemCount: tiles.length,
+          itemBuilder: _getChild,
+          mainAxisSpacing: mainAxisSpacing,
+          crossAxisSpacing: crossAxisSpacing,
+          padding: padding,
+          staggeredTileBuilder: _getStaggeredTile,
+        );
+    }
+  }
+
+  StaggeredTile _getStaggeredTile(int i) {
+    return i >= tiles.length ? null : tiles[i];
+  }
+
+  TileWidget _getChild(BuildContext context, int index) {
+    return new TileWidget(
+        key: new ObjectKey(index), index: index, backgroundColor: Colors.green);
+  }
+}
+
+enum _StaggeredGridViewMode { count, extent }

moehu/moehu_fontend/lib/widget/WaterfallFlow/TileWidget.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+class TileWidget extends StatelessWidget {
+  const TileWidget(
+      {Key key, @required this.index, this.backgroundColor: Colors.green})
+      : super(key: key);
+
+  final int index;
+  final Color backgroundColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return new Container(
+      color: this.backgroundColor,
+      child: new Center(
+          child: new CircleAvatar(
+        backgroundColor: Colors.white,
+        child: new Text('$index+1'),
+      )),
+    );
+  }
+}

moehu/moehu_fontend/lib/widget/WaterfallFlow/WaterfallFlow.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
+
+import 'StaggeredGridViewPage.dart';
+
+const List<StaggeredTile> _tiles = const <StaggeredTile>[
+  const StaggeredTile.count(2, 2),
+  const StaggeredTile.count(1, 1),
+  const StaggeredTile.count(1, 2),
+  const StaggeredTile.count(1, 1),
+  const StaggeredTile.count(4, 1),
+  const StaggeredTile.count(4, 2),
+  const StaggeredTile.count(1, 1),
+  const StaggeredTile.count(1, 1),
+  const StaggeredTile.count(1, 1),
+  const StaggeredTile.count(1, 1),
+  const StaggeredTile.count(1, 4),
+  const StaggeredTile.count(1, 3),
+  const StaggeredTile.count(1, 2),
+  const StaggeredTile.count(1, 1),
+  const StaggeredTile.count(1, 1),
+  const StaggeredTile.count(1, 1),
+  const StaggeredTile.count(1, 1),
+  const StaggeredTile.count(1, 1),
+  const StaggeredTile.count(1, 1),
+  const StaggeredTile.count(1, 1),
+];
+
+class SpannableCountCountPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return const StaggeredGridViewPage.count(
+        title: 'Spannable (Count, Count)', crossAxisCount: 2, tiles: _tiles);
+  }
+}