Flutter, IOS, how to make Native admob UI

Question

I'm familiar with Android and Flutter, but I don't know anything about IOS.

I decided to ask here because I need the IOS code only once.

I`m currently following this by referring to https://pub.dev/packages/google_mobile_ads and https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter#7.

I'm doing it in Swift.

First, I copied the UI code of Native Advanced Example from https://github.com/googleads/googleads-mobile-ios-examples/releases/tag/7.22.

ListTileNativeAdView.xib

ListTileNativeAdFactory.swift

// TODO: Import google_mobile_ads
import google_mobile_ads

// TODO: Implement ListTileNativeAdFactory
class ListTileNativeAdFactory : FLTNativeAdFactory {

    func createNativeAd(_ nativeAd: GADNativeAd,
                        customOptions: [AnyHashable : Any]? = nil) -> GADNativeAdView? {
        let nibView = Bundle.main.loadNibNamed("ListTileNativeAdView", owner: nil, options: nil)!.first
        let nativeAdView = nibView as! GADNativeAdView

        (nativeAdView.headlineView as! UILabel).text = nativeAd.headline

        (nativeAdView.bodyView as! UILabel).text = nativeAd.body
        nativeAdView.bodyView!.isHidden = nativeAd.body == nil

        (nativeAdView.iconView as! UIImageView).image = nativeAd.icon?.image
        nativeAdView.iconView!.isHidden = nativeAd.icon == nil

        nativeAdView.callToActionView?.isUserInteractionEnabled = false

        nativeAdView.nativeAd = nativeAd

        return nativeAdView
    }
}

AppDelegate.swift

import UIKit
import Flutter

// TODO: Import google_mobile_ads
import google_mobile_ads

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    // TODO: Register ListTileNativeAdFactory
    let listTileFactory = ListTileNativeAdFactory()
    FLTGoogleMobileAdsPlugin.registerNativeAdFactory(
        self, factoryId: "listTile", nativeAdFactory: listTileFactory)

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

and I got this errors

ListTileNativeAdFactory.swift:15:71: error: cannot find type 'GADNativeAdView' in scope
                            customOptions: [AnyHashable : Any]? = nil) -> GADNativeAdView? {
                                                                          ^~~~~~~~~~~~~~~

ListTileNativeAdFactory.swift:17:40: error: cannot find type 'GADNativeAdView' in scope
            let nativeAdView = nibView as! GADNativeAdView
                                           ^~~~~~~~~~~~~~~

Flutter code is perfect. It works perfectly in Android flutter. The ad unit was also changed for IOS.

I would super appreciate for answers thanks

user_17700270 · Answer

I faced the same issue, after 3 days, I finally found a way to resolve this problem, you need to add some missed lines refer to ListTileNativeAdFactory.swift, ListTileNativeAdView.xib and GADNativeAd.h in ios/Runner.xcodeproj/project.pbxproj

user_8740266 · Answer

This additional changes works for me:)

import google_mobile_ads

import UIKit

class SingisticNativeAdFactory : FLTNativeAdFactory {

func createNativeAd(_ nativeAd: GADNativeAd,
                    customOptions: [AnyHashable : Any]? = nil) -> GADNativeAdView? {
    let nibView = Bundle.main.loadNibNamed("NativeAdView", owner: nil, options: nil)!.first
    
    
    let nativeAdView = nibView as! GADNativeAdView

    (nativeAdView.headlineView as! UILabel).text = nativeAd.headline
    nativeAdView.headlineView!.isHidden = nativeAd.headline == nil


    (nativeAdView.bodyView as! UILabel).text = nativeAd.body
    nativeAdView.bodyView!.isHidden = nativeAd.body == nil
    
    (nativeAdView.callToActionView as! UIButton).setTitle(nativeAd.callToAction, for: .normal)
    nativeAdView.callToActionView!.isHidden = nativeAd.callToAction == nil

    (nativeAdView.iconView as! UIImageView).image = nativeAd.icon?.image
    nativeAdView.iconView!.isHidden = nativeAd.icon == nil
    
    (nativeAdView.storeView as! UILabel).text = nativeAd.store
    nativeAdView.storeView!.isHidden = nativeAd.store == nil
    
    (nativeAdView.priceView as! UILabel).text = nativeAd.price
    nativeAdView.priceView!.isHidden = nativeAd.price == nil
    
    (nativeAdView.advertiserView as! UILabel).text = nativeAd.advertiser
    nativeAdView.advertiserView!.isHidden = nativeAd.advertiser == nil
    
    nativeAdView.callToActionView?.isUserInteractionEnabled = false

    nativeAdView.nativeAd = nativeAd

    return nativeAdView
}

}

Flutter, IOS, how to make Native admob UI

2 Answers