Merge branch 'feature/staggered_tile_fit'

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.2.0
+* Add a way to let the tile's content to define the tile's extent in the main axis.
+* Add `fit` constructor to `StaggeredTile`.
+
 ## 0.1.4
 * Add `countBuilder` and `extendBuilder` constructors to `SliverStaggeredGrid`
 

README.md

@@ -3,6 +3,7 @@
 A Flutter staggered grid view which supports multiple columns with rows of varying sizes.
 
 [![Pub](https://img.shields.io/pub/v/flutter_staggered_grid_view.svg)](https://pub.dartlang.org/packages/flutter_staggered_grid_view)
+[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QTT34M25RDNL6)
 
 ![Screenshot](https://raw.githubusercontent.com/letsar/flutter_staggered_grid_view/master/doc/images/example_01.PNG)
 
@@ -13,9 +14,10 @@ A Flutter staggered grid view which supports multiple columns with rows of varyi
 * Configurable main-axis and cross-axis margins between tiles.
 * SliverStaggeredGrid for using in a [CustomScrollView](https://docs.flutter.io/flutter/widgets/CustomScrollView-class.html).
 * Staggered and Spannable grid layouts.
-
 ![Screenshot](https://raw.githubusercontent.com/letsar/flutter_staggered_grid_view/master/doc/images/staggered_1.gif)
 ![Screenshot](https://raw.githubusercontent.com/letsar/flutter_staggered_grid_view/master/doc/images/spannable_1.gif)
+* Tiles can fit the content in the main axis.
+![Screenshot](https://raw.githubusercontent.com/letsar/flutter_staggered_grid_view/master/doc/images/dynamic_tile_sizes.gif)
 
 ## Getting started
 
@@ -24,7 +26,7 @@ In the `pubspec.yaml` of your flutter project, add the following dependency:
 ```yaml
 dependencies:
   ...
-  flutter_staggered_grid_view: "^0.1.4"
+  flutter_staggered_grid_view: "^0.2.0"
 ```
 
 In your library add the following import:
@@ -65,6 +67,15 @@ You can find more examples in the [Example](https://github.com/letsar/flutter_st
 The `StaggeredGridView` follow the same constructors convention than the [GridView](https://docs.flutter.io/flutter/widgets/GridView-class.html).  
 There are two more constructors: `countBuilder` and `extentBuilder`. These constructors allow you to define a builder for the layout and a builder for the children.
 
+## Tiles
+A StaggeredGridView needs to know how to display each tile, and what widget is associated with a tile. 
+
+A tile needs to have a fixed number of cell to occupy in the cross axis.
+For the extent in the main axis you have 3 options:
+* You want a fixed number of cells => use `StaggeredTile.count`.
+* You want a fixed extent => use `StaggeredTile.extent`.
+* You want a variable extent, defined by the content of the tile itself => use `StaggeredTile.fit`.
+
 ## Changelog
 
 Please see the [Changelog](https://github.com/letsar/flutter_staggered_grid_view/blob/master/CHANGELOG.md) page to know what's recently changed.
@@ -74,4 +85,4 @@ Please see the [Changelog](https://github.com/letsar/flutter_staggered_grid_view
 Feel free to contribute to this project.
 
 If you find a bug or want a feature, but don't know how to fix/implement it, please fill an [issue](https://github.com/letsar/flutter_staggered_grid_view/issues).  
-If you fixed a bug or implemented a new feature, please send a [pull request](https://github.com/letsar/flutter_staggered_grid_view/pulls).
+If you fixed a bug or implemented a new feature, please send a [pull request](https://github.com/letsar/flutter_staggered_grid_view/pulls).

example/android/.project

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>android</name>
+	<comment>Project android created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>

example/android/app/.project

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>app</name>
+	<comment>Project app created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>

example/android/app/bin/.project

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>app</name>
+	<comment>Project app created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>

example/android/app/bin/build.gradle

@@ -0,0 +1,51 @@
+def localProperties = new Properties()
+def localPropertiesFile = rootProject.file('local.properties')
+if (localPropertiesFile.exists()) {
+    localPropertiesFile.withReader('UTF-8') { reader ->
+        localProperties.load(reader)
+    }
+}
+
+def flutterRoot = localProperties.getProperty('flutter.sdk')
+if (flutterRoot == null) {
+    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
+}
+
+apply plugin: 'com.android.application'
+apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
+
+android {
+    compileSdkVersion 27
+
+    lintOptions {
+        disable 'InvalidPackage'
+    }
+
+    defaultConfig {
+        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
+        applicationId "com.letsar.example"
+        minSdkVersion 16
+        targetSdkVersion 27
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
+    }
+
+    buildTypes {
+        release {
+            // TODO: Add your own signing config for the release build.
+            // Signing with the debug keys for now, so `flutter run --release` works.
+            signingConfig signingConfigs.debug
+        }
+    }
+}
+
+flutter {
+    source '../..'
+}
+
+dependencies {
+    testImplementation 'junit:junit:4.12'
+    androidTestImplementation 'com.android.support.test:runner:1.0.1'
+    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
+}

example/android/app/bin/src/main/AndroidManifest.xml

@@ -0,0 +1,39 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.letsar.example">
+
+    <!-- The INTERNET permission is required for development. Specifically,
+         flutter needs it to communicate with the running application
+         to allow setting breakpoints, to provide hot reload, etc.
+    -->
+    <uses-permission android:name="android.permission.INTERNET"/>
+
+    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
+         calls FlutterMain.startInitialization(this); in its onCreate method.
+         In most cases you can leave this as-is, but you if you want to provide
+         additional functionality it is fine to subclass or reimplement
+         FlutterApplication and put your custom class here. -->
+    <application
+        android:name="io.flutter.app.FlutterApplication"
+        android:label="example"
+        android:icon="@mipmap/ic_launcher">
+        <activity
+            android:name=".MainActivity"
+            android:launchMode="singleTop"
+            android:theme="@style/LaunchTheme"
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale"
+            android:hardwareAccelerated="true"
+            android:windowSoftInputMode="adjustResize">
+            <!-- This keeps the window background of the activity showing
+                 until Flutter renders its first frame. It can be removed if
+                 there is no splash screen (such as the default splash screen
+                 defined in @style/LaunchTheme). -->
+            <meta-data
+                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
+                android:value="true" />
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN"/>
+                <category android:name="android.intent.category.LAUNCHER"/>
+            </intent-filter>
+        </activity>
+    </application>
+</manifest>

example/android/app/bin/src/main/res/drawable/launch_background.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Modify this file to customize your launch splash screen -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@android:color/white" />
+
+    <!-- You can insert your own image assets here -->
+    <!-- <item>
+        <bitmap
+            android:gravity="center"
+            android:src="@mipmap/launch_image" />
+    </item> -->
+</layer-list>

example/android/app/bin/src/main/res/values/styles.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
+        <!-- Show a splash screen on the activity. Automatically removed when
+             Flutter draws its first frame -->
+        <item name="android:windowBackground">@drawable/launch_background</item>
+    </style>
+</resources>

example/lib/example_1.dart

@@ -32,7 +32,7 @@ class Example01 extends StatelessWidget {
   Widget build(BuildContext context) {
     return new Scaffold(
         appBar: new AppBar(
-          title: new Text('Example 01'),
+          title: new Text('example 01'),
         ),
         body: new Padding(
             padding: const EdgeInsets.only(top: 12.0),

example/lib/example_2.dart

@@ -6,7 +6,7 @@ class Example02 extends StatelessWidget {
   Widget build(BuildContext context) {
     return new Scaffold(
       appBar: new AppBar(
-        title: new Text('Example 02'),
+        title: new Text('example 02'),
       ),
       body: new Padding(
         padding: const EdgeInsets.all(4.0),

example/lib/example_3.dart

@@ -6,7 +6,7 @@ class Example03 extends StatelessWidget {
   Widget build(BuildContext context) {
     return new Scaffold(
       appBar: new AppBar(
-        title: new Text('StaggeredGridView.count'),
+        title: new Text('staggeredGridView.count'),
       ),
       body: new StaggeredGridView.count(
         primary: false,

example/lib/example_4.dart

@@ -6,7 +6,7 @@ class Example04 extends StatelessWidget {
   Widget build(BuildContext context) {
     return new Scaffold(
         appBar: new AppBar(
-          title: new Text('CustomScrollView'),
+          title: new Text('customScrollView'),
         ),
         body: new CustomScrollView(
           primary: false,

example/lib/example_5.dart

@@ -32,7 +32,7 @@ class Example05 extends StatelessWidget {
   Widget build(BuildContext context) {
     return new Scaffold(
         appBar: new AppBar(
-          title: new Text('Random tiles'),
+          title: new Text('random tiles'),
         ),
         body: new StaggeredGridView.countBuilder(
           primary: false,

example/lib/example_6.dart

@@ -38,7 +38,7 @@ class _Example06State extends State<Example06> {
   Widget build(BuildContext context) {
     return new Scaffold(
       appBar: new AppBar(
-        title: new Text('Dynamic resizing'),
+        title: new Text('dynamic resizing'),
       ),
       body: new Padding(
         padding: const EdgeInsets.all(4.0),

example/lib/example_7.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
+
+class Example07 extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return new Scaffold(
+      appBar: new AppBar(
+        title: new Text('dynamic tile sizes'),
+      ),
+      body: new StaggeredGridView.count(
+        primary: false,
+        crossAxisCount: 4,
+        mainAxisSpacing: 0.0,
+        crossAxisSpacing: 0.0,
+        children: <Widget>[
+          new _Tile('https://cdn.pixabay.com/photo/2013/04/07/21/30/croissant-101636_960_720.jpg',1),
+          new _Tile('https://cdn.pixabay.com/photo/2016/01/22/16/42/eiffel-tower-1156146_960_720.jpg',2),
+          new _Tile('https://cdn.pixabay.com/photo/2016/10/22/20/34/two-types-of-wine-1761613_960_720.jpg',3),
+          new _Tile('https://cdn.pixabay.com/photo/2016/10/21/14/50/plouzane-1758197_960_720.jpg',4),
+          new _Tile('https://cdn.pixabay.com/photo/2016/11/16/10/59/mountains-1828596_960_720.jpg',5),
+          new _Tile('https://cdn.pixabay.com/photo/2013/04/13/18/42/the-eiffel-tower-103417_960_720.jpg',6),
+          new _Tile('https://cdn.pixabay.com/photo/2017/08/24/22/37/gyrfalcon-2678684_960_720.jpg',7),
+          new _Tile('https://cdn.pixabay.com/photo/2013/01/17/08/25/sunset-75159_960_720.jpg',8),
+        ],
+        staggeredTiles: const <StaggeredTile>[
+          const StaggeredTile.fit(2),
+          const StaggeredTile.fit(2),
+          const StaggeredTile.fit(1),
+          const StaggeredTile.fit(3),
+          const StaggeredTile.fit(3),
+          const StaggeredTile.fit(1),
+          const StaggeredTile.fit(2),
+          const StaggeredTile.fit(2),
+        ],
+      ),
+    );
+  }
+}
+
+class _Tile extends StatelessWidget {
+  const _Tile(this.source, this.index);
+
+  final String source;
+  final int index;
+
+  @override
+  Widget build(BuildContext context) {
+    return new Card(
+      child: new Column(
+        children: <Widget>[
+          new Image.network(source),
+          new Padding(
+            padding: const EdgeInsets.all(4.0),
+            child: new Column(
+              children: <Widget>[
+                new Text('Image number $index',style: const TextStyle(fontWeight: FontWeight.bold),),
+                new Text('Vincent Van Gogh',style: const TextStyle(color: Colors.grey),),
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
+