Payment Page with Flutter: Drive Your Users to Purchase

Subscription and payment pages are important to drive people to purchase. There are different types of designs out there, also Apple has a guideline for us to implement a good Payment page.

I realized that I’ve been developing similar payment pages from scratch. Then, I decided to wrap the page in a package with a certain customization room.


Public Repo:

Paywall Designs in Package

PurchasePayWall Package

PayWall Factory
Import the main file for the factory class

You can customize the PayWall page by using ThemeData. Customizable parts are:

  • Font by textTheme.fontFamily
  • Background color by themeData.backgroundColor
  • Foreground color by themeData.accentColor

Customization details may be different for each PayWall class. Check the specific PayWall for further details.

Design mockups:


Import necessary model classes

Create the SimpleWall by using the factory method. The necessary part is purchase item callbacks, do not pass the necessary functions to initiate payment operation.

Here is the example implementation that shows only a snackbar when a button tap.

Prepare the BasicWallModel with necessary customization:

Don’t forget to put your privacy policy and terms of use URLs

You can also remove the back arrow by using “bool showBackIcon” value and you can override back icon tapped behavior by using Function backIconTapped” value in BasicWallModel.

Lastly, you can use the SimpleWall Widget any way you want such as navigating to it as a new page or just using it as a widget in a page with more control.

If you have a problem with Navigation, check your context if it is the right one. Here in my example the tricky part is a need for a Builder:

Further Customization

  • themeData.backgroundColor for background color
  • themeData.accentColor for the rounded foreground color
  • themeData.accentColor for PageView dot indicator selectedDotColor
  • themeData.accentColor for PageView dot indicator borderColor
  • themeData.primaryColor for PageView dot indicator dotColor
  • themeData.textTheme.headline1.fontFamily for big title
  • themeData.textTheme.subtitle1.fontFamily for WallDescription.title
  • themeData.textTheme.bodyText1.fontFamily for WallDescription.description
  • themeData.textTheme.bodyText2.fontFamily for trial indicator text
  • themeData.textTheme.button.fontFamily for button text
  • themeData.textTheme.bodyText2.fontFamily for button sub-info disclaimer text
  • themeData.textTheme.bodyText2.fontFamily for bottom info

Future of PurchasePaywall

Please leave your comments and request designs to support the creation process.

Software Engineer, Growth & Gamification Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store