working on Intro Screen bubble type

Author: srinivas

lib/components/intro_screen/custom_clipper.dart

@@ -9,20 +9,25 @@ class MyCustomClipper extends CustomClipper<Rect> {
   Rect getClip(Size size) {
     final Rect rect = alignment == Alignment.topLeft
         ? Rect.fromLTRB(-size.width, -size.height, size.width, size.height)
-        : alignment == Alignment.topRight
-            ? Rect.fromLTRB(-size.height, -size.width, size.width, size.height)
-            : alignment == Alignment.topCenter
-                ? Rect.fromLTRB(-size.width, -size.height, -size.width, 0)
+        : alignment == Alignment.topCenter
+            ? Rect.fromLTRB(0, -size.height, size.width, size.height)
+            : alignment == Alignment.topRight
+                ? Rect.fromLTRB(
+                    -size.height, 1, size.width, size.height)
                 : alignment == Alignment.bottomLeft
-                    ? Rect.fromLTRB(0, -size.height, size.width, size.height)
+                    ? Rect.fromLTRB(
+                        -size.width, -size.height, size.width, size.height)
                     : alignment == Alignment.bottomCenter
                         ? Rect.fromLTRB(
-                            0, -size.height, size.width, size.height)
-                        : Rect.fromLTRB(
-                            0, -size.height, size.width, size.height);
+                            0, 0, size.width, size.height)
+                        : alignment == Alignment.bottomRight
+                            ? Rect.fromLTRB(
+                                0, -size.height, size.width, size.height)
+                            : Rect.fromLTRB(
+                                0, -size.height, size.width, size.height);
     return rect;
   }
 
   @override
-  bool shouldReclip(CustomClipper oldClipper) => false;
+  bool shouldReclip(CustomClipper oldClipper) => true;
 }

lib/components/intro_screen/gf_intro_bubble_slide.dart

@@ -4,12 +4,18 @@ import 'custom_clipper.dart';
 
 class GFIntroBubbleSlide extends StatelessWidget {
   const GFIntroBubbleSlide(
-      {Key key, this.onNext, this.onNextTitle = 'Ok next', this.child, this.alignment})
+      {Key key,
+      this.onNext,
+      this.onNextTitle = 'Ok next',
+      this.child,
+      this.alignment,
+      this.color = Colors.blue})
       : super(key: key);
 
   final Function onNext;
   final String onNextTitle;
   final Widget child;
+  final Color color;
   final Alignment alignment;
 
   @override
@@ -20,10 +26,10 @@ class GFIntroBubbleSlide extends StatelessWidget {
             child: ClipOval(
               clipper: MyCustomClipper(alignment: alignment),
               child: Container(
+                width: MediaQuery.of(context).size.width / 2,
                 height: MediaQuery.of(context).size.height / 3,
-                padding: const EdgeInsets.only(
-                    left: 24, right: 24, top: 24, bottom: 64),
-                color: Colors.yellow,
+                padding: const EdgeInsets.only(right: 24, top: 24, bottom: 64),
+                color: color.withOpacity(0.5),
                 child: child ??
                     RawMaterialButton(
                         child: Text(onNextTitle), onPressed: onNext),

lib/components/intro_screen/gf_intro_screen.dart

@@ -140,28 +140,42 @@ class _GFIntroScreenState extends State<GFIntroScreen> {
     return list;
   }
 
-  Widget buildBubbleType() => SafeArea(
-        child: Container(
-          height: MediaQuery.of(context).size.height,
-          width: MediaQuery.of(context).size.width,
-          child: PageView(
-            physics: const ScrollPhysics(),
-            children: bubbleSlides(),
-            controller: _pageController,
-          ),
-        ),
-      );
+  Widget buildBubbleType() => Container(
+    height: MediaQuery.of(context).size.height,
+    width: MediaQuery.of(context).size.width,
+    child: PageView(
+      physics: const ScrollPhysics(),
+      children: bubbleSlides(),
+      controller: _pageController,
+    ),
+  );
 
   List<Widget> bubbleSlides() {
     final List<Widget> list = [];
     list.add(GFIntroBubbleSlide(
-      onNext: () => nextSlider,
+      onNext: nextSlider,
       alignment: Alignment.topLeft,
     ));
     list.add(GFIntroBubbleSlide(
-      onNext: () => nextSlider,
+      onNext: nextSlider,
+      alignment: Alignment.topCenter,
+    ));
+    list.add(GFIntroBubbleSlide(
+      onNext: nextSlider,
       alignment: Alignment.topRight,
     ));
+    list.add(GFIntroBubbleSlide(
+      onNext: nextSlider,
+      alignment: Alignment.bottomLeft,
+    ));
+    list.add(GFIntroBubbleSlide(
+      onNext: nextSlider,
+      alignment: Alignment.bottomCenter,
+    ));
+    list.add(GFIntroBubbleSlide(
+      onNext: nextSlider,
+      alignment: Alignment.bottomRight,
+    ));
     return list;
   }