update git config

.github/workflows/config.yaml

@@ -3,7 +3,10 @@ name: test
 on:
   pull_request:
     branches:
-      - master
+      - main
+      - dev
+    push:
+      - dev
 
 jobs:
   flutter_test:
@@ -20,9 +23,10 @@ jobs:
       - run: |
           flutter doctor
           flutter pub get
+          flutter test
           # flutter test --coverage
           # bash <(curl -s https://codecov.io/bash)
-      - run: |
-          flutter test
-        working-directory: ./example
+      # - run: |
+      #     flutter test
+      #   working-directory: ./example
 

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.0.2
+* add inkWell to shapes
+
 ## 0.0.1
 * Initial release
 

example/README.md

@@ -1,16 +1,48 @@
-# example
 
-A new Flutter project.
+# shape_builder examples
 
 ## Getting Started
+First, make sure you have installed `shape_builder` package. 
+<Br />
 
-This project is a starting point for a Flutter application.
 
-A few resources to get you started if this is your first Flutter project:
+## Objective
 
-- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
-- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
+In these examples, you will learn how to draw different shapes from basic to more advanced ones.
+
+
+## Layout logics
+
+- [01: Shape layout logics](https://github.com/GIfatahTH/shape_builder/blob/dev/example/lib/ex_001_basic_shapes/ex_01_shape_layout.dart)
+   <br /><b> Description: </b>
+   Shapes Size is determined following the following logics
+    * If the Shape has no child, no `height`, no `width`, and  `shouldExpand` parameter is set to false (the default value), then Shape tries to size as small as possible.
+    * If the Shape has no `height`, no `width`, and  `shouldExpand` parameter is set to false, then Shape tries to size as big as possible.
+    * If the Shape has child, but no `height`, no `width`, then Shape tries to size so to fit its child.
+     * If the Shape has `height` or `width`, then Shape tries take the given `height` or `width` respecting the constraint coming form parent.
+
+- [02: Shape color and gradient](https://github.com/GIfatahTH/shape_builder/blob/dev/example/lib/ex_001_basic_shapes/ex_02_color_and_gradient.dart)
+   <br /><b> Description: </b>
+   This example demonstrate how to color shapes and how to add gradients.
+
+- [03: Add shadow to a shape](https://github.com/GIfatahTH/shape_builder/blob/dev/example/lib/ex_001_basic_shapes/ex_03_shadow.dart)
+   <br /><b> Description: </b>
+   This example demonstrate how to add shaw to shapes.
+
+- [04: Child to Shape alignment](https://github.com/GIfatahTH/shape_builder/blob/dev/example/lib/ex_001_basic_shapes/ex_04_child_alignment.dart)
+   <br /><b> Description: </b>
+   This example demonstrate the logic of alignment of the child to the Shape.
+
+- [05: Use shapes as clipper](https://github.com/GIfatahTH/shape_builder/blob/dev/example/lib/ex_001_basic_shapes/ex_05_clip_behaviour.dart)
+   <br /><b> Description: </b>
+   This example demonstrate to use Shapes to clip widgets.
+
+- [06: Use shapes to clipper images](https://github.com/GIfatahTH/shape_builder/blob/dev/example/lib/ex_001_basic_shapes/ex_06_clip_behaviour_image.dart)
+   <br /><b> Description: </b>
+   This example demonstrate to use Shapes to clip images.
+
+
+
+## Questions & Suggestions
+Please feel free to post an issue or PR. As always, your feedback makes this library become better and better.
 
-For help getting started with Flutter development, view the
-[online documentation](https://docs.flutter.dev/), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.

example/lib/ex_001_basic_shapes/ex_01_shape_layout.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:shape_builder/shape_builder.dart';
+
+void main(List<String> args) {
+  runApp(const _MyApp());
+}
+
+class _MyApp extends StatelessWidget {
+  const _MyApp();
+
+  @override
+  Widget build(BuildContext context) {
+    return const MaterialApp(
+      home: _MyHomePage(),
+    );
+  }
+}
+
+class _MyHomePage extends StatelessWidget {
+  const _MyHomePage();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        // shapes trie to size itself, in the following order:
+        // * to honor the `width`, `height`,
+        // * to be as big as possible if the parameter "shouldExpand" is set to true,
+        // * to ba as small as it child if the latter is defined,
+        // * to be as small as possible.
+        //
+        // TO TRY:
+        // Use RRectangle or Oval instead of Rectangle and try different combination
+        // of width, height, child and shouldExpand
+        child: Rectangle(
+          shouldExpand: true,
+          // width: 200,
+          // height: 200,
+          // child: Text('Child'),
+        ),
+      ),
+    );
+  }
+}

example/lib/ex_001_basic_shapes/ex_02_color_and_gradient.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+import 'package:shape_builder/shape_builder.dart';
+
+void main(List<String> args) {
+  runApp(const _MyApp());
+}
+
+class _MyApp extends StatelessWidget {
+  const _MyApp();
+
+  @override
+  Widget build(BuildContext context) {
+    return const MaterialApp(
+      home: _MyHomePage(),
+    );
+  }
+}
+
+class _MyHomePage extends StatelessWidget {
+  const _MyHomePage();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: SingleChildScrollView(
+          child: Column(
+            children: [
+              // color defaults to the primary color
+              Rectangle(
+                width: 200,
+                height: 200,
+              ),
+              const Divider(),
+              // to set the color use the color parameter
+              RRectangle(
+                color: Colors.amber,
+                width: 200,
+                height: 200,
+              ),
+              const Divider(),
+              // ColorWithGradient class to set a gradient
+              Oval(
+                color: ColorWithGradient(
+                  const LinearGradient(colors: [Colors.blue, Colors.amber]),
+                ),
+                width: 200,
+                height: 200,
+              ),
+              const Divider(),
+              Oval.circle(
+                color: ColorWithGradient(
+                  const RadialGradient(colors: [Colors.blue, Colors.amber]),
+                ),
+                radius: 200 / 2,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

example/lib/ex_001_basic_shapes/ex_03_shadow.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:shape_builder/shape_builder.dart';
+
+void main(List<String> args) {
+  runApp(const _MyApp());
+}
+
+class _MyApp extends StatelessWidget {
+  const _MyApp();
+
+  @override
+  Widget build(BuildContext context) {
+    return const MaterialApp(
+      home: _MyHomePage(),
+    );
+  }
+}
+
+class _MyHomePage extends StatelessWidget {
+  const _MyHomePage();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: Column(
+          children: <Widget>[
+            // Use box shadow to add a shadow
+            Oval.circle(
+              radius: 100,
+              boxShadow: const [
+                BoxShadow(
+                  color: Colors.grey,
+                  spreadRadius: 7,
+                  blurRadius: 7,
+                  offset: Offset(10, 10),
+                )
+              ],
+            ),
+            const Divider(),
+            Oval.circle(
+              radius: 100,
+              swipeAngle: 4,
+              boxShadow: const [
+                BoxShadow(
+                  color: Colors.grey,
+                  spreadRadius: 7,
+                  blurRadius: 7,
+                )
+              ],
+            ),
+            const Divider(),
+            // You can use BoxShadowWithElevation to add shadow from elevation
+            Oval.circle(
+              radius: 100,
+              swipeAngle: 4,
+              boxShadow: BoxShadowWithElevation(12, color: Colors.amber),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/lib/ex_001_basic_shapes/ex_04_child_alignment.dart

@@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+import 'package:shape_builder/shape_builder.dart';
+
+void main(List<String> args) {
+  runApp(const _MyApp());
+}
+
+class _MyApp extends StatelessWidget {
+  const _MyApp();
+
+  @override
+  Widget build(BuildContext context) {
+    return const MaterialApp(
+      home: _MyHomePage(),
+    );
+  }
+}
+
+class _MyHomePage extends StatelessWidget {
+  const _MyHomePage();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: Column(
+          children: <Widget>[
+            // FIRST CASE: Child is grater than Shape dimension
+            //
+            // Default alignment is Alignment.center
+            Rectangle.square(
+              child: const Text('This is a ME'),
+            ),
+            const Divider(),
+            //
+            // Because child size is greater than shape size the shape is aligned
+            // to the child
+            Rectangle.square(
+              alignment: Alignment.topLeft,
+              child: const Text('This is a ME'),
+            ),
+            const Divider(),
+            Rectangle.square(
+              side: 50,
+              alignment: Alignment.centerRight,
+              child: const Text('This is a ME'),
+            ),
+            const Divider(),
+            // Second CASE: Shape size is greater than child size
+            //
+            // Default alignment is Alignment.center
+            Rectangle.square(
+              side: 150,
+              child: const Text('This is a ME'),
+            ),
+            const Divider(),
+            // Because of the shape size is greater than child size the child is aligned
+            // to the shape
+            Rectangle.square(
+              side: 150,
+              alignment: Alignment.topLeft,
+              child: const Text('This is a ME'),
+            ),
+            const Divider(),
+            Rectangle.square(
+              side: 150,
+              alignment: Alignment.bottomRight,
+              child: const Text('This is a ME'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}