Become a Member Feature Implementation

[davidetarsi]

This pull request introduces a new feature to the application settings called "Become a Member", enabling users to select a membership price and navigate to the Play Store/App Store for completing the payment. Below is a detailed breakdown of the implementation and the steps required for configuration.

Feature Overview

• "Become a Member" Button: Added to the settings screen. When tapped, it opens a Modal Bottom Sheet.
• Slider for Price Selection: A slider ranging from 10 to 25, increasing in intervals of 5.
• Dynamic Logo Opacity: The logo becomes progressively darker as the slider value increases.
• Play Store/App Store Navigation: Upon tapping the "Become a Member" button, the app navigates to the appropriate store for payment based on the selected slider value.

Technical Implementation Details

Modal Bottom Sheet (subscription_bottom_sheet.dart)

• Defined in the file subscription_bottom_sheet.dart.
• Displays a slider widget that dynamically updates the selected price.
• Manages the slider value using a simple Riverpod provider for state management.

Slider Configuration

• 1. Ranges from 10 to 25, increasing by steps of 5.
• 2. Adjusts the displayed logo opacity based on the selected slider value.

Store Navigation

• Clicking the "Become a Member" button triggers navigation to the Play Store or App Store.
• The navigation function uses a mapping between slider values and pricing strings to determine the correct product ID.

Play Store/App Store Configuration Requirements

To support this feature, it is necessary to configure pricing information on the Play Store/App Store:

• In the Play Store Console, create an array of pricing options matching the slider values.
• These prices should correspond to the string constants stored in const.dart under the list prices.
• Ensure that the strings in this list are mapped to valid product IDs registered in the app's store configuration.

dart

const List<String> prices = ['price_10', 'price_15', 'price_20', 'price_25'];

Code Organization and State Management

• subscription_bottom_sheet.dart: Handles UI and user interactions.
• const.dart: Stores the array of price strings to be mapped to Play Store/App Store pricing options.
• Riverpod Provider: Manages the state of the slider value to ensure reactive UI updates.

Testing and Validation

To validate the feature, follow these steps:

• Open the settings and tap the "Become a Member" button.
• Verify that the modal bottom sheet appears with the correct slider range.
• Adjust the slider and confirm that the logo changes opacity as expected.
• Tap the "Become a Member" button and ensure redirection to the appropriate Play Store/App Store payment page based on the selected slider value.

This pull request introduces a well-defined and user-friendly membership selection process while ensuring compatibility with Play Store/App Store pricing requirements.