In this video, I will teach you how to implement native ads in the flutter app, but the official Flutter_admob is not supported by Native ads right now. So, if you are an iOS Developer, then you wait for official confirmation.

Flutter Native ads will help you grow your revenue of the App which will look like your App Ui Or You can customize Ads According to Your App Design. Flutter ads Or AdMob is the great way to Monetize your Flutter Apps

How to Implement Flutter Native Ads

💻 Installation

First, you will need to add package name flutter_native_admob

In the dependencies: section of your pubspec.yaml , add the following lines as :flutter_native_admob: ^0.1.1+2

Warning: this plugin is based on the Flutter PlatformView ( AndroidView ) to create a custom widget from Native style View. i.e, only Android is supported at the right now. For iOS, wait for an official Flutter team to implement an iOSView equivalent.

Now run Flutter package get in your terminal which we’ll install flutter_native_admob package.

⚡️ Import

import ‘package:flutter_native_admob/flutter_native_admob.dart’;

If you Don’t know how to Create a Flutter app, check out Getting started with Flutter official tutorial.

Okay, so we will add a variable for adunitId which will Ads unit ID. & Second Variable will be _nativeAdmob which will hold NativeAdmob Functionality

static const adUnitID = "ca-app-pub-3940256099942544/8135179316"; final _nativeAdmob = NativeAdmob();

After that, We need to Create InitState method for Initialize _nativeAdmob whenever User Open the app it will automatically Initialize process in the background.

InitState is the first method called whenever the widget is created by the Flutter App.

@override void initState() { super.initState(); _nativeAdmob.initialize(appID: "ca-app-pub-3940256099942544~3347511713"); }

For easy to Understand I will create ListView Widget Where we will show NativeAdmobBannerView in that List, Let see How

import 'package:flutter/material.dart'; import 'package:flutter_native_admob/flutter_native_admob.dart'; // ca-app-pub-3940256099942544/8135179316 // ca-app-pub-3940256099942544~3347511713 void main() => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { static const adUnitID = "ca-app-pub-3940256099942544/8135179316"; final _nativeAdmob = NativeAdmob(); @override void initState() { super.initState(); _nativeAdmob.initialize(appID: "ca-app-pub-3940256099942544~3347511713"); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: ListView( children: <Widget>[ Container( height: 200, margin: EdgeInsets.only(bottom: 20.0), child: Image.network( "https://images.pexels.com/photos/2216727/pexels-photo-2216727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", fit: BoxFit.cover, ), ), Container( height: 200, margin: EdgeInsets.only(bottom: 20.0), child: Image.network( "https://images.pexels.com/photos/3119709/pexels-photo-3119709.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", fit: BoxFit.cover, ), ), Container( height: 200, margin: EdgeInsets.only(bottom: 20.0), child: Image.network( "https://images.pexels.com/photos/2847037/pexels-photo-2847037.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", fit: BoxFit.cover, ), ), Container( height: 200, margin: EdgeInsets.only(bottom: 20.0), child: Image.network( "https://images.pexels.com/photos/3119709/pexels-photo-3119709.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", fit: BoxFit.cover, ), ), NativeAdmobBannerView( adUnitID: adUnitID, showMedia: true, style: BannerStyle.dark, contentPadding: EdgeInsets.fromLTRB(9.0, 8.0, 8.0, 8.0), ), Container( height: 200, margin: EdgeInsets.only(bottom: 20.0), child: Image.network( "https://images.pexels.com/photos/2216727/pexels-photo-2216727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", fit: BoxFit.cover, ), ), NativeAdmobBannerView( adUnitID: adUnitID, showMedia: true, style: BannerStyle.dark, contentPadding: EdgeInsets.fromLTRB(9.0, 8.0, 8.0, 8.0), ), Container( height: 200, margin: EdgeInsets.only(bottom: 20.0), child: Image.network( "https://images.pexels.com/photos/3119709/pexels-photo-3119709.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", fit: BoxFit.cover, ), ), Container( height: 200, margin: EdgeInsets.only(bottom: 20.0), child: Image.network( "https://images.pexels.com/photos/2847037/pexels-photo-2847037.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", fit: BoxFit.cover, ), ), NativeAdmobBannerView( adUnitID: adUnitID, showMedia: true, style: BannerStyle.dark, contentPadding: EdgeInsets.fromLTRB(9.0, 8.0, 8.0, 8.0), ), ], ), ), ); } }

Our 📷Final App will look like this:

🤝 Show some support

If you liked the app, show some love Here⭐️

You can see the full source code of the project here.

Enjoyed the Tutorial? Please leave a LIKE 👍 to show your support For Hardwork

💬 If you have a question about anything in the Tutorial, leave me a comment and I’ll do my best to answer your question.