Merge pull request #20 from Iconica-Development/bugfix/default_style

fix: default styling

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 4.0.0
+
+* Added Buildcontext to the pages parameter.
+* Added `dotColor` so the default can be changed.
+* Changed the default `pages` to include theme.
+
 ## 3.1.0
 
 * Introduction now uses `IntroductionScreenMode` to determine how often the introductions should be shown

packages/flutter_introduction/example/lib/main.dart

@@ -38,7 +38,7 @@ class _MyHomePageState extends State<MyHomePage> {
   Widget build(BuildContext context) => Scaffold(
         body: Introduction(
           options: IntroductionOptions(
-            pages: [
+            pages: (context) => [
               const IntroductionPage(
                 title: Text('First page'),
                 text: Text('Wow a page'),

packages/flutter_introduction/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_introduction
 description: Combined Package of Flutter Introduction Widget and Flutter Introduction Service
-version: 3.1.0
+version: 4.0.0
 publish_to: none
 
 environment:
@@ -13,12 +13,12 @@ dependencies:
   flutter_introduction_widget:
     git:
       url: https://github.com/Iconica-Development/flutter_introduction
-      ref: 3.1.0
+      ref: 4.0.0
       path: packages/flutter_introduction_widget
   flutter_introduction_service:
     git:
       url: https://github.com/Iconica-Development/flutter_introduction
-      ref: 3.1.0
+      ref: 4.0.0
       path: packages/flutter_introduction_service
 
 dev_dependencies:

packages/flutter_introduction_firebase/lib/src/introduction_widget.dart

@@ -115,7 +115,7 @@ class _IntroductionState extends State<IntroductionFirebase> {
                   snapshot.data is List<IntroductionPageData>) {
                 return IntroductionScreen(
                   options: widget.options.copyWith(
-                    pages: snapshot.data?.map(
+                    pages: (context) => snapshot.data!.map(
                       (e) {
                         var title = e.title.isEmpty
                             ? ''

packages/flutter_introduction_firebase/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_introduction_firebase
 description: Flutter Introduction Page that uses firebase for the pages and some settings
-version: 3.1.0
+version: 4.0.0
 publish_to: none
 
 environment:
@@ -15,12 +15,12 @@ dependencies:
   flutter_introduction_widget:
     git:
       url: https://github.com/Iconica-Development/flutter_introduction
-      ref: 3.1.0
+      ref: 4.0.0
       path: packages/flutter_introduction_widget
   flutter_introduction_service:
     git:
       url: https://github.com/Iconica-Development/flutter_introduction
-      ref: 3.1.0
+      ref: 4.0.0
       path: packages/flutter_introduction_service
 
 dev_dependencies:

packages/flutter_introduction_interface/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_introduction_interface
 description: A new Flutter package project.
-version: 3.1.0
+version: 4.0.0
 publish_to: none
 
 environment:

packages/flutter_introduction_service/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_introduction_service
 description: A new Flutter package project.
-version: 3.1.0
+version: 4.0.0
 publish_to: none
 
 environment:
@@ -13,7 +13,7 @@ dependencies:
   flutter_introduction_interface:
     git: 
       url: https://github.com/Iconica-Development/flutter_introduction
-      ref: 3.1.0
+      ref: 4.0.0
       path: packages/flutter_introduction_interface
   
 dev_dependencies:

packages/flutter_introduction_shared_preferences/pubspec.yaml

@@ -1,10 +1,10 @@
 name: flutter_introduction_shared_preferences
 description: A new Flutter package project.
-version: 3.1.0
+version: 4.0.0
 publish_to: none
 
 environment:
-  sdk: '>=2.18.0 <3.0.0'
+  sdk: ">=2.18.0 <3.0.0"
   flutter: ">=1.17.0"
 
 dependencies:
@@ -13,7 +13,7 @@ dependencies:
   flutter_introduction_interface:
     git:
       url: https://github.com/Iconica-Development/flutter_introduction
-      ref: 3.1.0
+      ref: 4.0.0
       path: packages/flutter_introduction_interface
   shared_preferences: any
 

packages/flutter_introduction_widget/example/lib/main.dart

@@ -31,7 +31,7 @@ class MyApp extends StatelessWidget {
       ),
       home: IntroductionScreen(
         options: IntroductionOptions(
-          pages: [
+          pages: (context) => [
             const IntroductionPage(
               title: Text('Basic Page'),
               text: Text(

packages/flutter_introduction_widget/lib/src/config/default_introduction_pages.dart

@@ -1,19 +1,21 @@
-
 import 'package:flutter/material.dart';
 import 'package:flutter_introduction_widget/flutter_introduction_widget.dart';
 
-const List<IntroductionPage> defaultIntroductionPages = [
+List<IntroductionPage> defaultIntroductionPages(BuildContext context) {
+  var theme = Theme.of(context);
+  return [
     IntroductionPage(
       title: Column(
         children: [
-        SizedBox(height: 50),
+          const SizedBox(height: 50),
           Text(
             'welcome to iconinstagram',
+            style: theme.textTheme.headlineLarge,
           ),
-        SizedBox(height: 6),
+          const SizedBox(height: 6),
         ],
       ),
-    graphic: Image(
+      graphic: const Image(
         image: AssetImage(
           'assets/first.png',
           package: 'flutter_introduction_widget',
@@ -24,17 +26,19 @@ const List<IntroductionPage> defaultIntroductionPages = [
         ' knows no bounds and connections are made'
         ' through captivating visuals.',
         textAlign: TextAlign.center,
+        style: theme.textTheme.bodyMedium,
       ),
     ),
     IntroductionPage(
       title: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-        SizedBox(height: 50),
+          const SizedBox(height: 50),
           Text(
             'discover iconinstagram',
+            style: theme.textTheme.headlineLarge,
           ),
-        SizedBox(height: 6),
+          const SizedBox(height: 6),
         ],
       ),
       text: Text(
@@ -43,8 +47,9 @@ const List<IntroductionPage> defaultIntroductionPages = [
         ' From stunning photography to engaging videos,'
         ' Instagram offers a diverse range of content to explore and enjoy.',
         textAlign: TextAlign.center,
+        style: theme.textTheme.bodyMedium,
       ),
-    graphic: Image(
+      graphic: const Image(
         image: AssetImage(
           'assets/second.png',
           package: 'flutter_introduction_widget',
@@ -54,14 +59,15 @@ const List<IntroductionPage> defaultIntroductionPages = [
     IntroductionPage(
       title: Column(
         children: [
-        SizedBox(height: 50),
+          const SizedBox(height: 50),
           Text(
             'elevate your experience',
+            style: theme.textTheme.headlineLarge,
           ),
-        SizedBox(height: 6),
+          const SizedBox(height: 6),
         ],
       ),
-    graphic: Image(
+      graphic: const Image(
         image: AssetImage(
           'assets/third.png',
           package: 'flutter_introduction_widget',
@@ -72,6 +78,8 @@ const List<IntroductionPage> defaultIntroductionPages = [
         ' with friends and family, Instagram provides the'
         ' tools and platform to make your voice heard.',
         textAlign: TextAlign.center,
+        style: theme.textTheme.bodyMedium,
       ),
     ),
   ];
+}

packages/flutter_introduction_widget/lib/src/config/introduction.dart

@@ -75,6 +75,7 @@ class IntroductionOptions {
     this.controlMode = IntroductionControlMode.previousNextButton,
     this.dotSize = 12,
     this.dotSpacing = 24,
+    this.dotColor,
   }) : assert(
           !(identical(indicatorMode, IndicatorMode.custom) &&
               indicatorBuilder == null),
@@ -95,7 +96,7 @@ class IntroductionOptions {
 
   /// List of introduction pages to set the text, icons or images for the
   /// introduction screens.
-  final List<IntroductionPage> pages;
+  final List<IntroductionPage> Function(BuildContext context) pages;
 
   /// Determines whether the user can tap the screen to go to the next
   /// introduction screen.
@@ -212,9 +213,13 @@ class IntroductionOptions {
   /// The distance between the center of each dot. Default is 24
   final double dotSpacing;
 
+  /// The color of the dots in the indicator. Default is the primary color of
+  /// the theme
+  final Color? dotColor;
+
   IntroductionOptions copyWith({
     IntroductionScreenMode? mode,
-    List<IntroductionPage>? pages,
+    List<IntroductionPage> Function(BuildContext context)? pages,
     bool? tapEnabled,
     IntroductionScreenButtonMode? buttonMode,
     IntroductionLayoutStyle? layoutStyle,
@@ -269,22 +274,10 @@ class IntroductionTranslations {
 
 class IntroductionButtonTextstyles {
   const IntroductionButtonTextstyles({
-    this.skipButtonStyle = const TextStyle(
+    this.skipButtonStyle,
-      fontSize: 16,
+    this.nextButtonStyle,
-      fontWeight: FontWeight.w500,
+    this.previousButtonStyle,
-    ),
+    this.finishButtonStyle,
-    this.nextButtonStyle = const TextStyle(
-      fontSize: 16,
-      fontWeight: FontWeight.w500,
-    ),
-    this.previousButtonStyle = const TextStyle(
-      fontSize: 16,
-      fontWeight: FontWeight.w500,
-    ),
-    this.finishButtonStyle = const TextStyle(
-      fontSize: 16,
-      fontWeight: FontWeight.w500,
-    ),
   });
   final TextStyle? skipButtonStyle;
   final TextStyle? nextButtonStyle;

packages/flutter_introduction_widget/lib/src/types/page_introduction.dart

@@ -77,7 +77,7 @@ class _MultiPageIntroductionScreenState
 
   @override
   Widget build(BuildContext context) {
-    var pages = widget.options.pages;
+    var pages = widget.options.pages.call(context);
     var translations = widget.options.introductionTranslations;
     return Stack(
       children: [
@@ -150,6 +150,7 @@ class _MultiPageIntroductionScreenState
                     AnimatedBuilder(
                       animation: _currentPage,
                       builder: (context, _) => Indicator(
+                        options: widget.options,
                         indicatorBuilder: widget.options.indicatorBuilder,
                         mode: widget.options.indicatorMode,
                         controller: _controller,
@@ -341,6 +342,7 @@ class IntroductionTwoButtons extends StatelessWidget {
     var translations = options.introductionTranslations;
     var showFinishButton =
         options.buttonMode == IntroductionScreenButtonMode.singleFinish;
+    var theme = Theme.of(context);
     return Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
@@ -362,7 +364,8 @@ class IntroductionTwoButtons extends StatelessWidget {
                           Text(
                             translations.previousButton,
                             style: options.introductionButtonTextstyles
-                                .previousButtonStyle,
+                                    .previousButtonStyle ??
+                                theme.textTheme.bodyMedium,
                           ),
                           IntroductionButtonType.previous,
                         ) ??
@@ -384,7 +387,8 @@ class IntroductionTwoButtons extends StatelessWidget {
                                 child: Text(
                                   translations.previousButton,
                                   style: options.introductionButtonTextstyles
-                                      .previousButtonStyle,
+                                          .previousButtonStyle ??
+                                      theme.textTheme.bodyMedium,
                                 ),
                               ),
                             ),
@@ -408,8 +412,9 @@ class IntroductionTwoButtons extends StatelessWidget {
                         _next,
                         Text(
                           translations.nextButton,
-                          style: options
+                          style: options.introductionButtonTextstyles
-                              .introductionButtonTextstyles.nextButtonStyle,
+                                  .nextButtonStyle ??
+                              theme.textTheme.bodyMedium,
                         ),
                         IntroductionButtonType.next,
                       ) ??
@@ -430,7 +435,8 @@ class IntroductionTwoButtons extends StatelessWidget {
                               child: Text(
                                 translations.nextButton,
                                 style: options.introductionButtonTextstyles
-                                    .nextButtonStyle,
+                                        .nextButtonStyle ??
+                                    theme.textTheme.bodyMedium,
                               ),
                             ),
                           ),
@@ -454,8 +460,9 @@ class IntroductionTwoButtons extends StatelessWidget {
                         },
                         Text(
                           translations.finishButton,
-                          style: options
+                          style: options.introductionButtonTextstyles
-                              .introductionButtonTextstyles.finishButtonStyle,
+                                  .finishButtonStyle ??
+                              theme.textTheme.bodyMedium,
                         ),
                         IntroductionButtonType.finish,
                       ) ??
@@ -478,7 +485,8 @@ class IntroductionTwoButtons extends StatelessWidget {
                               child: Text(
                                 translations.finishButton,
                                 style: options.introductionButtonTextstyles
-                                    .finishButtonStyle,
+                                        .finishButtonStyle ??
+                                    theme.textTheme.bodyMedium,
                               ),
                             ),
                           ),
@@ -512,8 +520,9 @@ class IntroductionTwoButtons extends StatelessWidget {
                           },
                           Text(
                             translations.finishButton,
-                            style: options
+                            style: options.introductionButtonTextstyles
-                                .introductionButtonTextstyles.finishButtonStyle,
+                                    .finishButtonStyle ??
+                                theme.textTheme.bodyMedium,
                           ),
                           IntroductionButtonType.finish,
                         ) ??
@@ -537,7 +546,8 @@ class IntroductionTwoButtons extends StatelessWidget {
                                 child: Text(
                                   translations.finishButton,
                                   style: options.introductionButtonTextstyles
-                                      .finishButtonStyle,
+                                          .finishButtonStyle ??
+                                      theme.textTheme.bodyMedium,
                                 ),
                               ),
                             ),

packages/flutter_introduction_widget/lib/src/widgets/indicator.dart

@@ -17,6 +17,7 @@ class Indicator extends StatelessWidget {
     required this.indicatorBuilder,
     required this.dotSize,
     required this.dotSpacing,
+    required this.options,
     super.key,
   }) : assert(
           !(mode == IndicatorMode.custom && indicatorBuilder == null),
@@ -46,6 +47,8 @@ class Indicator extends StatelessWidget {
   /// The distance between the center of each dot.
   final double dotSpacing;
 
+  final IntroductionOptions options;
+
   @override
   Widget build(BuildContext context) {
     var theme = Theme.of(context);
@@ -57,7 +60,7 @@ class Indicator extends StatelessWidget {
           dotSize: dotSize,
           dotSpacing: dotSpacing,
           controller: controller,
-          color: theme.colorScheme.secondary,
+          color: options.dotColor ?? theme.colorScheme.primary,
           itemCount: count,
           onPageSelected: (int page) {
             unawaited(
@@ -73,7 +76,7 @@ class Indicator extends StatelessWidget {
         return DashIndicator(
           color: theme.colorScheme.primary,
           controller: controller,
-          selectedColor: theme.colorScheme.primary,
+          selectedColor: options.dotColor ?? theme.colorScheme.primary,
           itemCount: count,
           onPageSelected: (int page) {
             unawaited(

packages/flutter_introduction_widget/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_introduction_widget
 description: Flutter Introduction Widget for showing a list of introduction pages on a single scrollable page or horizontal pageview
-version: 3.1.0
+version: 4.0.0
 homepage: https://github.com/Iconica-Development/flutter_introduction_widget
 
 environment:

pubspec.yaml

@@ -1,5 +1,5 @@
 name: flutter_introduction_workspace
-version: 3.1.0
+version: 4.0.0
 
 environment:
   sdk: '>=3.1.0 <4.0.0'