Add example

letsar · Mar 15, 2018 · 30c7959 · 30c7959
1 parent a55f710
commit 30c7959
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 144 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,2 @@
-## [0.0.1] - TODO: Add release date.
-
-* TODO: Describe initial release.
+## 0.1.0
+* Initial Open Source release
diff --git a/README.md b/README.md
@@ -1,2 +1,45 @@
 # flutter_parallax
-A Flutter widget that moves at a different velocity than the main scrolling content
+
+A Flutter widget that moves according to a scroll controller.
+
+[![Pub](https://img.shields.io/pub/v/flutter_parallax.svg)](https://pub.dartlang.org/packages/flutter_parallax)
+
+## Features
+
+* Can contain **any** widget.
+* Configurable parallax scroll direction.
+* Customizable parallax delegate.
+* For widgets inside **and** outside a scroll view (list items and list backgrounds for example). 
+
+## Getting started
+
+In the `pubspec.yaml` of your flutter project, add the following dependency:
+
+```yaml
+dependencies:
+  ...
+  flutter_parallax: "^0.1.0"
+```
+
+In your library add the following import:
+
+```dart
+import 'package:flutter_parallax/flutter_parallax.dart';
+```
+
+For help getting started with Flutter, view the online [documentation](https://flutter.io/).
+
+## Example
+
+## Constructors
+
+## Changelog
+
+Please see the [Changelog](https://github.com/letsar/flutter_parallax/blob/master/CHANGELOG.md) page to know what's recently changed.
+
+## Contributions
+
+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_parallax/issues).  
+If you fixed a bug or implemented a new feature, please send a [pull request](https://github.com/letsar/flutter_parallax/pulls).
diff --git a/doc/images/parallax.gif b/doc/images/parallax.gif
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -11,7 +11,7 @@ class MyApp extends StatelessWidget {
       theme: new ThemeData(
         primarySwatch: Colors.blue,
       ),
-      home: new MyHomePage(title: 'Flutter Demo Home Page'),
+      home: new MyHomePage(title: 'Parallax demo'),
     );
   }
 }
@@ -31,143 +31,106 @@ class _MyHomePageState extends State<MyHomePage> {
   @override
   void initState() {
     super.initState();
-
     _scrollController = new ScrollController();
   }
 
   @override
   Widget build(BuildContext context) {
-    final ListView listView = new ListView.builder(
-      controller: _scrollController,
-      itemBuilder: buildItem,
-      itemCount: 12,
-    );
-
     return new Scaffold(
+      appBar: new AppBar(title: new Text(widget.title)),
       body: new Stack(
         children: <Widget>[
           new Parallax.outside(
             controller: _scrollController,
-            direction: AxisDirection.right,
-            child: new Image.network('http://t.wallpaperweb.org/wallpaper/nature/3840x1024/9XMedia1280TripleHorizontalMountainsclouds.jpg'),
-//            child: new Column(
-//              children: <Widget>[
-//                new Container(
-//                  color: Colors.red,
-//                  height: 200.0,
-//                ),
-//                new Container(
-//                  color: Colors.pink,
-//                  height: 200.0,
-//                ),
-//                new Container(
-//                  color: Colors.lightGreen,
-//                  height: 200.0,
-//                ),
-//                new Container(
-//                  color: Colors.orange,
-//                  height: 200.0,
-//                ),
-//                new Container(
-//                  color: Colors.teal,
-//                  height: 200.0,
-//                ),
-//                new Container(
-//                  color: Colors.purple,
-//                  height: 200.0,
-//                ),
-//                new Container(
-//                  color: Colors.grey,
-//                  height: 200.0,
-//                ),
-//                new Container(
-//                  color: Colors.lime,
-//                  height: 200.0,
-//                ),
-//                new Container(
-//                  color: Colors.indigo,
-//                  height: 200.0,
-//                ),
-//                new Container(
-//                  color: Colors.yellow,
-//                  height: 200.0,
-//                ),
-//                new Container(
-//                  color: Colors.green,
-//                  height: 200.0,
-//                ),
-//                new Container(
-//                  color: Colors.blue,
-//                  height: 200.0,
-//                ),
-//              ],
-//            ),
+            child: new Column(
+              children: <Widget>[
+                new Container(
+                  color: Colors.red,
+                  height: 200.0,
+                ),
+                new Container(
+                  color: Colors.pink,
+                  height: 200.0,
+                ),
+                new Container(
+                  color: Colors.lightGreen,
+                  height: 200.0,
+                ),
+                new Container(
+                  color: Colors.orange,
+                  height: 200.0,
+                ),
+                new Container(
+                  color: Colors.teal,
+                  height: 200.0,
+                ),
+                new Container(
+                  color: Colors.purple,
+                  height: 200.0,
+                ),
+                new Container(
+                  color: Colors.grey,
+                  height: 200.0,
+                ),
+                new Container(
+                  color: Colors.lime,
+                  height: 200.0,
+                ),
+                new Container(
+                  color: Colors.indigo,
+                  height: 200.0,
+                ),
+                new Container(
+                  color: Colors.yellow,
+                  height: 200.0,
+                ),
+                new Container(
+                  color: Colors.green,
+                  height: 200.0,
+                ),
+                new Container(
+                  color: Colors.blue,
+                  height: 200.0,
+                ),
+              ],
+            ),
+          ),
+          new ListView.builder(
+            controller: _scrollController,
+            itemBuilder: buildItem,
+            itemCount: 20,
           ),
-          listView,
         ],
       ),
     );
   }
 
   Widget buildItem(BuildContext context, int index) {
-    if (index != 20) {
-      if (index == 5) {
+    var mode = index % 4;
+    switch (mode) {
+      case 0:
         return new Parallax.inside(
-          child: new Image.network('http://t.wallpaperweb.org/wallpaper/nature/3840x1024/9XMedia1280TripleHorizontalMountainsclouds.jpg'),
+          child: new Image.network('https://flutter.io/images/homepage/header-illustration.png'),
           mainAxisExtent: 150.0,
-          direction: AxisDirection.right,
         );
-      } else if (index == 6) {
+      case 1:
         return new Parallax.inside(
           child: new Image.network('http://t.wallpaperweb.org/wallpaper/nature/3840x1024/9XMedia1280TripleHorizontalMountainsclouds.jpg'),
           mainAxisExtent: 150.0,
-          direction: AxisDirection.left,
+          direction: AxisDirection.right,
         );
-      } else if (index == 7) {
+      case 2:
         return new Parallax.inside(
           child: new Image.network('https://flutter.io/images/homepage/header-illustration.png'),
           mainAxisExtent: 150.0,
           flipDirection: true,
         );
-      } else {
+      default:
         return new Parallax.inside(
-          child: new Image.network('https://flutter.io/images/homepage/header-illustration.png'),
+          child: new Image.network('http://t.wallpaperweb.org/wallpaper/nature/3840x1024/9XMedia1280TripleHorizontalMountainsclouds.jpg'),
           mainAxisExtent: 150.0,
+          direction: AxisDirection.left,
         );
-      }
-    } else {
-      return new Parallax.inside(
-        child: new Column(
-          children: <Widget>[
-            new Container(
-              color: Colors.red,
-              height: 173.0,
-            ),
-            new Container(
-              color: Colors.green,
-              height: 173.0,
-              child: new FlatButton(
-                  onPressed: () => showDialog(
-                        context: context,
-                        child: new AlertDialog(
-                          title: new Text('hé'),
-                          content: new Text('lo'),
-                        ),
-                      ),
-                  child: new Text('Button')),
-            ),
-            new Container(
-              color: Colors.blue,
-              height: 173.0,
-            ),
-            new Container(
-              color: Colors.pink,
-              height: 173.0,
-            ),
-          ],
-        ),
-        mainAxisExtent: 346.0,
-      );
     }
   }
 }
diff --git a/example/pubspec.yaml b/example/pubspec.yaml
@@ -16,7 +16,6 @@ dev_dependencies:
   flutter_test:
     sdk: flutter
 
-
 # For information on the generic Dart part of this file, see the
 # following page: https://www.dartlang.org/tools/pub/pubspec
 
@@ -27,34 +26,3 @@ flutter:
   # included with your application, so that you can use the icons in
   # the material Icons class.
   uses-material-design: true
-
-  # To add assets to your application, add an assets section, like this:
-  # assets:
-  #  - images/a_dot_burr.jpeg
-  #  - images/a_dot_ham.jpeg
-
-  # An image asset can refer to one or more resolution-specific "variants", see
-  # https://flutter.io/assets-and-images/#resolution-aware.
-
-  # For details regarding adding assets from package dependencies, see
-  # https://flutter.io/assets-and-images/#from-packages
-
-  # To add custom fonts to your application, add a fonts section here,
-  # in this "flutter" section. Each entry in this list should have a
-  # "family" key with the font family name, and a "fonts" key with a
-  # list giving the asset and other descriptors for the font. For
-  # example:
-  # fonts:
-  #   - family: Schyler
-  #     fonts:
-  #       - asset: fonts/Schyler-Regular.ttf
-  #       - asset: fonts/Schyler-Italic.ttf
-  #         style: italic
-  #   - family: Trajan Pro
-  #     fonts:
-  #       - asset: fonts/TrajanPro.ttf
-  #       - asset: fonts/TrajanPro_Bold.ttf
-  #         weight: 700
-  #
-  # For details regarding fonts from package dependencies, 
-  # see https://flutter.io/custom-fonts/#from-packages
diff --git a/lib/src/rendering/parallax.dart b/lib/src/rendering/parallax.dart
@@ -146,7 +146,7 @@ abstract class ParallaxWithAxisDirectionDelegate extends ParallaxDelegate {
 
     if (mainAxisExtent < childExtent) {
       double scrollRatio = getChildScrollRatio(offsetUnit, childExtent, renderBox);
-      if (parallaxDirection == AxisDirection.down || parallaxDirection == AxisDirection.left) {
+      if (parallaxDirection == AxisDirection.down || parallaxDirection == AxisDirection.right) {
         scrollRatio = 1.0 - scrollRatio;
       }
 

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,5 +1,5 @@
 name: flutter_parallax
-description: A Flutter widget that moves at a different velocity than the main scrolling content
+description: A Flutter widget that moves according to a scroll controller.
 version: 0.0.1
 author: Romain Rastel <lets4r@gmail.com>
 homepage: https://github.com/letsar/flutter_parallax