added intro & slide page in GFIntroScreen

Author: srinivas

lib/components/intro_screen/gf__intro_bottom_navigation.dart

@@ -19,7 +19,7 @@ class GFIntroBottomNavigation extends StatelessWidget {
     this.onSkipTap,
     this.skipWidget,
     this.rightWidget,
-    this.dotShape,
+    this.dotShape = BoxShape.rectangle,
     this.defaultColor,
     this.activeColor,
     this.dotHeight,
@@ -121,14 +121,16 @@ class GFIntroBottomNavigation extends StatelessWidget {
                             top: 8, bottom: 8, left: 32, right: 24),
                         child: rightWidget ??
                             Text(
-                                pageNumber == pagesCount ? doneText : rightText,
+                                pageNumber == pagesCount - 1
+                                    ? doneText
+                                    : rightText,
                                 style: rightStyle ??
                                     const TextStyle(
                                       color: Colors.black,
                                       fontSize: 16,
                                     )),
                       ),
-                      onTap: pageNumber == pagesCount ? onDoneTap : onNext,
+                      onTap: pageNumber == pagesCount - 1 ? onDoneTap : onNext,
                     ),
                   ],
                 ),
@@ -140,13 +142,13 @@ class GFIntroBottomNavigation extends StatelessWidget {
 
   List<Widget> getDotsList() {
     final List<Widget> list = [];
-    for (int i = 1; i <= pagesCount; i++) {
+    for (int i = 0; i < pagesCount; i++) {
       list.add(Container(
         width: dotWidth ?? 12,
         height: dotHeight ?? 12,
         margin: dotMargin ?? const EdgeInsets.symmetric(horizontal: 4),
         decoration: BoxDecoration(
-          shape: dotShape ?? BoxShape.rectangle,
+          shape: dotShape,
           color: pageNumber == i
               ? activeColor ?? Colors.blue
               : defaultColor ?? Colors.grey.withOpacity(0.5),

lib/components/intro_screen/gf_intro.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+import 'package:getwidget/components/intro_screen/gf__intro_bottom_navigation.dart';
+import 'package:getwidget/components/intro_screen/gf_intro_slide.dart';
+
+class GFIntroScreen extends StatefulWidget {
+  @override
+  _GFIntroScreenState createState() => _GFIntroScreenState();
+}
+
+class _GFIntroScreenState extends State<GFIntroScreen> {
+  final PageController _pageController = PageController(initialPage: 0);
+  int page = 0;
+
+  @override
+  void initState() {
+    _pageController.addListener(() {
+      if (mounted) {
+        setState(() {
+          page = _pageController.page.round();
+        });
+      }
+    });
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) => Container(
+        child: Column(
+          children: <Widget>[
+            Expanded(
+                child: PageView(
+              controller: _pageController,
+              children: slides(),
+            )),
+            GFIntroBottomNavigation(
+              onNext: () {
+                if (mounted) {
+                  setState(() {
+                    page = _pageController.page.round() + 1;
+                    _pageController.nextPage(
+                        duration: const Duration(milliseconds: 200),
+                        curve: Curves.linear);
+                  });
+                }
+              },
+              pagesCount: slides().length,
+              pageNumber: page,
+            )
+          ],
+        ),
+      );
+
+  List<Widget> slides() {
+    final List<Widget> list = [];
+    list.add(const GFIntroSlide(
+      title: 'First',
+      imageHeight: 200,
+      imageWidth: 200,
+      image: NetworkImage(
+          'https://rukminim1.flixcart.com/image/832/832/kcc9q4w0/television/g/g/g/samsung-ua32t4010arxxl-ua32t4010arxxl-original-imafthw74azys6rp.jpeg?q=70'),
+    ));
+    list.add(const GFIntroSlide(
+      title: 'Second',
+      imageHeight: 200,
+      imageWidth: 200,
+      image: NetworkImage(
+          'https://rukminim1.flixcart.com/image/832/832/kcc9q4w0/television/g/g/g/samsung-ua32t4010arxxl-ua32t4010arxxl-original-imafthw74azys6rp.jpeg?q=70'),
+    ));
+    list.add(const GFIntroSlide(
+      title: 'Third',
+      imageHeight: 200,
+      imageWidth: 200,
+      image: NetworkImage(
+          'https://rukminim1.flixcart.com/image/832/832/kcc9q4w0/television/g/g/g/samsung-ua32t4010arxxl-ua32t4010arxxl-original-imafthw74azys6rp.jpeg?q=70'),
+    ));
+    list.add(const GFIntroSlide(
+      title: 'Fourth',
+      imageHeight: 200,
+      imageWidth: 200,
+      image: NetworkImage(
+          'https://rukminim1.flixcart.com/image/832/832/kcc9q4w0/television/g/g/g/samsung-ua32t4010arxxl-ua32t4010arxxl-original-imafthw74azys6rp.jpeg?q=70'),
+    ));
+    list.add(const GFIntroSlide(
+      title: 'Fifth',
+      imageHeight: 200,
+      imageWidth: 200,
+      image: NetworkImage(
+          'https://rukminim1.flixcart.com/image/832/832/kcc9q4w0/television/g/g/g/samsung-ua32t4010arxxl-ua32t4010arxxl-original-imafthw74azys6rp.jpeg?q=70'),
+    ));
+    return list;
+  }
+}

lib/components/intro_screen/gf_intro_screen.dart

@@ -1,6 +1,52 @@
 import 'package:flutter/material.dart';
+import 'package:getwidget/colors/gf_color.dart';
+import 'package:getwidget/components/image/gf_image_overlay.dart';
 
 class GFIntroSlide extends StatelessWidget {
+  const GFIntroSlide(
+      {Key key,
+      @required this.image,
+      this.imageHeight = 100,
+      this.imageWidth = 100,
+      this.title,
+      this.subTitle,
+      this.titleStyle = const TextStyle(fontSize: 20, color: GFColors.DARK),
+      this.subTitleStyle = const TextStyle(fontSize: 16, color: GFColors.DARK),
+      this.backgroundColor = GFColors.PRIMARY})
+      : super(key: key);
+  final double imageHeight;
+  final double imageWidth;
+  final ImageProvider image;
+  final String title;
+  final TextStyle titleStyle;
+  final String subTitle;
+  final TextStyle subTitleStyle;
+  final Color backgroundColor;
+
   @override
-  Widget build(BuildContext context) => Container();
+  Widget build(BuildContext context) => Container(
+        color: backgroundColor,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: <Widget>[
+            GFImageOverlay(
+                height: imageHeight, width: imageWidth, image: image),
+            const SizedBox(
+              height: 20,
+            ),
+            Text(
+              title ?? 'Title',
+              style: titleStyle,
+            ),
+            const SizedBox(
+              height: 40,
+            ),
+            Text(
+              subTitle ?? 'Sub Title',
+              style: subTitleStyle,
+            )
+          ],
+        ),
+      );
 }