update README

KevinVan720 · Mar 20, 2021 · db878ec · db878ec
1 parent 7296c61
commit db878ec
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -64,4 +64,8 @@ Explicit animation parsing
 
 ## [0.1.7] - 03/19/2021
 
-ImageFiltered and BackdropFilter support in Style
+ImageFiltered and BackdropFilter support in Style
+
+## [0.1.8] - 03/19/2021
+
+Update README
diff --git a/README.md b/README.md
@@ -65,6 +65,13 @@ TextAlign textAlign
 SystemMouseCursor mouseCursor
 ```
 
+7. Shader and ImageFilter
+```dart
+Gradient shaderGradient
+ImageFilter imageFilter
+ImageFilter backdropFilter
+```
+
 All of the properties that are of type Dimension or named DynamicXXX are fully responsive in the sense that the actual dimensions are calculated based on the size of the widget's parent constraint or the size of the screen, just like CSS.
 
 ![Layout model](https://i.imgur.com/HGyFFbc.png)
@@ -138,6 +145,8 @@ following GIF for a demonstration:
 
 ![style_demo7](https://i.imgur.com/97iuDpS.gif)
 
+![style_demo8](https://i.imgur.com/k7BEHOL.gif)
+
 Just replace the StyledContainer with AnimatedStyledContainer and provide a duration and a curve. Notice the animation can not only be triggered by providing a new style/style map, but also by window resizing/screen rotation as long as you provide the appropriate styles.
 
 ## Explicit Animation
@@ -198,7 +207,7 @@ AnimationProperty.width: AnimationSequence()
 
 will delay 1 second, then animate the width from its current value to 100 px in 200ms, then to 200 px in 200ms. You can animate other properties using the same syntax.
 
-![style_demo8](https://i.imgur.com/Gcii4AZ.gif)
+![style_demo9](https://i.imgur.com/Gcii4AZ.gif)
 
 The above mouse hover effect is achieved by writing:
 
@@ -221,11 +230,11 @@ Now let's talk about other animation triggers. The AnimationTrigger.tap is easy
 
 The animation progress by default is calculated as shown in the figure above (if scrolled horizontally). But you can also make the animation start/end earlier or later using two percentage offsets.
 
-![style_demo9](https://i.imgur.com/12TmQ55.gif)
+![style_demo10](https://i.imgur.com/12TmQ55.gif)
 
-![style_demo10](https://i.imgur.com/JA0MvRD.gif)
+![style_demo11](https://i.imgur.com/JA0MvRD.gif)
 
-![style_demo11](https://i.imgur.com/NcIPyrf.gif)
+![style_demo12](https://i.imgur.com/NcIPyrf.gif)
 
 ### Preset Animation
 
@@ -292,7 +301,7 @@ SlideInAnimation().getAnimationSequences())
 
 Then the widget will both fade and slide in. If you use extend, the animation will play one after another. Preset animations make animations much easier to use while still offer you great flexibility.
 
-![style_demo12](https://i.imgur.com/1GXSxxq.gif)
+![style_demo13](https://i.imgur.com/1GXSxxq.gif)
 
 ### Global Explicit Animations
 
@@ -323,7 +332,7 @@ Widget widget = ExplicitAnimatedStyledContainer(
 
 The id does not need to be unique. You can have multiple widgets with the same id so they will all animate under the same global animation. Notice if a widget does not use global animations at all, there is no need for an id.
 
-![style_demo13](https://i.imgur.com/YzSsevQ.gif)
+![style_demo14](https://i.imgur.com/YzSsevQ.gif)
 
 ### Other things to notice
 
@@ -369,5 +378,5 @@ dynamic? parsePossibleStyleMap(Map<String, dynamic>? style)
 ```
 and use the result directly in the StyledContainer class.
 
-AnimationSequence and GlobalAnimation class will support serialization shortly.
+Classes involved in explicit animations also support serialization. You can basically create and store complex animated components in plain text and load them everywhere.
 
diff --git a/example/lib/glassmorphism_button.dart b/example/lib/glassmorphism_button.dart
@@ -34,7 +34,7 @@ class _GlassmorphismButtonPageState extends State<GlassmorphismButtonPage> {
         shapeBorder: MorphableShapeBorder(
             shape: RectangleShape(
                 border: DynamicBorderSide(
-                    width: 3,
+                    width: 2,
                     gradient: LinearGradient(
                         begin: Alignment.topLeft,
                         end: Alignment.bottomRight,
@@ -59,7 +59,17 @@ class _GlassmorphismButtonPageState extends State<GlassmorphismButtonPage> {
         mouseCursor: SystemMouseCursors.click);
 
     endStyle = beginStyle.copyWith(
-      backdropFilter: ImageFilter.blur(sigmaX: 0, sigmaY: 0),
+      shapeBorder: MorphableShapeBorder(
+          shape: RectangleShape(
+              border: DynamicBorderSide(
+                  width: 5,
+                  gradient: LinearGradient(
+                      begin: Alignment.topLeft,
+                      end: Alignment.bottomRight,
+                      stops: [0, 0.3],
+                      colors: [Colors.white, Colors.white.withOpacity(0.05)])),
+              borderRadius: DynamicBorderRadius.all(
+                  DynamicRadius.circular(20.toPXLength)))),
     );
 
     /*printWrapped(
@@ -107,8 +117,8 @@ class _GlassmorphismButtonPageState extends State<GlassmorphismButtonPage> {
               toggleStyle = true;
             });
           },
-          child: StyledContainer(
-              //duration: Duration(milliseconds: 100),
+          child: AnimatedStyledContainer(
+              duration: Duration(milliseconds: 500),
               style: toggleStyle ? beginStyle : endStyle,
               child: Text("TAP ME")),
         ),

diff --git a/example/lib/long_animated_button.dart b/example/lib/long_animated_button.dart
@@ -125,7 +125,11 @@ class _MyHomePageState extends State<MyHomePage> {
                   ..add(
                       duration: Duration(seconds: 10), value: 70.toVMINLength),
                 AnimationProperty.shapeBorder: AnimationSequence()
-                  ..add(value: MorphableShapeBorder(shape: CircleShape()))
+                  ..add(
+                      value: MorphableShapeBorder(
+                          shape: RectangleShape(
+                              borderRadius: DynamicBorderRadius.all(
+                                  DynamicRadius.circular(50.toPercentLength)))))
                   ..add(
                       duration: Duration(seconds: 5),
                       value: MorphableShapeBorder(
@@ -372,14 +376,9 @@ class _MyHomePageState extends State<MyHomePage> {
                   ..add(
                       duration: Duration(seconds: 4),
                       value: MorphableShapeBorder(
-                          shape: CircleShape(
-                              border: DynamicBorderSide(
-                                  width: 50,
-                                  gradient: LinearGradient(colors: [
-                                    Colors.black87,
-                                    Colors.indigo,
-                                    Colors.blueGrey
-                                  ])))))
+                          shape: RectangleShape(
+                              borderRadius: DynamicBorderRadius.all(
+                                  DynamicRadius.circular(50.toPercentLength)))))
               }))
       },
       child: Text("Tap"),

diff --git a/example/lib/neon_button.dart b/example/lib/neon_button.dart
@@ -62,7 +62,7 @@ class _NeonButtonPageState extends State<NeonButtonPage> {
           fontSize: Dimension.min(300.toPercentLength, 28.toPXLength),
           fontWeight: FontWeight.w900,
           color: Colors.white,
-          shadows: [
+          /*shadows: [
             DynamicShadow(
                 blurRadius: 5.toPXLength,
                 color: Colors.white,
@@ -75,12 +75,12 @@ class _NeonButtonPageState extends State<NeonButtonPage> {
                 blurRadius: 1.toPXLength,
                 color: Colors.white70,
                 offset: DynamicOffset(0.toPXLength, 0.toPXLength))
-          ],
+          ],*/
         ),
         textAlign: TextAlign.center,
         shaderGradient:
             LinearGradient(colors: [Colors.purpleAccent, Colors.cyanAccent]),
-        imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
+        //imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
         mouseCursor: SystemMouseCursors.click);
 
     endStyle = beginStyle.copyWith(

diff --git a/example/lib/staggerd_animations.dart b/example/lib/staggerd_animations.dart
@@ -21,7 +21,10 @@ class StaggeredAnimationsPage extends StatelessWidget {
                 ..add(
                     curve: Curves.bounceIn,
                     duration: Duration(seconds: 2),
-                    value: MorphableShapeBorder(shape: CircleShape())),
+                    value: MorphableShapeBorder(
+                        shape: RectangleShape(
+                            borderRadius: DynamicBorderRadius.all(
+                                DynamicRadius.circular(50.toPercentLength))))),
               AnimationProperty.backgroundDecoration: AnimationSequence()
                 ..add(
                     curve: Curves.bounceIn,

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -94,7 +94,7 @@ packages:
       name: morphable_shape
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.3"
+    version: "1.3.4"
   nested:
     dependency: transitive
     description:
@@ -136,7 +136,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.1.6"
+    version: "0.1.7"
   simple_animations:
     dependency: transitive
     description:

diff --git a/pubspec.lock b/pubspec.lock
@@ -94,7 +94,7 @@ packages:
       name: morphable_shape
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.3"
+    version: "1.3.4"
   nested:
     dependency: transitive
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: responsive_styled_widget
 description: Lets you use a serializable style/style map to make responsive and animated widgets.
-version: 0.1.7
+version: 0.1.8
 homepage: https://github.com/KevinVan720/styled_widget
 
 environment:
@@ -15,7 +15,7 @@ dependencies:
 
   flutter_class_parser: ^0.1.4
 
-  morphable_shape: ^1.3.3
+  morphable_shape: ^1.3.4
 
   tuple: ^2.0.0