Merge pull request #13 from Iconica-Development/feat/background-decoration

add background decoration

Author: freekvandeven

CHANGELOG.md

@@ -1,3 +1,6 @@
+##[1.1.2] - 29 November 2022
+
+*  add custom background to introduction page
 ## [1.1.1] - 20 October 2022
 
 * fix single button mode position and size

example/lib/main.dart

@@ -40,6 +40,17 @@ class MyApp extends StatelessWidget {
             ),
             IntroductionPage(
                 title: const Text('Layout Shift'),
+                decoration: const BoxDecoration(
+                    gradient: LinearGradient(
+                  begin: Alignment.topRight,
+                  end: Alignment.bottomLeft,
+                  colors: [
+                    Colors.yellow,
+                    Colors.red,
+                    Colors.indigo,
+                    Colors.teal,
+                  ],
+                )),
                 text: const Text(
                     'You can change the layout of a page to mix things up.'),
                 graphic: const FlutterLogo(size: 100),

lib/src/config/introduction.dart

@@ -26,6 +26,7 @@ class IntroductionPage {
   final Widget? text;
   final Widget? graphic;
   final ImageProvider? backgroundImage;
+  final Decoration? decoration;
   final IntroductionLayoutStyle? layoutStyle;
 
   /// Creates an introduction page with data used in the introduction screen for
@@ -41,6 +42,7 @@ class IntroductionPage {
     this.text,
     this.graphic,
     this.backgroundImage,
+    this.decoration,
     this.layoutStyle,
   });
 }

lib/src/types/page_introduction.dart

@@ -214,6 +214,7 @@ class ExplainerPage extends StatelessWidget {
   Widget build(BuildContext context) {
     var theme = Theme.of(context);
     return Background(
+      background: page.decoration,
       backgroundImage: page.backgroundImage,
       child: SafeArea(
         child: Column(

lib/src/widgets/background.dart

@@ -6,21 +6,30 @@ import 'package:flutter/material.dart';
 
 class Background extends StatelessWidget {
   const Background({
+    this.background,
     required this.child,
     this.backgroundImage,
     Key? key,
   }) : super(key: key);
 
+  final Decoration? background;
   final Widget child;
   final ImageProvider? backgroundImage;
 
   @override
   Widget build(BuildContext context) {
     var theme = Theme.of(context);
+    var background = this.background ??
+        BoxDecoration(
+          color: theme.backgroundColor,
+        );
+    var size = MediaQuery.of(context).size;
     var backgroundImage = this.backgroundImage;
     if (backgroundImage != null) {
-      return Material(
-        color: theme.backgroundColor,
+      return Container(
+        width: size.width,
+        height: size.height,
+        decoration: background,
         child: DecoratedBox(
           decoration: BoxDecoration(
             image: DecorationImage(
@@ -32,10 +41,11 @@ class Background extends StatelessWidget {
         ),
       );
     } else {
-      return Material(
-        color: theme.backgroundColor,
-        child: child,
-      );
+      return Container(
+          width: size.width,
+          height: size.height,
+          decoration: background,
+          child: child);
     }
   }
 }

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: 1.1.1
+version: 1.1.2
 homepage: https://github.com/Iconica-Development/flutter_introduction_widget
 
 environment: