Mobile apps primarily rely on two monetization strategies: ads and subscriptions. While ads provide free access to users and generate revenue for developers, they often disrupt the user experience and can lead to frustration. This creates an opportunity for developers to offer a premium, ad-free experience through subscriptions—a win-win solution that enhances user satisfaction while generating recurring revenue.

In this guide, we’ll walk you through the process of implementing an ad-free subscription in your Flutter app using RevenueCat. This tutorial has you covered even if you’re new to subscriptions and ads. Things we will be doing in this tutorial:

  • Adding ads to our app using AdMob and google_mobile_ads package
  • Adding subscriptions to our app using RevenueCat and flutter_purchases
  • Configuring ads to be shown only if user is currently not subscribed, after subscribing all ads will be hidden from the users view

By the end of this article you should have a Flutter app for iOS and Android, that is capable of showing ads, displaying a paywall, and after purchasing a subscription from that paywall also able to hide the ads for the subscribed user.

Track ad revenue in RevenueCat

You can now track your AdMob add revenue in Revenuecat and get a complete picture of your revenue. Simply replace your standard AdMob loading calls with the loadAndTrack methods from the RevenueCat SDK. All ad events are tracked automatically. Read more about our new in-app ad revenue in our announcement blog post.

Prerequisites

In this tutorial, we will build a simple Flutter app, for both iOS and Android, that allows the user to subscribe to a monthly subscription which unlocks an ad-free experience in the app. If you have an existing app in which you’re going to implement subscription functionality, you can jump ahead to the next section.

Start by creating a new Flutter project. Follow the steps in this guide if you need a refresher. Open the project in your editor of choice. After that, run:

$ flutter run

Testing in-app purchases is best on a real device, so choose that option from the presented list and check that your app runs without problems.

Set up App Store and Play Store

Before we can move to implementing subscriptions in our app, we need to configure our subscription product for all the platforms we want to target. Since Flutter is a cross-platform framework, it’s a good idea to target both iOS and Android. In both cases we want to configure a single subscription: a monthly recurring subscription for 5 dollars.

Create yourself a RevenueCat account and then follow this guide to connect the App Store and Play store to RevenueCat.

Step 1: Add ads to your Flutter app

Displaying ads in the app can be done with Google AdMob. Using it requires creating an account, create one if you haven’t already. After creating your account, create the new apps in the AdMob dashboard for all the platforms you plan to target.

Next step is to integrate the Google Mobile ADs SDK into a Flutter app. Add google_mobile_ads to the pubspec.yaml file:

# pubspec.yaml
dependencies:
  google_mobile_ads: ^6.0.0

We need to add AdMob App IDs to both the AndroidManifest.xml file (for Android) and the Info.plist file (for iOS) Make the following changes:

\/\/Info.plist
<key>GADApplicationIdentifier<\/key>
<string>your-app-id-here<\/string>

\/\/AndroidManifest.xml
<manifest>
    <application>
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="your-app-id-here"\/>
    <application>
<manifest>

Before we add the code for initializing the ads (and later subscriptions), let’s go over the project structure. Both the subscription and ads logic will be placed in a file called subscription_manager.dart. Create that file inside a services folder and paste the following contents:

import 'package:google_mobile_ads\/google_mobile_ads.dart';
import '..\/config\/app_config.dart';

class SubscriptionManager {
  static const String _bannerAdUnitId = AppConfig.bannerAdUnitId;
  
  static final SubscriptionManager _instance = SubscriptionManager._internal();
  factory SubscriptionManager() => _instance;
  SubscriptionManager._internal();

  bool _isInitialized = false;

  Future<void> initialize() async {
    if (_isInitialized) return;

    try {
      \/\/ Initialize AdMob
      await MobileAds.instance.initialize();
      
      _isInitialized = true;
    } catch (e) {
      print('Failed to initialize services: $e');
    }
  }
}

Next we need to initialize the ads at app startup. In the main.dart add this code to call the code :

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  \/\/ Initialize subscription manager
  await SubscriptionManager().initialize();
  
  runApp(const MyApp());
}

Displaying Banner ads

Create a new file called ad_banner_widget.dart file and paste the contents from below:

import 'package:flutter\/material.dart';
import 'package:google_mobile_ads\/google_mobile_ads.dart';
import '..\/services\/subscription_manager.dart';

class BannerAdWidget extends StatefulWidget {
  const BannerAdWidget({super.key});

  @override
  State<BannerAdWidget> createState() => _BannerAdWidgetState();
}

class _BannerAdWidgetState extends State<BannerAdWidget> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;
  final SubscriptionManager _subscriptionManager = SubscriptionManager();

  @override
  void initState() {
    super.initState();
    _loadAd();
  }

  void _loadAd() {
    _bannerAd = _subscriptionManager.createBannerAd();
    _bannerAd!.load().then((_) {
      if (mounted) {
        setState(() {
          _isLoaded = true;
        });
      }
    }).catchError((error) {
      print('Failed to load banner ad: $error');
    });
  }

  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!_isLoaded || _bannerAd == null) {
      return SizedBox(
        height: MediaQuery.of(context).size.height \/ 3,
        child: const Center(
          child: CircularProgressIndicator(),
        ),
      );
    }

    return Container(
      width: double.infinity,
      height: MediaQuery.of(context).size.height \/ 3,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: Colors.grey.shade300),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: AdWidget(ad: _bannerAd!),
      ),
    );
  }
}

This component will display banner ads between the paragraphs that span the full width and one-third of the height of the page. We also need to add a functionality to the SubscriptionManager for creating banner ads:

import 'package:google_mobile_ads\/google_mobile_ads.dart';
import '..\/config\/app_config.dart';

class SubscriptionManager {
  static const String _bannerAdUnitId = AppConfig.bannerAdUnitId;
  
  static final SubscriptionManager _instance = SubscriptionManager._internal();
  factory SubscriptionManager() => _instance;
  SubscriptionManager._internal();

  bool _isInitialized = false;

  Future<void> initialize() async {
    if (_isInitialized) return;

    try {
      \/\/ Initialize AdMob
      await MobileAds.instance.initialize();
      
      _isInitialized = true;
    } catch (e) {
      print('Failed to initialize services: $e');
    }
  }

  Future<bool> isSubscribed() async {
    try {
      CustomerInfo customerInfo = await Purchases.getCustomerInfo();
      return customerInfo.entitlements.active.containsKey(_entitlementId);
    } catch (e) {
      print('Failed to check subscription status: $e');
      return false;
    }
  }

  BannerAd createBannerAd() {
    return BannerAd(
      adUnitId: _bannerAdUnitId,
      size: AdSize.banner,
      request: const AdRequest(),
      listener: BannerAdListener(
        onAdFailedToLoad: (ad, error) {
          print('Banner ad failed to load: $error');
          ad.dispose();
        },
      ),
    );
  }
}

Update the main.dart file to make use of the new Banner ads:

Widget build(BuildContext context) {
    if (_loading) {
      return const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inverseSurface,
        title: const Text('Article'),
        actions: [
          IconButton(
            icon: Icon(
              _isSubscribed ? Icons.star : Icons.star_border,
              color: _isSubscribed ? Colors.amber : null,
            ),
            onPressed: _openSubscriptionScreen,
            tooltip: _isSubscribed ? 'Ad free' : 'Go Ad free',
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Understanding Flutter Development for Beginners',
              style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 16),

            _buildParagraph(
              'One of the main benefits of Flutter is the ability to share code '
              'between platforms. This means you can maintain a single codebase for '
              'both iOS and Android applications, significantly reducing development '
              'time and effort.',
            ),

            if (!_isSubscribed) ...[
              const SizedBox(height: 12),
              const BannerAdWidget(),
              const SizedBox(height: 12),
            ],

            _buildParagraph(
              'Flutter\'s widget-based architecture makes it easy to build '
              'complex UIs with reusable components. Everything in Flutter is a '
              'widget, from simple text elements to complex layouts.',
            ),

            if (!_isSubscribed) ...[
              const SizedBox(height: 12),
              const BannerAdWidget(),
              const SizedBox(height: 12),
            ],

            _buildParagraph(
              'With Flutter, you can also target web and desktop platforms '
              'from the same codebase, making it a truly cross-platform solution '
              'for modern application development.',
            ),
          ],
        ),
      ),
    );
  }

After these code changes, your apps should look like this:

Screenshot of iOS simulator running the example app built for this tutorial.

Step 2: set up products

Once you’ve configured the store of your choice, or both in the previous steps, it’s time to set up Revenuecat. If you’re not familiar with Revenuecat, or time has passed since the last time you used it, this quickstart guide will help you get up to speed.

You need to configure your RevenueCat products, offerings and entitlements to have:

  • One entitlement for the ad-free subscription level, using the identifier ad_free_entitlement
  • Two separate products for App Store and Play Store, for example with identifier ad_free_monthly (learn more about the naming practices: iOS, Android)
  • Matching subscriptions in Play Store console and App Store connect with the same identifiers

Remember to group your product under the entitlement you created.

Step 3: Add subscriptions to your Flutter app

Now that we have everything configured, it’s time to add purchases_flutter and purchases_flutter_ui; the Flutter client for RevenueCat subscriptions and paywall UI components. Add the dependencies:

# pubspec.yaml
dependencies:
  google_mobile_ads: ^6.0.0
  purchases_flutter: ^8.10.5
  purchases_ui_flutter: ^8.10.5

We want RevenueCat to be initialized when the application starts, so at the same time as we initialize the ads. Update SubscriptionManager:

import 'package:google_mobile_ads\/google_mobile_ads.dart';
import 'package:purchases_flutter\/purchases_flutter.dart';
import '..\/config\/app_config.dart';

class SubscriptionManager {
  static const String _apiKey = AppConfig.revenueCatApiKey;
  static const String _entitlementId = AppConfig.entitlementId;
  static const String _bannerAdUnitId = AppConfig.bannerAdUnitId;
  
  static final SubscriptionManager _instance = SubscriptionManager._internal();
  factory SubscriptionManager() => _instance;
  SubscriptionManager._internal();

  bool _isInitialized = false;

  Future<void> initialize() async {
    if (_isInitialized) return;

    try {
      \/\/ Initialize RevenueCat
      PurchasesConfiguration configuration = PurchasesConfiguration(_apiKey);
      await Purchases.configure(configuration);
      
      \/\/ Initialize AdMob
      await MobileAds.instance.initialize();
      
      _isInitialized = true;
    } catch (e) {
      print('Failed to initialize services: $e');
    }
  }

  Future<bool> isSubscribed() async {
    try {
      CustomerInfo customerInfo = await Purchases.getCustomerInfo();
      return customerInfo.entitlements.active.containsKey(_entitlementId);
    } catch (e) {
      print('Failed to check subscription status: $e');
      return false;
    }
  }

  BannerAd createBannerAd() {
    return BannerAd(
      adUnitId: _bannerAdUnitId,
      size: AdSize.banner,
      request: const AdRequest(),
      listener: BannerAdListener(
        onAdFailedToLoad: (ad, error) {
          print('Banner ad failed to load: $error');
          ad.dispose();
        },
      ),
    );
  }
}

You can use the RevenueCat public API key directly or use an app_config.dart file like in this example. If you see RevenueCat error logs in the console, review and fix them.

Checking user entitlements

To keep track of whether a user has purchased a subscription and is eligible for ad-free experience, we implement a helper service. Add a function for checking if user is subscribed:

\/\/ subscription_manager.dart

\/\/ existing code

Future<bool> isSubscribed() async {
    try {
      CustomerInfo customerInfo = await Purchases.getCustomerInfo();
      return customerInfo.entitlements.active.containsKey(_entitlementId);
    } catch (e) {
      print('Failed to check subscription status: $e');
      return false;
    }
  }

Using the entitlement status in your UI

Before showing ads we need to check if user is subscribed:

import 'dart:io';
import 'package:flutter\/material.dart';
import 'package:purchases_ui_flutter\/purchases_ui_flutter.dart';
import 'services\/subscription_manager.dart';
import 'widgets\/banner_ad_widget.dart';
import 'config\/app_config.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  
  \/\/ Initialize subscription manager
  await SubscriptionManager().initialize();
  
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: AppConfig.appName,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ArticlePage(),
    );
  }
}

class ArticlePage extends StatefulWidget {
  const ArticlePage({super.key});

  @override
  State<ArticlePage> createState() => _ArticlePageState();
}

class _ArticlePageState extends State<ArticlePage> {
  final SubscriptionManager _subscriptionManager = SubscriptionManager();
  bool _isSubscribed = false;
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    _checkSubscriptionStatus();
  }

  @override
  Widget build(BuildContext context) {
    if (_loading) {
      return const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inverseSurface,
        title: const Text('Article'),
        actions: [
          IconButton(
            icon: Icon(
              _isSubscribed ? Icons.star : Icons.star_border,
              color: _isSubscribed ? Colors.amber : null,
            ),
            onPressed: _openSubscriptionScreen,
            tooltip: _isSubscribed ? 'Ad free' : 'Go Ad free',
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Understanding Flutter Development for Beginners',
              style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 16),

     
            _buildParagraph(
              'Flutter is a popular framework for building mobile applications. It '
              'allows developers to use Dart programming language along with native '
              'platform capabilities to create apps for iOS and Android.',
            ),

            if (!_isSubscribed) ...[
              const SizedBox(height: 12),
              const BannerAdWidget(),
              const SizedBox(height: 12),
            ],

    
          ],
        ),
      ),
    );
  }

Implement purchasing functionality

Now that we can check if a user has purchased a subscription, it’s time to implement the purchasing functionality. We can do this easily with RevenueCat paywalls, which you can then customize through RevenueCat’s dashboard. Learn more about paywalls here.

Add the code below to enable showing paywalls:

\/\/ Existing class and state declaration
class _ArticlePageState extends State<ArticlePage> {
  final SubscriptionManager _subscriptionManager = SubscriptionManager();
  bool _isSubscribed = false;
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    _checkSubscriptionStatus();
  }

  \/\/ Check if user has active entitlement
  Future<void> _checkSubscriptionStatus() async {
    final isSubscribed = await _subscriptionManager.isSubscribed();
    if (mounted) {
      setState(() {
        _isSubscribed = isSubscribed;
        _loading = false;
      });
    }
  }

  \/\/ Show RevenueCat paywall
  Future<void> _purchaseSubscription() async {
    try {
      await RevenueCatUI.presentPaywall(); \/\/ Opens default paywall configured in RevenueCat

      \/\/ Refresh subscription status after paywall closes
      await _checkSubscriptionStatus();

      if (mounted && _isSubscribed) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(
            content: Text('Subscription activated successfully!'),
            backgroundColor: Colors.green,
          ),
        );
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Failed to show paywall: $e'),
            backgroundColor: Colors.red,
          ),
        );
      }
    }
  }
@override
  Widget build(BuildContext context) {
    if (_loading) {
      return const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inverseSurface,
        title: const Text('Article'),
        actions: [
          IconButton(
            icon: Icon(
              _isSubscribed ? Icons.star : Icons.star_border,
              color: _isSubscribed ? Colors.amber : null,
            ),
            onPressed: _openSubscriptionScreen,
            tooltip: _isSubscribed ? 'Ad free' : 'Go Ad free',
          ),
        ],
      ),

body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Understanding Flutter Development for Beginners',
              style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 16),

            if (!_isSubscribed) ...[
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: _purchaseSubscription,
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.green,
                    foregroundColor: Colors.white,
                    padding: const EdgeInsets.symmetric(vertical: 16),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                  child: const Text(
                    'Remove Ads - Subscribe Now',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 16),
            ],
	\/\/... rest of the code
}

Run the app on a real device, press the button, and complete the purchase flow. After a successful purchase, the app will update to remove ads and give the user the ad-free experience.

Final result, an app that shows both content and ads together and has a button for disabling the ads by subscribing.

Conclusion

Great work! You’ve successfully built a Flutter app that lets users subscribe to unlock an ad-free experience. From integrating AdMob for ads to implementing subscriptions with RevenueCat, you now have a strong foundation for monetizing your app. From here, you can take things further—customize your paywall directly in the RevenueCat dashboard, experiment with different pricing strategies, or add premium features that offer even more value behind the subscription. This is just the beginning of what’s possible with a flexible, subscription-based model.