Merge pull request #5 from Cleveroad/fix/page_indicator_oversizing

Fix/page indicator oversizing

Author: NikitaAmelinCR

CHANGELOG.md

@@ -6,5 +6,7 @@
 
 Version | Changes
 ---     | ---
+v.1.1.0 | <ul><li>Fixed sliding indicator oversize when using icons</li></ul>
+v.1.0.0-nullsafety | <ul><li>Null safety support</li></ul>
+v.0.1.0 | <ul><li>Removed unnecessary dependency</li></ul>
 v.0.0.1 | <ul><li>First public release</li></ul>
-v.0.1.0 | <ul><li>Removed unnecessary dependency</li></ul>

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Cleveroad
+Copyright (c) 2021 Cleveroad
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,5 +1,6 @@
-## SlidingTutorial [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/Solido/awesome-flutter) 
+## SlidingTutorial [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/Solido/awesome-flutter) <a href="https://www.cleveroad.com/?utm_source=github&utm_medium=label&utm_campaign=contacts"><img src="https://www.cleveroad.com/public/comercial/label-cleveroad.svg" height="20"></a>
 ![Header image](https://github.com/Cleveroad/flutter_sliding_tutorial/raw/master/images/header.jpg)
+
 ## Cleveroad introduces Sliding Tutorial Library for Flutter
 
 Hey guys, hope you haven’t started developing a tutorial for your Flutter app yet, as we have already completed a part of your job. Don’t worry, we act from good motives only. Our aim is to help you create a sliding tutorial in a fast and simple manner. So we’ve done some work and voila!. A simple Flutter Sliding Tutorial library is at your service.
@@ -16,7 +17,7 @@ All you need to do is:
 <br>2. Create icons for each screen of your tutorial
 <br>3. Follow the instructions below
 
-[![Awesome](https://github.com/Cleveroad/flutter_sliding_tutorial/raw/master/images/logo-footer.png)](https://www.cleveroad.com/?utm_source=github&utm_medium=label&utm_campaign=contacts)
+[![Awesome](https://avatars.githubusercontent.com/u/14131420?s=200&v=4)](https://www.cleveroad.com/?utm_source=github&utm_medium=label&utm_campaign=contacts)
 
 
 ## Full Documentation
@@ -26,7 +27,7 @@ In the `pubspec.yaml` of your flutter project, add the following dependency:
 ```yaml
 dependencies:
   ...
-  flutter_sliding_tutorial: "^0.1.0"
+  flutter_sliding_tutorial: "^1.1.0"
 ```
 
 In your library add the following import:
@@ -54,7 +55,7 @@ If you have any questions regarding the use of this tutorial, please contact us
 
         The MIT License (MIT)
 
-        Copyright (c) 2015-2016 Cleveroad
+        Copyright (c) 2021 Cleveroad
 
         Permission is hereby granted, free of charge, to any person obtaining a copy
         of this software and associated documentation files (the "Software"), to deal
@@ -83,4 +84,4 @@ If you have any questions regarding the use of this tutorial, please contact us
 
 For help getting started with Flutter, view our
 [online documentation](https://flutter.dev/docs), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.
+samples, guidance on mobile development, and a full API reference.

example/lib/main.dart

@@ -57,14 +57,14 @@ class _ExamplePageState extends State<ExamplePage> {
               notifier: notifier,
               activeIndicator: Icon(
                 Icons.check_circle,
-                size: 10,
                 color: Color(0xFF29B6F6),
               ),
               inActiveIndicator: SvgPicture.asset(
                 "assets/hollow_circle.svg",
               ),
               margin: 8,
-              sizeIndicator: 10,
+              inactiveIndicatorSize: 14,
+              activeIndicatorSize: 14,
             ),
           )
         ],

example/pubspec.lock

@@ -10,7 +10,7 @@ dependencies:
     sdk: flutter
 
   cupertino_icons: ^1.0.2
-  flutter_svg: ^0.21.0-nullsafety.0
+  flutter_svg: ^0.22.0
   flutter_sliding_tutorial:
     path: ../
 

example/pubspec.yaml

@@ -1,5 +1,6 @@
 import 'dart:math' as math;
 
+import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_sliding_tutorial/flutter_sliding_tutorial.dart';
 
@@ -21,16 +22,18 @@ class SlidingIndicator extends StatelessWidget {
   final ValueNotifier<double> notifier;
   final Widget activeIndicator;
   final Widget inActiveIndicator;
+  final double activeIndicatorSize;
+  final double inactiveIndicatorSize;
   final int indicatorCount;
-  final double sizeIndicator;
   final double margin;
 
   const SlidingIndicator({
     required this.notifier,
     required this.activeIndicator,
     required this.inActiveIndicator,
     required this.indicatorCount,
-    this.sizeIndicator = 10,
+    this.activeIndicatorSize = 10,
+    this.inactiveIndicatorSize = 10,
     this.margin = 8,
     Key? key,
   }) : super(key: key);
@@ -39,36 +42,54 @@ class SlidingIndicator extends StatelessWidget {
   Widget build(BuildContext context) {
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
-      children: <Widget>[
+      children: [
         Stack(
-          children: <Widget>[
+          alignment: Alignment.centerLeft,
+          children: [
             Row(
               mainAxisAlignment: MainAxisAlignment.center,
-              children: List<Widget>.generate(indicatorCount, (i) {
-                return Container(
+              children: List<Widget>.generate(
+                indicatorCount,
+                (i) {
+                  return Container(
                     margin: EdgeInsets.only(
-                        left: i == 0 ? 0 : margin, right: margin),
+                      left: i == 0 ? 0 : margin,
+                      right: margin,
+                    ),
                     child: Container(
-                        width: sizeIndicator,
-                        height: sizeIndicator,
-                        child: inActiveIndicator));
-              }),
+                      width: inactiveIndicatorSize,
+                      height: inactiveIndicatorSize,
+                      child: FittedBox(child: inActiveIndicator),
+                    ),
+                  );
+                },
+              ),
             ),
-            AnimatedBuilder(
-              animation: notifier,
-              builder: (context, anim) {
-                var correctScroll = notifier.value;
-                return Transform.translate(
-                    offset:
-                        Offset((margin * 2 + sizeIndicator) * correctScroll, 0),
+            Transform.translate(
+              offset: Offset(
+                inactiveIndicatorSize / 2 - activeIndicatorSize / 2,
+                0,
+              ),
+              child: AnimatedBuilder(
+                animation: notifier,
+                builder: (context, anim) {
+                  var correctScroll = notifier.value;
+                  return Transform.translate(
+                    offset: Offset(
+                      (margin * 2 + inactiveIndicatorSize) * correctScroll,
+                      0,
+                    ),
                     child: Transform.rotate(
                       angle: 2 * math.pi * correctScroll,
                       child: Container(
-                          width: sizeIndicator,
-                          height: sizeIndicator,
-                          child: activeIndicator),
-                    ));
-              },
+                        width: activeIndicatorSize,
+                        height: activeIndicatorSize,
+                        child: FittedBox(child: activeIndicator),
+                      ),
+                    ),
+                  );
+                },
+              ),
             ),
           ],
         )