Merge pull request #4 from wjtje/skeleton-styles

Added default styling options

Author: wjtje

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [0.0.3] - Fixed issues
 
 * Fixed dark mode
+* Added default styling options
 
 ## [0.0.2] - New Animatios
 

README.md

@@ -17,9 +17,7 @@ import 'package:skeleton_animation/skeleton_animation.dart';
 
 ```dart
 Skeleton(
-  width: 200,
   height: 12,
-  radius: Radius.circular(6),
-  animation: SkeletonAnimation.pulse
+  style: SkeletonStyle.text
 ),
 ```

example/lib/main.dart

@@ -21,15 +21,14 @@ class MyApp extends StatelessWidget {
                   delegate: SliverChildBuilderDelegate(
                       (context, i) => ListTile(
                             title: Skeleton(
-                              width: 200,
-                              height: 14,
-                              radius: Radius.circular(6),
+                              style: SkeletonStyle.text,
+                              height: 14.0,
                             ),
                             subtitle: Skeleton(
-                              width: 200,
-                              height: 10,
-                              radius: Radius.circular(6),
+                              style: SkeletonStyle.text,
+                              height: 10.0,
                             ),
+                            onTap: () {},
                           ),
                       childCount: 20),
                 )

lib/skeleton_animation.dart

@@ -21,6 +21,8 @@ enum SkeletonAnimation {
   wave
 }
 
+enum SkeletonStyle { box, circle, text }
+
 /// Creates a simple skeleton animation
 ///
 /// The default colors works great in light mode but you need to changes them for dark mode.
@@ -38,15 +40,18 @@ class Skeleton extends StatefulWidget {
   final double width;
 
   /// The height of the skeleton
+  ///
+  /// Height is ignored if the [style] is SkeletonStyle.circle
   final double height;
 
-  /// The radius of the skeleton
-  final Radius radius;
-
   /// Choose your style of animaion.
   /// The default is SkeletonAnimation.pulse
   final SkeletonAnimation animation;
 
+  /// Choose your look of the skeleton
+  /// The default is SkeletonStyle.box
+  final SkeletonStyle style;
+
   Skeleton(
       {
       // Use default colors
@@ -55,10 +60,10 @@ class Skeleton extends StatefulWidget {
       // Use default size
       this.width = 200.0,
       this.height = 60.0,
-      // Use default radius
-      this.radius = const Radius.circular(0),
       // Use the default animation
-      this.animation = SkeletonAnimation.pulse});
+      this.animation = SkeletonAnimation.pulse,
+      // Use the default style
+      this.style = SkeletonStyle.box});
 
   @override
   _SkeletonState createState() => _SkeletonState();
@@ -133,9 +138,19 @@ class _SkeletonState extends State<Skeleton>
       animation: _controller,
       builder: (context, child) => Container(
         width: widget.width,
-        height: widget.height,
+        height: (widget.style == SkeletonStyle.circle)
+            ? widget.width
+            : widget.height,
         decoration: BoxDecoration(
-          borderRadius: BorderRadius.all(widget.radius),
+          // Choose the correct border radius
+          // box: none
+          // text: 4
+          // circle: widget.width / 2
+          borderRadius: (widget.style == SkeletonStyle.box)
+              ? BorderRadius.zero
+              : (widget.style == SkeletonStyle.text)
+                  ? BorderRadius.all(Radius.circular(4))
+                  : BorderRadius.all(Radius.circular(widget.width / 2)),
           // Import the correct animation
           color: (widget.animation == SkeletonAnimation.pulse)
               ? _baseColor.withOpacity(_controller.value) // Pulse