How to Set Up a Digital Magazine Platform with Subscriber Access in FlutterFlow

Create an issues collection with fields: title (String), coverImageUrl (String), publishedDate (Timestamp), issueNumber (Integer), status (String: published or upcoming). Under each issue, create an articles subcollection with fields: title (String), body (String for rich text content), authorName (String), imageUrls (String Array), pageNumber (Integer), isFreePreview (Boolean). The isFreePreview flag controls which articles non-subscribers can read. Set issueNumber as an auto-incrementing value managed by your backend to keep issues in order.

Create a MagazineHomePage. Add a Text widget for 'Latest Issues' as a heading. Below it, add a ListView set to horizontal scroll direction with a fixed height of 250. Add a Backend Query on the ListView: Query Collection on issues, ordered by publishedDate descending, filtered by status equals 'published'. For each child, create a Container with the coverImageUrl as background image, rounded corners, and a shadow. Overlay a Column at the bottom with the issue title and date in white text on a dark gradient. Tap action navigates to an IssueDetailPage passing the issue document reference as a Route Parameter.

Create an IssueDetailPage with Route Parameter issueRef (Document Reference). Display the cover image at the top as a large hero Container. Below it, add a ListView with a Backend Query on articles subcollection under the passed issue reference, ordered by pageNumber ascending. Each row shows the article title, authorName, pageNumber, and a lock Icon for non-free articles. Use Conditional Visibility on the lock icon: visible when isFreePreview is false. Tap action on each row checks subscription status before navigating to the reader.

Create an ArticleReaderPage with Route Parameters: issueRef and startPageNumber. Add a PageView widget that fills the screen. Bind it to a Backend Query on the articles subcollection ordered by pageNumber ascending. Each page renders the article content: a title Text widget at the top, the authorName below it, the body content in a scrollable Column, and article images displayed inline. Set the PageView initial page to the startPageNumber minus one so opening from the table of contents jumps to the correct article. Add left and right swipe indicators for page navigation.

On the user document, add fields: subscriptionTier (String: free or subscriber) and subscriptionExpiresAt (Timestamp). Create a Cloud Function that creates a Stripe Checkout Session in subscription mode with your magazine price ID. In FlutterFlow, add a Subscribe button that calls this Cloud Function via an API Call and opens the returned checkout URL in a WebView. Create a second Cloud Function as a Stripe webhook handler that listens for checkout.session.completed and customer.subscription.updated events, updating the user document with the correct tier and expiration date. On the ArticleReaderPage, add an On Page Load action: if isFreePreview is false AND currentUser subscriptionTier is not subscriber, show a paywall overlay Container with blur background, a lock icon, subscription benefits text, and a Subscribe CTA button.

To prevent memory issues with large issues containing many articles, configure the PageView to only keep adjacent pages in memory. In the Backend Query on the articles subcollection, limit the initial fetch to the current page plus two pages on each side. Add pagination to load more articles as the user swipes further into the issue. For images within articles, use the Image widget with BoxFit.contain and enable caching. Add a loading indicator (CircularProgressIndicator) as a placeholder while article content loads. This ensures smooth performance even for issues with 30 or more articles.