Question

Close button color

  • 21 January 2024
  • 8 replies
  • 138 views

Badge

Dear RevenueCat, Thank you for the Paywall functionality.

How can I customise the close button color in Swift?


8 replies

Userlevel 2
Badge +5

Hi! That is not something that is currently possible through our Paywall functionality, but I can understand the appeal of being able to customize the color of the close button. I am going to share this improvement internally

Userlevel 2
Badge +5

If you would like to specify the color of the Close button outside of the Paywall functionality, it does use your app’s tint color, so you could specify its color through that as well. Here is the documentation for tintColor.

Userlevel 1
Badge +5

Alternatively you can override it using the SwiftUI modifier:

PaywallView(displayCloseButton: true)
.tintColor(Color.blue)

We’ll add a note for this in the documentation 👍

Badge +4

 @NachoSoto I was about to ask this but for the react native paywall implementation. Is that something we can also override with RN? Thanks

Userlevel 1
Badge +1

@wes_clark @NachoSoto 

I would also like to know how to change the color of the close button in Flutter using 

await RevenueCatUI.presentPaywallIfNeeded(
entitlementIdentifier,
displayCloseButton: true);

 

Badge +1

Any answers on how to change the Close Button in Flutter?

This is very important, depending on the Image being used, the close button cannot be seen, this would cause users to be frustrated.

 

Thanks...

Userlevel 1
Badge +1

@jedipixels Here is an answer I received 10 days ago: https://community.revenuecat.com/sdks-51/close-button-color-in-flutter-paywalls-4271?tid=4271&postid=13767#post13767

Badge +1

Thanks for the link, I am looking forward to it. 

To address my issue I created a Stateless Widget and used ```PaywallView()```

The following is my code just in case it will help someone else with the same issue.

class Paywall extends StatelessWidget {
const Paywall({super.key});

static const String route = '/paywall';

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
automaticallyImplyLeading: false,
actions: [
IconButton.filledTonal(
onPressed: () => Navigator.of(context).pop(),
icon: const Icon(Icons.close),
style: ButtonStyle(
foregroundColor: MaterialStatePropertyAll(ThemeColors.white),
backgroundColor: MaterialStatePropertyAll(
Theme.of(context).primaryColor.withOpacity(0.4)),
),
),
],
),
extendBodyBehindAppBar: true,
body: SafeArea(
top: false,
child: PaywallView(
// Optional Offering object obtained through getOfferings
// offering: offering,
onRestoreCompleted: (CustomerInfo customerInfo) {
// Optional listener. Called when a restore has been completed.
// This may be called even if no entitlements have been granted.
},
onDismiss: () {
// Dismiss the paywall, i.e. remove the view, navigate to another screen, etc.
// Will be called when the close button is pressed (if enabled) or when a purchase succeeds.
Navigator.of(context).pop();
},
),
),
);
}
}

 

Reply