Error handling & change placeholder to a widget

CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 - none.
 
-## [0.1.0] - 2019-07-01
+## [0.2.0] - 2019-07-29
+### Added
+- Support for error handling via `errorBuilder`
+
+### Changed
+- `placeholder` now accepts a `Widget` instead of an `ImageProvider`.
+- previously loaded images are now faded out after the new image is faded in. Noticeable when a smaller image is loaded over a larger one.
+
+### Removed
+- `backgroundColor` was removed. Use a `placeholder` with a color instead.
+
+## [0.1.0] - 2019-07-23
 ### Added
 - First release.

README.md

@@ -2,17 +2,16 @@
 
 **Requires Flutter 1.6.7 or higher.**
 
-A widget for Flutter that displays a `placeholder` image while a specified `image` loads, then cross-fades to the loaded image.
+A widget for Flutter that displays a `placeholder` widget while a specified `image` loads, then cross-fades to the loaded image. Also handles progress and errors.
 
 If `image` is changed, it will cross-fade to the new image once it is finished loading. Setting `image` to `null` will cross-fade back to the placeholder.
 
-![example image](https://gskinner.github.io/image_fade/example.gif)
+![example image](https://gskinner.github.io/image_fade/example_v0_2_0.gif)
 
-You can set `color` (background color), `fadeDuration` and `fadeCurve`, as well as most `Image` properties:
-`width`, `height`, `fit`, `alignment`, `repeat`, `matchTextDirection`, `excludeFromSemantics`
-and `semanticLabel`.
+You can set `fadeDuration` and `fadeCurve`, as well as most `Image` properties:
+`width`, `height`, `fit`, `alignment`, `repeat`, `matchTextDirection`, `excludeFromSemantics` and `semanticLabel`.
 
-You can also specify a `loadingBuilder` that will display load progress any time a new image is loaded.
+You can also specify a `loadingBuilder` that will display load progress any time a new image is loaded, and an `errorBuilder` that will display if an error occurs while loading an image.
 
 ## Example
 

example/README.md

@@ -2,6 +2,8 @@
 
 Demonstrates the core features of the `ImageFade` widget.
 
-Pressing the `(>)` button sets the `image` property to a new `NetworkImage` (loading from WikiMedia Commons).
+Pressing the `>` button sets the `image` property to a new `NetworkImage` (loading from WikiMedia Commons).
 
-Pressing the `(x)` button sets `image` to `null`.
+Pressing the `x` button sets `image` to `null`.
+
+Pressing the `/!\` button sets `image` to a non-existent image url, demonstrating an error.

example/lib/main.dart

@@ -37,33 +37,47 @@ class _MyHomePageState extends State<MyHomePage> {
 
   int _counter = 0;
   bool _clear = true;
+  bool _error = false;
 
   void _incrementCounter() {
     setState(() {
-      if (_clear) { _clear = false; }
+      if (_clear || _error) { _clear = _error = false; }
       else { _counter = (_counter+1)%_imgs.length; }
     });
   }
 
   void _clearImage() {
     setState(() {
       _clear = true;
+      _error = false;
+    });
+  }
+
+  void _testError() {
+    setState(() {
+      _error = true;
     });
   }
 
   @override
   Widget build(BuildContext context) {
+    ImageProvider image;
+    if (_error) { image = NetworkImage('error.jpg'); }
+    else if (!_clear) { image = NetworkImage(_imgs[_counter]); }
+
     return Scaffold(
       appBar: AppBar(
-        title: Text('Showing ' + (_clear ? 'placeholder image' : "image #$_counter from Wikimedia")),
+        title: Text('Showing ' + (_error ? 'error' : _clear ? 'placeholder' : 'image #$_counter from Wikimedia')),
       ),
 
       body: Stack(children: <Widget>[
         Positioned.fill(child: 
           ImageFade(
-            image: _clear ? null : NetworkImage(_imgs[_counter]), 
-            placeholder: AssetImage('assets/images/placeholder.png'),
-            backgroundColor: Colors.black,
+            image: image,
+            placeholder: Container(
+              color: Color(0xFFCFCDCA),
+              child: Center(child: Icon(Icons.photo, color: Colors.white30, size: 128.0,)),
+            ),
             alignment: Alignment.center,
             fit: BoxFit.cover,
             loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent event) {
@@ -74,6 +88,12 @@ class _MyHomePageState extends State<MyHomePage> {
                 ),
               );
             },
+            errorBuilder: (BuildContext context, Widget child, dynamic exception) {
+              return Container(
+                color: Color(0xFF6F6D6A),
+                child: Center(child: Icon(Icons.warning, color: Colors.black26, size: 128.0)),
+              );
+            },
           )
         )
       ]),
@@ -90,6 +110,12 @@ class _MyHomePageState extends State<MyHomePage> {
           tooltip: 'Clear',
           child: Icon(Icons.clear),
         ),
+        SizedBox(width:10.0),
+        FloatingActionButton(
+          onPressed: _testError,
+          tooltip: 'Error',
+          child: Icon(Icons.warning),
+        ),
       ]),
     );
   }

example/pubspec.lock

@@ -45,7 +45,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.1.0"
+    version: "0.2.0"
   matcher:
     dependency: transitive
     description:
@@ -144,3 +144,4 @@ packages:
     version: "2.0.8"
 sdks:
   dart: ">=2.2.2 <3.0.0"
+  flutter: ">=1.6.7 <2.0.0"