fix: rendering overflow issue if bubbles > 5 (#96)

Jayson1999 · Jayson6099 · mzdm · web-flow · commit 641b5becbae5 · 2021-06-13T08:59:55.000-07:00
* - Fix #76 Use screen's width to apply container's width of page bubbles if > 5. * - Incremented version * fix: alignment of the bubbles * add an assert * chore: update version & changelog * fix: formatting * chore: move extension to a separate folder * chore: optimize calculating the bubble width * chore: update CHANGELOG.md * chore: clarify assert * chore: added test for assertion * chore: added test for overflow Co-authored-by: Jayson6099 <p17009238@student.newinti.edu.my> Co-authored-by: Matej Zidek <zidek.matt@gmail.com>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 3.2.0
+* Fixed overflowing issue with the bubbles. Thanks @Jayson1999
+* Updated app example
+* Updated CI
+
 ## 3.1.1
 * Updated app example. Thanks @zognotadog
 
diff --git a/README.md b/README.md
@@ -65,7 +65,7 @@ You should ensure that you add the `intro_views_flutter` as a dependency in your
 
 ```yaml
 dependencies:
-  intro_views_flutter: '^3.1.1'
+  intro_views_flutter: '^3.2.0'
 ```
 
 You can also reference the git repository directly if you want:
diff --git a/lib/src/animation_gesture/animated_page_dragger.dart b/lib/src/animation_gesture/animated_page_dragger.dart
@@ -2,7 +2,7 @@ import 'dart:async';
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
-import 'package:intro_views_flutter/src/constants/constants.dart';
+import 'package:intro_views_flutter/src/helpers/constants.dart';
 import 'package:intro_views_flutter/src/models/slide_update_model.dart';
 
 /// This class provides the animation controller
diff --git a/lib/src/animation_gesture/page_dragger.dart b/lib/src/animation_gesture/page_dragger.dart
@@ -1,7 +1,7 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
-import 'package:intro_views_flutter/src/constants/constants.dart';
+import 'package:intro_views_flutter/src/helpers/constants.dart';
 import 'package:intro_views_flutter/src/models/slide_update_model.dart';
 
 /// This class is used to get user gesture and work according to it.
diff --git a/lib/src/helpers/constants.dart b/lib/src/helpers/constants.dart
diff --git a/lib/src/helpers/extensions.dart b/lib/src/helpers/extensions.dart
@@ -0,0 +1,5 @@
+import 'package:flutter/cupertino.dart';
+
+extension BuildContextExt on BuildContext {
+  double get screenWidth => MediaQuery.of(this).size.width;
+}
diff --git a/lib/src/models/page_button_view_model.dart b/lib/src/models/page_button_view_model.dart
@@ -1,4 +1,4 @@
-import 'package:intro_views_flutter/src/constants/constants.dart';
+import 'package:intro_views_flutter/src/helpers/constants.dart';
 
 /// This is view model for the skip and done buttons.
 class PageButtonViewModel {
diff --git a/lib/src/models/pager_indicator_view_model.dart b/lib/src/models/pager_indicator_view_model.dart
@@ -1,4 +1,4 @@
-import 'package:intro_views_flutter/src/constants/constants.dart';
+import 'package:intro_views_flutter/src/helpers/constants.dart';
 import 'package:intro_views_flutter/src/models/page_view_model.dart';
 
 /// View model for page indicator.
diff --git a/lib/src/models/slide_update_model.dart b/lib/src/models/slide_update_model.dart
@@ -1,4 +1,4 @@
-import 'package:intro_views_flutter/src/constants/constants.dart';
+import 'package:intro_views_flutter/src/helpers/constants.dart';
 
 /// Model for slide update.
 class SlideUpdate {
diff --git a/lib/src/ui/intro_views_flutter.dart b/lib/src/ui/intro_views_flutter.dart
@@ -5,7 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:intro_views_flutter/src/animation_gesture/animated_page_dragger.dart';
 import 'package:intro_views_flutter/src/animation_gesture/page_dragger.dart';
 import 'package:intro_views_flutter/src/animation_gesture/page_reveal.dart';
-import 'package:intro_views_flutter/src/constants/constants.dart';
+import 'package:intro_views_flutter/src/helpers/constants.dart';
 import 'package:intro_views_flutter/src/models/page_view_model.dart';
 import 'package:intro_views_flutter/src/models/pager_indicator_view_model.dart';
 import 'package:intro_views_flutter/src/models/slide_update_model.dart';
@@ -38,7 +38,11 @@ class IntroViewsFlutter extends StatefulWidget {
     this.columnMainAxisAlignment = MainAxisAlignment.spaceAround,
     this.fullTransition = FULL_TRANSITION_PX,
     this.background,
-  }) : super(key: key);
+  })  : assert(
+          pages.length > 0,
+          "At least one 'PageViewModel' item of 'pages' argument is required.",
+        ),
+        super(key: key);
 
   /// List of [PageViewModel] to display.
   final List<PageViewModel> pages;
diff --git a/lib/src/ui/page_bubble.dart b/lib/src/ui/page_bubble.dart
@@ -7,14 +7,16 @@ import 'package:intro_views_flutter/src/models/page_bubble_view_model.dart';
 class PageBubble extends StatelessWidget {
   const PageBubble({
     required this.viewModel,
+    required this.width,
   });
 
   final PageBubbleViewModel viewModel;
+  final double width;
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      width: 55.0,
+      width: width,
       height: 65.0,
       child: Center(
         child: Padding(
diff --git a/lib/src/ui/page_indicator_buttons.dart b/lib/src/ui/page_indicator_buttons.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:intro_views_flutter/src/constants/constants.dart';
+import 'package:intro_views_flutter/src/helpers/constants.dart';
 import 'package:intro_views_flutter/src/models/page_button_view_model.dart';
 
 /// Skip, Next, and Back button class.
diff --git a/lib/src/ui/pager_indicator.dart b/lib/src/ui/pager_indicator.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:intro_views_flutter/src/constants/constants.dart';
+import 'package:intro_views_flutter/src/helpers/constants.dart';
+import 'package:intro_views_flutter/src/helpers/extensions.dart';
 import 'package:intro_views_flutter/src/models/page_bubble_view_model.dart';
 import 'package:intro_views_flutter/src/models/pager_indicator_view_model.dart';
 import 'package:intro_views_flutter/src/ui/page_bubble.dart';
@@ -16,8 +17,14 @@ class PagerIndicator extends StatelessWidget {
   Widget build(BuildContext context) {
     // extracting page bubble information from page view model
     final bubbles = <PageBubble>[];
+    final numOfPages = viewModel.pages.length;
 
-    for (var i = 0; i < viewModel.pages.length; i++) {
+    // calculates the width of the bubble to avoid the overflowing render issue #96
+    final bubbleWidth = BUBBLE_WIDTH * numOfPages > context.screenWidth
+        ? (context.screenWidth / numOfPages)
+        : BUBBLE_WIDTH;
+
+    for (var i = 0; i < numOfPages; i++) {
       final page = viewModel.pages[i];
 
       // calculating percent active
@@ -41,6 +48,7 @@ class PagerIndicator extends StatelessWidget {
 
       // adding to the list
       bubbles.add(PageBubble(
+        width: bubbleWidth,
         viewModel: PageBubbleViewModel(
           iconAssetPath: page.iconImageAssetPath,
           iconColor: page.iconColor,
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: intro_views_flutter
 description: A Flutter package for simple material design app intro screens with some cool animations.
-version: 3.1.1
+version: 3.2.0
 homepage: https://github.com/aagarwal1012/IntroViews-Flutter
 
 environment:
diff --git a/test/widget_test.dart b/test/widget_test.dart
@@ -6,6 +6,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:intro_views_flutter/intro_views_flutter.dart';
 
 // ignore: avoid_relative_lib_imports
 import '../example/lib/main.dart';
@@ -133,4 +134,46 @@ void main() {
 
     expect(find.byKey(const Key('Portrait Page')), findsWidgets);
   });
+
+  testWidgets('should throw an assert if pages list is empty', (
+    WidgetTester tester,
+  ) async {
+    final pages = <PageViewModel>[];
+
+    await expectLater(
+      () async => await tester.pumpWidget(
+        IntroViewsFlutter(pages),
+      ),
+      throwsA(
+        isAssertionError.having(
+          (AssertionError error) => error.message,
+          'message',
+          contains("At least one 'PageViewModel' item"),
+        ),
+      ),
+    );
+  });
+
+  testWidgets('should not overflow if many bubbles', (
+    WidgetTester tester,
+  ) async {
+    final pages = List.generate(
+      15,
+      (index) => PageViewModel(
+        pageColor: const Color(0xFF03A9F4),
+        title: Text('$index'),
+      ),
+    );
+
+    tester.binding.window.physicalSizeTestValue = const Size(500, 800);
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Builder(
+          builder: (_) => IntroViewsFlutter(pages),
+        ),
+      ),
+    );
+
+    expect(tester.takeException(), isNull);
+  });
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import 'package:intro_views_flutter/src/constants/constants.dart';`
	`1`	`+import 'package:intro_views_flutter/src/helpers/constants.dart';`
`2`	`2`
`3`	`3`	`/// This is view model for the skip and done buttons.`
`4`	`4`	`class PageButtonViewModel {`