Overview:
We are going to create interesting AdMob Ready Flutter Android App. After Creating this Application you application is ready for Admob Monetization add Admob Ads in your Flutter Application and publish it on Google Play Store and Start Earning. But Before this you must need to know about some basic Google Admob App Monetization Policies. So for this check the official Google Admob Site. Learn Google Admob Publisher Policies. The application we can create is the Quotes app. Before starting I assume you have a little or more knowledge about Flutter app development.
Create New Project in Flutter:
First of all we will create a new project in Flutter. So If you are on Android Studio than simply follow this guide. First of all install Flutter plugin and Click on create new Project write your App Name keep in mind this one is your official app name so choose this name carefully. Choose your project location where you want to keep your App. Than Add package name for your Application make sure this package must be unique it includes your company name. example com.flutterwithnk.quotesapp.
After this simply click on create project. It will take some time to ready your project.
 |
| Android Studio Image While Creating New Flutter Project |
Create Some Important Files in Flutter App:
First of all in Android Studio install one plugin the plugin name is JSON TO DART. Don't worry after listening this difficult name just follow me i will help you to build this Flutter Quotes App from 0 to 100. Basically we are going to use API. We will use this API and than we will show Quotes in our Flutter Quotes App. So just install this Plugin.
Get API Response from POSTMAN:
Go to Postman website and create your new account using Google. In Postman create new workspace. After creating Workspace click and open this workspace. A new menue will be open in front of you simply click on + option it will automatically create the Untitled Request for you. After setting all things Postman will look like this.
 |
| Postman website image |
When you successfully setup the Postman paste this API Endpoint URL in Postman in front of GET Keyword. We get this URL from zenquotes. This is a website who provide free API endpoints.
https://zenquotes.io/api/quotesAfter pasting the End Point URL click on send. It will generate a response copy the whole response and save it. Use CTRL A for Select all and CTRL C for copy the whole response. Also follow this image. In image the Highlighted text is the response of the API just copy this.
 |
| Postman image where i am sending GET Request |
Create Json Model with JSON to DART Plugin:
After installing JSON TO DART plugin right click on lib folder and create a new directory and give Model Name to this directory. Now right click on this newly created directory and click on JSON TO DART option. A JSON TO DART new code writer will opened just paste the response of the Body that we copied from Postman. In JSON to DART code writer you will see a settings option click on this setting option and check all boxes. Include Null Pointer etc. At bottom write the MT_QUOTES name of this Model Class file and click on Generate. That's it. Write same file names.
Code The Quotes App in Flutter:
By default Flutter provides main.dart file with some demo code. So create a new file with Motivation name. In this Motivation file we will show Quotes from API. First of all remove the demo app code from your project. In order to do this after the main method closing bracket remove all code and than paste this code.
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'QuoteApp',
theme: ThemeData(
colorScheme:
ColorScheme.fromSeed(
seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const Motivation()
);
}
}
in the above code if you see in front of home: I just assign my Motivation() class. *If you see any error on Motivation() than wait in next step we will fix it*
Coding on Home Class to show Quotes from API:
Just paste this code in your Home File to show Quotes. In this code i'm fetching data from API and than showing the data in ListTile. And after this we need data in List view so i use ListView Builder for this. Add these two Packages in PubSpec.yaml file after cupertino_icons. After Adding this package press CTRL + S and save the file.
shimmer: ^3.0.0http: ^1.0.0
import 'dart:convert';
import 'dart:math';
import 'package:shimmer/shimmer.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:quoteapp/Models/MT_QUOTES.dart';
import 'package:http/http.dart'as http;
import '../Toast.dart';
class Motivation extends StatefulWidget {
const Motivation({super.key});
@override
State<Motivation> createState() => _MotivationState();
}
class _MotivationState extends State<Motivation> {
}
@override
// Future Method
// API JOB
List<MtQuotes> _MOTIVATIOIN_QUOTE_LIST = [];
Future<List<MtQuotes>> _getMTQuotes() async{
final response = await http.get(Uri.parse("https://zenquotes.io/api/quotes"));
var data = jsonDecode(response.body.toString());
if(response.statusCode == 200){
_MOTIVATIOIN_QUOTE_LIST.clear();
// Loop for adding data in List using Model
for(Map i in data){
_MOTIVATIOIN_QUOTE_LIST.add(MtQuotes.fromJson(i));
}
return _MOTIVATIOIN_QUOTE_LIST;
}else{
return _MOTIVATIOIN_QUOTE_LIST;
}
}
@override
void initState() {
_getMTQuotes();
super.initState();
}
Widget build(BuildContext context) {
return SafeArea(child:
Scaffold(
body: RefreshIndicator(
onRefresh: ()async{
setState(() {
});
},
child: Column(
children: [
Expanded(
child: FutureBuilder(
future: _getMTQuotes(),
builder: (context, snapshot) {
if(!snapshot.hasData){
return ListView.builder(
itemBuilder: (context, index) {
return Shimmer.fromColors(
baseColor: Colors.grey.shade400,
highlightColor: Colors.grey.shade100,
child: Column(
children: [
ListTile(
title:
Container(height: 20,width: 89,color: Colors.white,),
leading:
Container(height: 50,width: 89,color: Colors.white,),
subtitle:
Container(height: 10,width: 89,color: Colors.white,),
)
],)
);
},);
}else{
return ListView.builder(
itemCount: _MOTIVATIOIN_QUOTE_LIST.length,
itemBuilder: (context, index) {
if(index % 4 == 3) {
// Use this to return ads show ads in list views
// call the admob ads here
}
return Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
elevation: 10,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ListTile(
title:
Text(_MOTIVATIOIN_QUOTE_LIST[index].q.toString()),
subtitle:
Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child:
Text("Author Name:" + _MOTIVATIOIN_QUOTE_LIST[index]
.a.toString()),
),
onTap: (){
},
trailing: PopupMenuButton(
itemBuilder: (context) =>
[
PopupMenuItem(
child: ListTile(
onTap:(){
_interstitialAd?.show();
Navigator.pop(context);
Clipboard.setData
(ClipboardData(
text:
_MOTIVATIOIN_QUOTE_LIST[index].q.toString()));
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(
content: Text("Copied Sucessfull",)));
},
title:Text("Copy"),
trailing: Icon(Icons.copy),
)
),
PopupMenuItem(child: ListTile(
onTap:(){
},
title: Text("Save"),
trailing: Icon(Icons.bookmark),
))
],),
leading:
Image.network("Image URL"),
),
],
),
),
)
],
);
},);
}
},),
)
],),
),));
}
}
Brief Explanation About this Code:
In the above code i use http package to fetch data from API. I complete this action using Future method. Than I use Refresh Indicator layout and inside this i design the UI of this Application. And in Future Builder i assign the Future method. I am also using Shimmer effect to make this app more attractive.
Features in this Flutter Quotes Application:
We allow users to copy the quotes and than we also allow users to share these beautiful quotes with their friends and family. Because these quotes are Motivational Quotes so this app is suitable for everyone. I also add Save or Bookmark option it's optional if you want to use this feature than it's totally upto. My main purpose is to make this app very simple and straight forward for you.
Inegrate Admob Ads in Flutter Quotes App:
Integrating Admob Ad's in Flutter App is quite easy process. If you visit Google Admob Official docs so here you will see Google Team already explain each and everything about Admob ads integration in Flutter. But if you want to integrate Admob ads in Flutter with very easy way so follow this tutorial.
In this article i explain each and everything about Admob Ads integration in Flutter Apps.
0 Comments