glorylab · RockerFlower · Sep 16, 2020 · Sep 16, 2020 · Sep 16, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 0.1.0
+
+Add backgroundImage param.
+
 ## 0.0.7
 
 Add options of setting blur and gradient.

diff --git a/README.md b/README.md
@@ -35,7 +35,14 @@ WaveWidget(
     ],
     waveAmplitude: 0,
     heightPercentages: [0.25, 0.26, 0.28, 0.31],
-    backgroundColor: Colors.blue,
+    backgroundImage: DecorationImage(
+        image: NetworkImage(
+            'https://images.unsplash.com/photo-1600107363560-a2a891080c31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=672&q=80',
+        ),
+        fit: BoxFit.cover,
+        colorFilter:
+            ColorFilter.mode(Colors.white, BlendMode.softLight),
+    ),
     size: Size(
         double.infinity,
         double.infinity,
@@ -68,8 +75,3 @@ WaveWidget(
 ### GIF
 
 ![demo](example/assets/demo.gif)
-
-## TODO
-
-- [ ] Static mode.
-- [ ] Random mode.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -27,9 +27,14 @@ class WaveDemoHomePage extends StatefulWidget {
 }
 
 class _WaveDemoHomePageState extends State<WaveDemoHomePage> {
-  _buildCard({Config config, Color backgroundColor = Colors.transparent}) {
+  _buildCard({
+    Config config,
+    Color backgroundColor = Colors.transparent,
+    DecorationImage backgroundImage,
+    double height = 152.0,
+  }) {
     return Container(
-      height: 152.0,
+      height: height,
       width: double.infinity,
       child: Card(
         elevation: 12.0,
@@ -40,6 +45,7 @@ class _WaveDemoHomePageState extends State<WaveDemoHomePage> {
         child: WaveWidget(
           config: config,
           backgroundColor: backgroundColor,
+          backgroundImage: backgroundImage,
           size: Size(double.infinity, double.infinity),
           waveAmplitude: 0,
         ),
@@ -89,6 +95,7 @@ class _WaveDemoHomePageState extends State<WaveDemoHomePage> {
           children: <Widget>[
             SizedBox(height: 16.0),
             _buildCard(
+              backgroundColor: Colors.purpleAccent,
               config: CustomConfig(
                 gradients: [
                   [Colors.red, Color(0xEEF44336)],
@@ -104,15 +111,24 @@ class _WaveDemoHomePageState extends State<WaveDemoHomePage> {
               ),
             ),
             _buildCard(
+              height: 256.0,
+              backgroundImage: DecorationImage(
+                image: NetworkImage(
+                  'https://images.unsplash.com/photo-1600107363560-a2a891080c31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=672&q=80',
+                ),
+                fit: BoxFit.cover,
+                colorFilter:
+                    ColorFilter.mode(Colors.white, BlendMode.softLight),
+              ),
               config: CustomConfig(
                 colors: [
                   Colors.pink[400],
                   Colors.pink[300],
                   Colors.pink[200],
                   Colors.pink[100]
                 ],
-                durations: [35000, 19440, 10800, 6000],
-                heightPercentages: [0.20, 0.23, 0.25, 0.30],
+                durations: [18000, 8000, 5000, 12000],
+                heightPercentages: [0.85, 0.86, 0.88, 0.90],
                 blur: _blur,
               ),
             ),

diff --git a/lib/wave.dart b/lib/wave.dart
@@ -202,6 +202,7 @@
 
 import 'dart:async';
 import 'dart:math';
+import 'dart:ui';
 
 import 'package:flutter/widgets.dart';
 import 'package:wave/config.dart';
@@ -215,17 +216,19 @@ class WaveWidget extends StatefulWidget {
   final double heightPercentange;
   final int duration;
   final Color backgroundColor;
+  final DecorationImage backgroundImage;
   final bool isLoop;
 
   WaveWidget({
     @required this.config,
-    this.duration = 6000,
     @required this.size,
     this.waveAmplitude = 20.0,
-    this.waveFrequency = 1.6,
     this.wavePhase = 10.0,
-    this.backgroundColor,
+    this.waveFrequency = 1.6,
     this.heightPercentange = 0.2,
+    this.duration = 6000,
+    this.backgroundColor,
+    this.backgroundImage,
     this.isLoop = true,
   });
 
@@ -341,7 +344,10 @@ class _WaveWidgetState extends State<WaveWidget> with TickerProviderStateMixin {
   @override
   Widget build(BuildContext context) {
     return Container(
-      color: widget.backgroundColor,
+      decoration: BoxDecoration(
+        color: widget.backgroundColor,
+        image: widget.backgroundImage,
+      ),
       child: Stack(
         children: _buildPaints(),
       ),
@@ -368,7 +374,6 @@ class Layer {
   });
 }
 
-
 class _CustomWavePainter extends CustomPainter {
   final ColorMode colorMode;
   final Color color;
@@ -436,7 +441,9 @@ class _CustomWavePainter extends CustomPainter {
       var rect = Offset.zero &
           Size(size.width, size.height - viewCenterY * heightPercentange);
       _paint.shader = LinearGradient(
-              begin: gradientBegin == null ? Alignment.bottomCenter : gradientBegin,
+              begin: gradientBegin == null
+                  ? Alignment.bottomCenter
+                  : gradientBegin,
               end: gradientEnd == null ? Alignment.topCenter : gradientEnd,
               colors: _layer.gradient)
           .createShader(rect);

diff --git a/pubspec.lock b/pubspec.lock
@@ -1,13 +1,27 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  archive:
+    dependency: transitive
+    description:
+      name: archive
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.11"
+  args:
+    dependency: transitive
+    description:
+      name: args
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.5.2"
   async:
     dependency: transitive
     description:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.3.0"
+    version: "2.4.0"
   boolean_selector:
     dependency: transitive
     description:
@@ -29,6 +43,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.14.11"
+  convert:
+    dependency: transitive
+    description:
+      name: convert
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.1"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.3"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -39,20 +67,27 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  image:
+    dependency: transitive
+    description:
+      name: image
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.4"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.5"
+    version: "0.12.6"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.7"
+    version: "1.1.8"
   path:
     dependency: transitive
     description:
@@ -67,6 +102,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0+1"
+  petitparser:
+    dependency: transitive
+    description:
+      name: petitparser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.4.0"
   quiver:
     dependency: transitive
     description:
@@ -120,7 +162,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.5"
+    version: "0.2.11"
   typed_data:
     dependency: transitive
     description:
@@ -135,5 +177,12 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.8"
+  xml:
+    dependency: transitive
+    description:
+      name: xml
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.5.0"
 sdks:
-  dart: ">=2.2.2 <3.0.0"
+  dart: ">=2.4.0 <3.0.0"
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,8 +1,7 @@
 name: wave
 description: Widget for displaying waves with custom color, duration, floating and blur effects.
-version: 0.0.8
-author: Yan Wong <[email protected]>
-homepage: https://github.com/TheProtoss/wave
+version: 0.1.0
+homepage: https://github.com/i-protoss/wave
 
 environment:
   sdk: ">=2.0.0-dev.68.0 <3.0.0"