Merge pull request #16 from Iconica-Development/3.0.0

feat: add default styling

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 3.0.0
+
+* Update default styling
+* Add default introduction
+
 ## 2.1.0
 
 * Upgrade dependencies

packages/flutter_introduction/example/lib/main.dart

@@ -39,20 +39,20 @@ class _MyHomePageState extends State<MyHomePage> {
         body: Introduction(
           options: IntroductionOptions(
             pages: [
-              IntroductionPage(
+              const IntroductionPage(
-                title: const Text('First page'),
+                title: Text('First page'),
-                text: const Text('Wow a page'),
+                text: Text('Wow a page'),
-                graphic: const FlutterLogo(),
+                graphic: FlutterLogo(),
               ),
-              IntroductionPage(
+              const IntroductionPage(
-                title: const Text('Second page'),
+                title: Text('Second page'),
-                text: const Text('Another page'),
+                text: Text('Another page'),
-                graphic: const FlutterLogo(),
+                graphic: FlutterLogo(),
               ),
-              IntroductionPage(
+              const IntroductionPage(
-                title: const Text('Third page'),
+                title: Text('Third page'),
-                text: const Text('The final page of this app'),
+                text: Text('The final page of this app'),
-                graphic: const FlutterLogo(),
+                graphic: FlutterLogo(),
               ),
             ],
             introductionTranslations: const IntroductionTranslations(

packages/flutter_introduction/pubspec.yaml

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

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: 2.1.0
+version: 3.0.0
 publish_to: none
 
 environment:
@@ -15,12 +15,12 @@ dependencies:
   flutter_introduction_widget:
     git:
       url: https://github.com/Iconica-Development/flutter_introduction
-      ref: 2.1.0
+      ref: 3.0.0
       path: packages/flutter_introduction_widget
   flutter_introduction_service:
     git:
       url: https://github.com/Iconica-Development/flutter_introduction
-      ref: 2.1.0
+      ref: 3.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: 2.1.0
+version: 3.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: 2.1.0
+version: 3.0.0
 publish_to: none
 
 environment:
@@ -13,7 +13,7 @@ dependencies:
   flutter_introduction_interface:
     git: 
       url: https://github.com/Iconica-Development/flutter_introduction
-      ref: 2.1.0
+      ref: 3.0.0
       path: packages/flutter_introduction_interface
   
 dev_dependencies:

packages/flutter_introduction_shared_preferences/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_introduction_shared_preferences
 description: A new Flutter package project.
-version: 2.1.0
+version: 3.0.0
 publish_to: none
 
 environment:
@@ -13,7 +13,7 @@ dependencies:
   flutter_introduction_interface: 
     git: 
       url: https://github.com/Iconica-Development/flutter_introduction
-      ref: 2.1.0
+      ref: 3.0.0
       path: packages/flutter_introduction_interface
   shared_preferences: any
 

packages/flutter_introduction_widget/example/lib/main.dart

@@ -32,29 +32,29 @@ class MyApp extends StatelessWidget {
       home: IntroductionScreen(
         options: IntroductionOptions(
           pages: [
-            IntroductionPage(
+            const IntroductionPage(
-              title: const Text('Basic Page'),
+              title: Text('Basic Page'),
-              text: const Text(
+              text: Text(
                 'A page with some text and a widget in the middle.',
               ),
-              graphic: const FlutterLogo(size: 100),
+              graphic: FlutterLogo(size: 100),
             ),
-            IntroductionPage(
+            const IntroductionPage(
-              title: const Text('Layout Shift'),
+              title: Text('Layout Shift'),
-              text: const Text(
+              text: Text(
                 'You can change the layout of a page to mix things up.',
               ),
-              graphic: const FlutterLogo(size: 100),
+              graphic: FlutterLogo(size: 100),
               layoutStyle: IntroductionLayoutStyle.imageTop,
             ),
-            IntroductionPage(
+            const IntroductionPage(
-              title: const Text(
+              title: Text(
                 'Decoration',
                 style: TextStyle(
                   color: Colors.white,
                 ),
               ),
-              decoration: const BoxDecoration(
+              decoration: BoxDecoration(
                 gradient: LinearGradient(
                   begin: Alignment.topRight,
                   end: Alignment.bottomLeft,
@@ -66,24 +66,24 @@ class MyApp extends StatelessWidget {
                   ],
                 ),
               ),
-              text: const Text(
+              text: Text(
                 'Add a Decoration to make a custom background, like a LinearGradient',
                 style: TextStyle(
                   color: Colors.white,
                 ),
               ),
-              graphic: const FlutterLogo(
+              graphic: FlutterLogo(
                 size: 100,
               ),
             ),
-            IntroductionPage(
+            const IntroductionPage(
-              title: const Text(
+              title: Text(
                 'Background Image',
               ),
-              text: const Text(
+              text: Text(
                 'Add a Decoration with a DecorationImage, to add an background image',
               ),
-              decoration: const BoxDecoration(
+              decoration: BoxDecoration(
                 image: DecorationImage(
                   fit: BoxFit.cover,
                   image: AssetImage(

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

@@ -0,0 +1,115 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_introduction_widget/flutter_introduction_widget.dart';
+
+const List<IntroductionPage> defaultIntroductionPages = [
+  IntroductionPage(
+    decoration: BoxDecoration(
+      color: Color(0xffFAF9F6),
+    ),
+    title: Column(
+      children: [
+        SizedBox(height: 100),
+        Text(
+          'welcome to iconinstagram',
+          style: TextStyle(
+            color: Color(0xff71C6D1),
+            fontSize: 24,
+            fontWeight: FontWeight.w700,
+          ),
+        ),
+        SizedBox(height: 6),
+        Text(
+          'Welcome to the world of Instagram, where creativity'
+          ' knows no bounds and connections are made'
+          ' through captivating visuals.',
+          style: TextStyle(
+            fontSize: 16,
+            fontWeight: FontWeight.w400,
+          ),
+          textAlign: TextAlign.center,
+        ),
+      ],
+    ),
+    graphic: Image(
+      image: AssetImage(
+        'assets/first.png',
+        package: 'flutter_introduction_widget',
+      ),
+    ),
+    text: Text(''),
+  ),
+  IntroductionPage(
+    decoration: BoxDecoration(
+      color: Color(0xffFAF9F6),
+    ),
+    title: Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        SizedBox(height: 100),
+        Text(
+          'discover iconinstagram',
+          style: TextStyle(
+            color: Color(0xff71C6D1),
+            fontSize: 24,
+            fontWeight: FontWeight.w700,
+          ),
+        ),
+        SizedBox(height: 6),
+        Text(
+          'Dive into the vibrant world of'
+          ' Instagram and discover endless possibilities.'
+          ' From stunning photography to engaging videos,'
+          ' Instagram offers a diverse range of content to explore and enjoy.',
+          style: TextStyle(
+            fontSize: 16,
+            fontWeight: FontWeight.w400,
+          ),
+          textAlign: TextAlign.center,
+        ),
+      ],
+    ),
+    graphic: Image(
+      image: AssetImage(
+        'assets/second.png',
+        package: 'flutter_introduction_widget',
+      ),
+    ),
+    text: Text(''),
+  ),
+  IntroductionPage(
+    decoration: BoxDecoration(
+      color: Color(0xffFAF9F6),
+    ),
+    title: Column(
+      children: [
+        SizedBox(height: 100),
+        Text(
+          'elevate your experience',
+          style: TextStyle(
+            color: Color(0xff71C6D1),
+            fontSize: 24,
+            fontWeight: FontWeight.w700,
+          ),
+        ),
+        SizedBox(height: 6),
+        Text(
+          'Whether promoting your business, or connecting'
+          ' with friends and family, Instagram provides the'
+          ' tools and platform to make your voice heard.',
+          style: TextStyle(
+            fontSize: 16,
+            fontWeight: FontWeight.w400,
+          ),
+          textAlign: TextAlign.center,
+        ),
+      ],
+    ),
+    graphic: Image(
+      image: AssetImage(
+        'assets/third.png',
+        package: 'flutter_introduction_widget',
+      ),
+    ),
+    text: Text(''),
+  ),
+];

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

@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import 'package:flutter/material.dart';
+import 'package:flutter_introduction_widget/src/config/default_introduction_pages.dart';
 
 enum IntroductionScreenMode { showNever, showAlways, showOnce }
 
@@ -42,7 +43,7 @@ class IntroductionPage {
   ///
   /// The [background] is fully optional and if not provided will show the
   /// [ThemeData.colorScheme.background] as default.
-  IntroductionPage({
+  const IntroductionPage({
     this.title,
     this.text,
     this.graphic,
@@ -60,11 +61,11 @@ class IntroductionOptions {
   const IntroductionOptions({
     this.introductionTranslations = const IntroductionTranslations(),
     this.introductionButtonTextstyles = const IntroductionButtonTextstyles(),
-    this.indicatorMode = IndicatorMode.dash,
+    this.indicatorMode = IndicatorMode.dot,
     this.indicatorBuilder,
     this.layoutStyle = IntroductionLayoutStyle.imageCenter,
-    this.pages = const [],
+    this.pages = defaultIntroductionPages,
-    this.buttonMode = IntroductionScreenButtonMode.disabled,
+    this.buttonMode = IntroductionScreenButtonMode.text,
     this.tapEnabled = false,
     this.mode = IntroductionScreenMode.showNever,
     this.textAlign = TextAlign.center,
@@ -248,9 +249,9 @@ class IntroductionOptions {
 class IntroductionTranslations {
   const IntroductionTranslations({
     this.skipButton = 'skip',
-    this.nextButton = 'next',
+    this.nextButton = 'Next',
-    this.previousButton = 'previous',
+    this.previousButton = 'Previous',
-    this.finishButton = 'finish',
+    this.finishButton = 'Get Started',
   });
   final String skipButton;
   final String nextButton;
@@ -260,10 +261,22 @@ class IntroductionTranslations {
 
 class IntroductionButtonTextstyles {
   const IntroductionButtonTextstyles({
-    this.skipButtonStyle,
+    this.skipButtonStyle = const TextStyle(
-    this.nextButtonStyle,
+      fontSize: 16,
-    this.previousButtonStyle,
+      fontWeight: FontWeight.w500,
-    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

@@ -351,12 +351,28 @@ class IntroductionTwoButtons extends StatelessWidget {
                   ),
                   IntroductionButtonType.previous,
                 ) ??
-                TextButton(
+                InkWell(
-                  onPressed: _previous,
+                  onTap: _previous,
-                  child: Text(
+                  child: Container(
-                    translations.previousButton,
+                    width: 180,
-                    style: options
+                    decoration: BoxDecoration(
-                        .introductionButtonTextstyles.previousButtonStyle,
+                      borderRadius: BorderRadius.circular(20),
+                      border: Border.all(
+                        color: const Color(
+                          0xff979797,
+                        ),
+                      ),
+                    ),
+                    child: Center(
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(vertical: 2.0),
+                        child: Text(
+                          translations.previousButton,
+                          style: options
+                              .introductionButtonTextstyles.previousButtonStyle,
+                        ),
+                      ),
+                    ),
                   ),
                 ),
           ] else
@@ -371,11 +387,28 @@ class IntroductionTwoButtons extends StatelessWidget {
                   ),
                   IntroductionButtonType.next,
                 ) ??
-                TextButton(
+                InkWell(
-                  onPressed: _next,
+                  onTap: _next,
-                  child: Text(
+                  child: Container(
-                    translations.nextButton,
+                    width: 180,
-                    style: options.introductionButtonTextstyles.nextButtonStyle,
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(20),
+                      border: Border.all(
+                        color: const Color(
+                          0xff979797,
+                        ),
+                      ),
+                    ),
+                    child: Center(
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(vertical: 2.0),
+                        child: Text(
+                          translations.nextButton,
+                          style: options
+                              .introductionButtonTextstyles.nextButtonStyle,
+                        ),
+                      ),
+                    ),
                   ),
                 ),
           ] else if (last) ...[
@@ -391,14 +424,30 @@ class IntroductionTwoButtons extends StatelessWidget {
                   ),
                   IntroductionButtonType.finish,
                 ) ??
-                TextButton(
+                InkWell(
-                  onPressed: () {
+                  onTap: () {
                     onFinish?.call();
                   },
-                  child: Text(
+                  child: Container(
-                    translations.finishButton,
+                    width: 180,
-                    style:
+                    decoration: BoxDecoration(
-                        options.introductionButtonTextstyles.finishButtonStyle,
+                      borderRadius: BorderRadius.circular(20),
+                      border: Border.all(
+                        color: const Color(
+                          0xff979797,
+                        ),
+                      ),
+                    ),
+                    child: Center(
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(vertical: 2.0),
+                        child: Text(
+                          translations.finishButton,
+                          style: options
+                              .introductionButtonTextstyles.finishButtonStyle,
+                        ),
+                      ),
+                    ),
                   ),
                 ),
           ] else ...[
@@ -426,14 +475,30 @@ class IntroductionTwoButtons extends StatelessWidget {
                       ),
                       IntroductionButtonType.finish,
                     ) ??
-                    ElevatedButton(
+                    InkWell(
-                      onPressed: () {
+                      onTap: () {
                         onFinish?.call();
                       },
-                      child: Text(
+                      child: Container(
-                        translations.finishButton,
+                        width: 180,
-                        style: options
+                        decoration: BoxDecoration(
-                            .introductionButtonTextstyles.finishButtonStyle,
+                          borderRadius: BorderRadius.circular(20),
+                          border: Border.all(
+                            color: const Color(
+                              0xff979797,
+                            ),
+                          ),
+                        ),
+                        child: Center(
+                          child: Padding(
+                            padding: const EdgeInsets.symmetric(vertical: 2.0),
+                            child: Text(
+                              translations.finishButton,
+                              style: options.introductionButtonTextstyles
+                                  .finishButtonStyle,
+                            ),
+                          ),
+                        ),
                       ),
                     ),
               ),

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

@@ -63,6 +63,7 @@ class Indicator extends StatelessWidget {
         );
       case IndicatorMode.dash:
         return DashIndicator(
+          color: theme.colorScheme.primary,
           controller: controller,
           selectedColor: theme.colorScheme.primary,
           itemCount: count,

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: 2.1.0
+version: 3.0.0
 homepage: https://github.com/Iconica-Development/flutter_introduction_widget
 
 environment:
@@ -20,3 +20,5 @@ dev_dependencies:
       ref: 6.0.0
 
 flutter:
+  assets:
+    - assets/

pubspec.yaml

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