📱 Flutter Google AdMob - Banner Ad Integration

Source code for the YouTube tutorial:
"How to Add Google AdMob Ads in Flutter (Step-by-Step)"
👉 Watch on YouTube → King Rittik

---

🎯 What You'll Learn

• ✅ How to install the google_mobile_ads SDK
• ✅ How to initialize AdMob at app startup (the right way)
• ✅ How to build a reusable BannerAdWidget
• ✅ How to configure Android (AndroidManifest.xml) and iOS (Info.plist)
• ✅ AdMob policy best practices (test IDs, placement, disposal)

---

🚀 Getting Started

1. Clone the repo

git clone https://github.com/King-Rittik/Flutter-Google-ad-mob.git
cd Flutter-Google-ad-mob

2. Install dependencies

flutter pub get

3. Run the app

flutter run

---

📦 Package Used

Package	Version	Purpose
google_mobile_ads	^9.0.0	Official Google Mobile Ads Flutter SDK

Add it to your own project with:

flutter pub add google_mobile_ads

---

🗂️ Project Structure

lib/
└── main.dart          # SDK init + BannerAdWidget + HomeScreen
android/
└── app/src/main/
    └── AndroidManifest.xml   # AdMob App ID meta-data
ios/
└── Runner/
    └── Info.plist            # GADApplicationIdentifier + SKAdNetwork

---

🧩 Integration — Step by Step

Step 1 — Initialize the SDK

Call MobileAds.instance.initialize() once in main(), before runApp().

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(const MyApp());
}

---

Step 2 — Android: Add App ID to AndroidManifest.xml

Inside the <application> tag:

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX"/>

⚠️ Missing this = crash on launch.

---

Step 3 — iOS: Add App ID to Info.plist

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX</string>

<!-- Required for iOS 14+ attribution -->
<key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cstr6suwn9.skadnetwork</string>
  </dict>
</array>

---

Step 4 — Create a Reusable BannerAdWidget

class BannerAdWidget extends StatefulWidget {
  const BannerAdWidget({super.key});
  @override
  State<BannerAdWidget> createState() => _BannerAdWidgetState();
}

class _BannerAdWidgetState extends State<BannerAdWidget> {
  BannerAd? _bannerAd;
  bool _isAdLoaded = false;

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

  void _loadAd() {
    _bannerAd = BannerAd(
      adUnitId: 'YOUR_AD_UNIT_ID',
      size: AdSize.banner,
      request: const AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (ad) => setState(() => _isAdLoaded = true),
        onAdFailedToLoad: (ad, error) {
          ad.dispose();
          setState(() => _isAdLoaded = false);
        },
      ),
    )..load();
  }

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

  @override
  Widget build(BuildContext context) {
    if (!_isAdLoaded || _bannerAd == null) {
      return const SizedBox(height: 50); // Placeholder
    }
    return SizedBox(
      width: _bannerAd!.size.width.toDouble(),
      height: _bannerAd!.size.height.toDouble(),
      child: AdWidget(ad: _bannerAd!),
    );
  }
}

---

Step 5 — Place the Banner in Your Screen

Column(
  children: [
    Expanded(child: /* your app content */),
    const BannerAdWidget(), // anchored at the bottom ✅
  ],
)

---

⚠️ AdMob Policy — Important

Rule	Details
🧪 Use test IDs during development	Never load real ads on a test device
📍 Visible placement	Ads must not overlap content
🚫 No fake clicks	Never incentivize users to tap ads
🗑️ Always dispose	Call ad.dispose() to prevent memory leaks

Test Ad Unit IDs (safe for development):

App ID  : ca-app-pub-3940256099942544~3347511713
Banner  : ca-app-pub-3940256099942544/6300978111

---

📚 Official References

• Google Mobile Ads Flutter SDK
• AdMob Flutter Integration Guide
• Banner Ads Guide
• AdMob Policies

---

🙌 Support the Channel

If this tutorial helped you, please:

• ⭐ Star this repo
• 👍 Like the video
• 🔔 Subscribe for more Flutter tutorials

---

🌐 Connect with Rittik

Platform	Link
🎬 YouTube	@king_rittik
📸 Instagram	@kingrittikofficial
✍️ Medium	@kingrittik

---

Made with ❤️ by Rittik Soni — King Rittik