Bug: Can't override button style shape

[lukengda]

It is currently impossible to change the shape of intro_buttons using baseBtnStyle or nextStyle (same applies for all style attributes).

Describe the bug

This is due to the fact that ButtonStyle.merge from Flutter takes precedence on the caller objects non-null values over the style argument and the merge order in the intro_button.dart implementation: https://github.com/Pyozer/introduction_screen/blob/master/lib/src/ui/intro_button.dart#L26C1-L30C26

          style: TextButton.styleFrom(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),
          ).merge(style),

To Reproduce
Steps to reproduce the behavior:

1. Create an IntroductionScreen instance with the following BaseBtnStyle:

      baseBtnStyle: TextButton.styleFrom(
        foregroundColor: Colors.red,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
          side: BorderSide(),
        ),
      ),

2. See that the text color has changed to red but the button has no border applied.

Expected behavior

I expect to be able to override the shape of buttons using ButtonStyle.

I see two options in solving this:

a) the most backwards-compatible solution would be to still merge the styles but change the order so that the custom style overrules the default style:

--- a/lib/src/ui/intro_button.dart
+++ b/lib/src/ui/intro_button.dart
@@ -16,6 +16,11 @@ class IntroButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final ButtonStyle defaultStyle = TextButton.styleFrom(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8.0),
+      ),
+    );
     return MergeSemantics(
       child: Semantics(
         label: semanticLabel,
@@ -23,11 +28,7 @@ class IntroButton extends StatelessWidget {
         child: TextButton(
           onPressed: onPressed,
           child: child,
-          style: TextButton.styleFrom(
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(8.0),
-            ),
-          ).merge(style),
+          style: style?.merge(defaultStyle) ?? defaultStyle,
         ),
       ),
     );

b) the more straight-forward solution would be to only apply the default shape if no style is provided:

@@ -23,11 +23,12 @@ class IntroButton extends StatelessWidget {
         child: TextButton(
           onPressed: onPressed,
           child: child,
-          style: TextButton.styleFrom(
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(8.0),
-            ),
-          ).merge(style),
+          style: style ??
+              TextButton.styleFrom(
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(8.0),
+                ),
+              ),
         ),
       ),
     );

Screenshots

Here you can see screenshots of the example how to reproduce and that the border is applied with either of the proposed changes:

Current:

With proposed changes applied:

Smartphone (please complete the following information):

• Device: should apply to all devices, shown on Pixel 6 or iPhone 15
• OS: n/a
• Version 3.1.14

Additional context
Add any other context about the problem here.

[Pyozer]

Release 3.1.15 available ;)