docs: update README.md and example

mkobuolys · Oct 18, 2023 · 4eaaec2 · 4eaaec2
1 parent e9898e9
commit 4eaaec2
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 54 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # NEXT
 
 - feat: add an optional custom widget to the footer
+- feat: support for gradient progress indicator
 
 # 0.6.1
 

diff --git a/README.md b/README.md
@@ -72,14 +72,11 @@ FlutterDeckApp(
     ),
     footer: FlutterDeckFooterConfiguration(
       showSlideNumbers: true,
-      showSocialHandle: true,
-      widget: _MyCustomFooter(),
+      widget: FlutterLogo(),
     ),
     header: FlutterDeckHeaderConfiguration(
       showHeader: false,
     ),
-    showProgress: false,
-    transition: FlutterDeckTransition.fade(),
     progressIndicator: FlutterDeckProgressIndicator.gradient(
       gradient: LinearGradient(
         begin: Alignment.topLeft,
@@ -88,6 +85,7 @@ FlutterDeckApp(
       ),
       backgroundColor: Colors.black,
     ),
+    transition: FlutterDeckTransition.fade(),
   ),
   <...>
 );
@@ -193,6 +191,39 @@ class BlankSlide extends FlutterDeckSlideWidget {
 
 ![Blank slide example](https://github.com/mkobuolys/flutter_deck/blob/main/images/templates/blank.png?raw=true)
 
+### Big fact slide
+
+To create a big fact slide, use the `FlutterDeckSlide.bigFact` constructor. It is responsible for rendering the title (fact) with the description (subtitle) below it.
+
+```dart
+class BigFactSlide extends FlutterDeckSlideWidget {
+  const BigFactSlide()
+      : super(
+          configuration: const FlutterDeckSlideConfiguration(
+            route: '/big-fact',
+            header: FlutterDeckHeaderConfiguration(
+              title: 'Big fact slide template',
+            ),
+          ),
+        );
+
+  @override
+  FlutterDeckSlide build(BuildContext context) {
+    return FlutterDeckSlide.bigFact(
+      title: '100%',
+      subtitle: 'The test coverage value that flutter_deck will probably never achieve',
+      theme: FlutterDeckTheme.of(context).copyWith(
+        bigFactSlideTheme: const FlutterDeckBigFactSlideThemeData(
+          titleTextStyle: TextStyle(color: Colors.amber),
+        ),
+      ),
+    );
+  }
+}
+```
+
+![Big fact slide example](https://github.com/mkobuolys/flutter_deck/blob/main/images/templates/big_fact.png?raw=true)
+
 ### Image slide
 
 To create an image slide, use the `FlutterDeckSlide.image` constructor. It is responsible for rendering the default header and footer of the slide deck, and rendering the image using the provided `imageBuilder`.
@@ -321,40 +352,6 @@ class CustomSlide extends FlutterDeckSlideWidget {
 }
 ```
 
-### Big fact slide
-
-To create a big fact slide, use the `FlutterDeckSlide.bigFact` constructor. It is responsible for rendering the title (fact) with the description (subtitle) below it.
-
-```dart
-class BigFactSlide extends FlutterDeckSlideWidget {
-  const BigFactSlide()
-      : super(
-          configuration: const FlutterDeckSlideConfiguration(
-            route: '/big-fact',
-            header: FlutterDeckHeaderConfiguration(
-              title: 'Big fact slide template',
-            ),
-          ),
-        );
-
-  @override
-  FlutterDeckSlide build(BuildContext context) {
-    return FlutterDeckSlide.bigFact(
-      title: '100%',
-      subtitle:
-          'The test coverage value that flutter_deck will probably never achieve',
-      theme: FlutterDeckTheme.of(context).copyWith(
-        bigFactSlideTheme: const FlutterDeckBigFactSlideThemeData(
-          titleTextStyle: TextStyle(color: Colors.amber),
-        ),
-      ),
-    );
-  }
-}
-```
-
-![Big fact slide example](https://github.com/mkobuolys/flutter_deck/blob/main/images/templates/big_fact.png?raw=true)
-
 ## Theming
 
 You can customize the theme of your slide deck by providing a `FlutterDeckThemeData` to the `FlutterDeckApp` widget:

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -41,8 +41,6 @@ class FlutterDeckExample extends StatelessWidget {
         header: FlutterDeckHeaderConfiguration(
           showHeader: false,
         ),
-        // Use a custom transition between slides.
-        transition: FlutterDeckTransition.fade(),
         // Show progress indicator with specifc gradient and background color.
         progressIndicator: FlutterDeckProgressIndicator.gradient(
           gradient: LinearGradient(
@@ -52,6 +50,8 @@ class FlutterDeckExample extends StatelessWidget {
           ),
           backgroundColor: Colors.black,
         ),
+        // Use a custom transition between slides.
+        transition: FlutterDeckTransition.fade(),
       ),
       // You can also define your own light...
       lightTheme: FlutterDeckThemeData.fromTheme(

diff --git a/lib/src/flutter_deck_configuration.dart b/lib/src/flutter_deck_configuration.dart
@@ -17,9 +17,9 @@ class FlutterDeckConfiguration {
     this.controls = const FlutterDeckControlsConfiguration(),
     this.footer = const FlutterDeckFooterConfiguration(showFooter: false),
     this.header = const FlutterDeckHeaderConfiguration(showHeader: false),
-    this.transition = const FlutterDeckTransition.none(),
     this.progressIndicator = const FlutterDeckProgressIndicator.solid(),
     this.showProgress = true,
+    this.transition = const FlutterDeckTransition.none(),
   });
 
   /// The background configuration for the slide deck. By default, the
@@ -50,20 +50,21 @@ class FlutterDeckConfiguration {
   /// is not shown.
   final FlutterDeckHeaderConfiguration header;
 
-  /// The transition to use when navigating between slides.
-  ///
-  /// The default transition is [FlutterDeckTransition.none].
-  final FlutterDeckTransition transition;
-
   /// The progress indicator to show in the slide deck.
-  /// By default, the progress indicator is [FlutterDeckProgressIndicator.solid]
-  /// with a primary color from the theme.
+  ///
+  /// The default is [FlutterDeckProgressIndicator.solid] with a primary color
+  /// from the theme.
   final FlutterDeckProgressIndicator progressIndicator;
 
   /// Whether to show the presentation progress or not.
   ///
   /// The default is true.
   final bool showProgress;
+
+  /// The transition to use when navigating between slides.
+  ///
+  /// The default transition is [FlutterDeckTransition.none].
+  final FlutterDeckTransition transition;
 }
 
 /// The configuration for a slide.

diff --git a/lib/src/widgets/flutter_deck_progress_indicator.dart b/lib/src/widgets/flutter_deck_progress_indicator.dart
@@ -92,25 +92,24 @@ class _FlutterDeckProgressIndicatorState
 
   @override
   Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
     final isGradient = widget.gradient != null;
-    
+
     return LayoutBuilder(
       builder: (context, constraints) {
         final maxWidth = constraints.maxWidth;
         final indicatorWidth = maxWidth * _progress;
 
         return Container(
-          height: 8,
+          height: 4,
           width: maxWidth,
-          color: widget.backgroundColor ?? Colors.grey,
+          color: widget.backgroundColor ?? colorScheme.background,
           child: Align(
             alignment: Alignment.centerLeft,
             child: Container(
               width: indicatorWidth,
               decoration: BoxDecoration(
-                color: isGradient
-                    ? null
-                    : widget.color ?? Theme.of(context).primaryColor,
+                color: !isGradient ? widget.color ?? colorScheme.primary : null,
                 gradient: widget.gradient,
               ),
             ),