Flutter Dev

Flutter Dev

1631352763

How to Manage Photos/Content with APIs for Flutter

photo_manager

Photo/Assets management APIs for Flutter without UI integration, you can get assets (image/video/audio) from Android, iOS and macOS.

提供相册操作 API 的插件,Android、iOS 和 macOS 可用。 没有 UI 内容,以便于自定义自己的界面,你可以通过提供的 API 来实现图片相关的 UI 或插件。

Projects that using this packages

nameownerdescriptionpubgithub
wechat_assets_pickerfluttercandiesAn audio/video/image picker in pure Dart which is the same with WeChat, support multi picking.pub packagestar
photoCaijinglongA selector for multiple pictures / videos, The style is like the 6.0 version of wechat.pub packagestar
photo_widgetfluttercandiesNot just selectors, but to provide each widget as a separate component, which is convenient for quickly combining and customizing your own style.pub packagestar

Table of contents

  • photo_manager
    • Other projects using this library
    • Table of contents
    • install
      • Add to pubspec
      • import in dart code
    • Usage
      • Configure your flutter project to use the plugin
      • request permission
        • About requestPermissionExtend
        • Limit photos
      • you get all of asset list (gallery)
        • FilterOption
      • Get asset list from AssetPathEntity
        • paged
        • range
        • Old version
      • AssetEntity
        • location info of android Q
        • Origin description
        • Create with id
      • observer
      • Clear file cache
      • Experimental
        • Preload thumb
        • Delete item
        • Insert new item
        • Copy asset
          • Only for iOS
          • Only for Android
    • iOS config
      • iOS plist config
      • enabling localized system albums names
      • Cache problem of iOS
    • android config
      • Cache problem of android
      • about androidX
      • Android Q (android10 , API 29)
      • Android R (android 11, API30)
      • glide
      • Remove Media Location permission
    • common issues
      • ios build error
    • Some articles about to use this library
    • Migration Guide

install

Add to pubspec

the latest version is pub package

dependencies:
  photo_manager: $latest_version

import in dart code

import 'package:photo_manager/photo_manager.dart';

Usage

Configure your flutter project to use the plugin

Before using the plug-in, there are several points to note. Please click the link below.

  1. Android
  2. iOS

request permission

You must get the user's permission on android/ios.

var result = await PhotoManager.requestPermissionExtend();
if (result.isAuth) {
    // success
} else {
    // fail
    /// if result is fail, you can call `PhotoManager.openSetting();`  to open android/ios applicaton's setting to get permission
}

About requestPermissionExtend

In iOS14, Apple inclue "LimitedPhotos Library" to iOS.

We need use the PhotoManager.requestPermissionExtend() to request permission.

The method will return PermissionState. See it in document of Apple.

So, because of compatibility, Android also recommends using this method to request permission, use state.isAuth, use a to be equivalent to the previous method requestPermission.

Limit photos

Because apple inclue "LimitedPhotos Library" to iOS.

Let the user select the visible image for app again, we can use PhotoManager.presentLimited() to repick again.

The method is only valid when iOS14 and user authorization mode is PermissionState.limited, other platform will ignore.

you get all of asset list (gallery)

List<AssetPathEntity> list = await PhotoManager.getAssetPathList();
namedescription
hasAllIs there an album containing "all"
typeimage/video/all , default all.
filterOptionSee FilterOption.

FilterOption

namedescription
needTitleThe title attribute of the picture must be included in android (even if it is false), it is more performance-consuming in iOS, please consider whether you need it. The default is false.
sizeConstraintConstraints on resource size.
durationConstraintConstraints of time, pictures will ignore this constraint.
createDateTimeCondCreate date filter
updateDateTimeCondUpdate date filter
ordersThe sort option, use addOrderOption.

Example see filter_option_page.dart.

Most classes of FilterOption support copyWith.

Get asset list from AssetPathEntity

paged

// page: The page number of the page, starting at 0.
// perPage: The number of pages per page.
final assetList = await path.getAssetListPaged(page, perPage);

The old version, it is not recommended for continued use, because there may be performance issues on some phones. Now the internal implementation of this method is also paged, but the paged count is assetCount of AssetPathEntity.

range

final assetList = await path.getAssetListRange(start: 0, end: 88); // use start and end to get asset.
// Example: 0~10 will return 10 assets. Special case: If there are only 5, return 5

Old version

AssetPathEntity data = list[0]; // 1st album in the list, typically the "Recent" or "All" album
List<AssetEntity> imageList = await data.assetList;

AssetEntity

AssetEntity entity = imageList[0];

File file = await entity.file; // image file

Uint8List originBytes = await entity.originBytes; // image/video original file content,

Uint8List thumbBytes = await entity.thumbData; // thumb data ,you can use Image.memory(thumbBytes); size is 64px*64px;

Uint8List thumbDataWithSize = await entity.thumbDataWithSize(width,height); //Just like thumbnails, you can specify your own size. unit is px; format is optional support jpg and png.

AssetType type = entity.type; // the type of asset enum of other,image,video

Duration duration = entity.videoDuration; //if type is not video, then return null.

Size size = entity.size

int width = entity.width;

int height = entity.height;

DateTime createDt = entity.createDateTime;

DateTime modifiedDt = entity.modifiedDateTime;

/// Gps info of asset. If latitude and longitude is 0, it means that no positioning information was obtained.
/// This information is not necessarily available, because the photo source is not necessarily the camera.
/// Even the camera, due to privacy issues, this property must not be available on androidQ and above.
double latitude = entity.latitude;
double longitude = entiry.longitude;

Latlng latlng = await entity.latlngAsync(); // In androidQ or higher, need use the method to get location info.

String mediaUrl = await entity.getMediaUrl(); /// It can be used in some video player plugin to preview, such as [flutter_ijkplayer](https://pub.dev/packages/flutter_ijkplayer)

String title = entity.title; // Since this property is fetched using KVO in iOS, the default is null, please use titleAsync to get it.

String relativePath = entity.relativePath; // It is always null in iOS.

About title: if the title is null or empty string, need use the titleAsync to get it. See below for the definition of attributes.

  /// It is title `MediaStore.MediaColumns.DISPLAY_NAME` in MediaStore on android.
  ///
  /// It is `PHAssetResource.filename` on iOS.
  ///
  /// Nullable in iOS. If you must need it, See [FilterOption.needTitle] or use [titleAsync].
  String title;

  /// It is [title] in Android.
  ///
  /// It is [PHAsset valueForKey:@"filename"] in iOS.
  Future<String> get titleAsync => _plugin.getTitleAsync(this);

location info of android Q

Because of AndroidQ's privacy policy issues, it is necessary to locate permissions in order to obtain the original image, and to obtain location information by reading the Exif metadata of the data.

Origin description

The originFile and originBytes will return the original content.

Not guaranteed to be available in flutter.
Because flutter's Image does not support heic.
The video is also the original format, non-exported format, compatibility does not guarantee usability.

Create with id

The id of the Asset corresponds to the id field of the MediaStore on android, and the localIdentity of PHAsset on iOS.

The user can store the id to any place if necessary, and next time use the AssetEntity.fromId(id) method to create the AssetEntity instace.

final asset = await AssetEntity.fromId(id);

observer

use addChangeCallback to regiser observe.

PhotoManager.addChangeCallback(changeNotify);
PhotoManager.startChangeNotify();
PhotoManager.removeChangeCallback(changeNotify);
PhotoManager.stopChangeNotify();

Clear file cache

You can use PhotoManager.clearFileCache() to clear all of cache.

The cache is generated at runtime when your call some methods. The following table will tell the user when the cache file will be generated.

Platformthumbfile/originFile
Android(28 or lower)YesNo
Android(29) (requestLegacyExternalStorage)YesNo
Android(29)YesYes
Android(30)YesNo
iOSNoYes

Experimental

Important: The functions are not guaranteed to be fully usable, because it involves data modification, some APIs will cause irreversible deletion / movement of the data, so please use test equipment to make sure that there is no problem before using it.

Preload thumb

PhotoCachingManager().requestCacheAssets(
  assets: assets,
  option: thumbOption,
);

And, if you want to stop, call PhotoCachingManager().cancelCacheRequest();

Usually, when we preview an album, we use thumbnails. In flutter, because ListView.builder and GridView.builder rendering that loads, but sometimes we might want to pre-load some pictures in advance to make them display faster.

Now, I try to create a caching image manager (just like PHCachingImageManager) to do it. In IOS, I use the system API directly, and Android will use glide and use glide's file cache to complete this step. This function is completely optional.

Delete item

Hint: this will delete the asset from your device. For iOS, it's not just about removing from the album.

final List<String> result = await PhotoManager.editor.deleteWithIds([entity.id]); // The deleted id will be returned, if it fails, an empty array will be returned.

Tip: You need to call the corresponding PathEntity's refreshPathProperties method to refresh the latest assetCount.

And range way to get the latest data to ensure the accuracy of the current data. Such as example.

Insert new item

final AssetEntity imageEntity = await PhotoManager.editor.saveImage(uint8list); // nullable

final AssetEntity imageEntity = await PhotoManager.editor.saveImageWithPath(path); // nullable

File videoFile = File("video path");
final AssetEntity videoEntity = await await PhotoManager.editor.saveVideo(videoFile); // nullable

Copy asset

Availability:

  • iOS: some albums are smart albums, their content is automatically managed by the system and cannot be inserted manually.
  • android:
    • Before api 28, the method will copy some column from origin row.
    • In api 29 or higher, There are some restrictions that cannot be guaranteed, See document of relative_path.

Only for iOS

Create folder:

PhotoManager.editor.iOS.createFolder(
  name,
  parent: parent, // It is a folder or Recent album.
);

Create album:

PhotoManager.editor.iOS.createAlbum(
  name,
  parent: parent, // It is a folder or Recent album.
);

Remove asset in album, the asset can't be delete in device, just remove of album.

PhotoManager.editor.iOS.removeInAlbum();  // remove single asset.
PhotoManager.editor.iOS.removeAssetsInAlbum(); // Batch remove asset in album.

Delete the path in device. Both folders and albums can be deleted, except for smart albums.

PhotoManager.editor.iOS.deletePath();

Only for Android

Move asset to another album

PhotoManager.editor.android.moveAssetToAnother(entity: assetEntity, target: pathEntity);

Remove all non-existing rows. For normal Android users, this problem doesn't happened.
A row record exists in the Android MediaStore, but the corresponding file has been deleted. This kind of abnormal deletion usually comes from file manager, helper to clear cache or adb.
This is a very resource-consuming operation. If the first one is not completed, the second one cannot be opened.

await PhotoManager.editor.android.removeAllNoExistsAsset();

iOS config

iOS plist config

Because the album is a privacy privilege, you need user permission to access it. You must to modify the Info.plist file in Runner project.

like next

    <key>NSPhotoLibraryUsageDescription</key>
    <string>App need your agree, can visit your album</string>

xcode like image in xcode

In ios11+, if you want to save or delete asset, you also need add NSPhotoLibraryAddUsageDescription to plist.

enabling localized system albums names

By default iOS will retrieve system album names only in English whatever the device's language currently set. To change this you need to open the ios project of your flutter app using xCode

in xcode

Select the project "Runner" and in the localizations table, click on the + icon

in xcode

Select the adequate language(s) you want to retrieve localized strings. Validate the popup screen without any modification Close xCode Rebuild your flutter project Now, the system albums should be displayed according to the device's language

Cache problem of iOS

iOS does not directly provide APIs to access the original files of the album. The corresponding object is PHAsset,

So when you want to use file or originFile, a cache file will be generated locally.

So if you are sensitive to space, please delete it after using file(just iOS), and if it is only used for preview, you can consider using thumb or thumbWithSize.


void useEntity(AssetEntity entity) async {
  File file = null;
  try{
    file = await entity.file;
    doUpload(); // do upload
  }finally{
    if(Platform.isIOS){
      file?.deleteSync();
    }
  }
}

android config

Kotlin and Gradle version

Start from 1.2.7, We're shipping this package using Kotlin 1.5.21 and AGP 4.1.0. If your projects are using a lower version of Kotlin or Gradle, please upgrade them to a newer version. More specifically:

  • Upgrade your Gradle version (the one in gradle-wrapper.properties) to 6.8.3 or the latest version but lower than 7.0.0.
  • Upgrade your Kotlin version (ext.kotlin_version) to 1.4.32 or the latest version.

Cache problem of android

Because androidQ restricts the application’s ability to directly access the resource path, some large image caches will be generated. This is because: When the file/originFile attribute is used, the plugin will save a file in the cache folder and provide it to dart:io use.

Fortunately, in androidP, the path attribute can be used again, but for androidQ, this is not good news, but we can use requestLegacyExternalStorage to avoid using androidQ's api, and I also recommend you to do so. See Android Q to add the attribute.

about androidX

Google recommends completing all support-to-AndroidX migrations in 2019. Documentation is also provided.

This library has been migrated in version 0.2.2, but it brings a problem. Sometimes your upstream library has not been migrated yet. At this time, you need to add an option to deal with this problem.

The complete migration method can be consulted gitbook.

Android Q (android10 , API 29)

Now, the android part of the plugin uses api 29 to compile the plugin, so your android sdk environment must contain api 29 (androidQ).

AndroidQ has a new privacy policy, users can't access the original file.

If your compileSdkVersion and targetSdkVersion are both below 28, you can use PhotoManager.forceOldApi to force the old api to access the album. If you are not sure about this part, don't call this method. And, I recommand you add android:requestLegacyExternalStorage="true" to your AndroidManifest.xml, just like next.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="top.kikt.imagescannerexample">

    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="image_scanner_example"
        android:requestLegacyExternalStorage="true"
        android:icon="@mipmap/ic_launcher">
    </application>
</manifest>

Android R (android 11, API30)

Unlike androidQ, this version of requestLegacyExternalStorage is invalid, but I still recommend that you add this attribute to make it easier to use the old API on android29 of android device.

glide

Android native use glide to create image thumb bytes, version is 4.11.0.

If your other android library use the library, and version is not same, then you need edit your android project's build.gradle.

rootProject.allprojects {

    subprojects {
        project.configurations.all {
            resolutionStrategy.eachDependency { details ->
                if (details.requested.group == 'com.github.bumptech.glide'
                        && details.requested.name.contains('glide')) {
                    details.useVersion '4.11.0'
                }
            }
        }
    }
}

And, if you want to use ProGuard, you can see the ProGuard of Glide.

Remove Media Location permission

Android contains ACCESS_MEDIA_LOCATION permission by default.

This permission is introduced in Android Q. If your app doesn't need this permission, you need to add the following node to the Android manifest in your app.

<uses-permission
  android:name="android.permission.ACCESS_MEDIA_LOCATION"
  tools:node="remove"
  />

See code in the example.

common issues

ios build error

if your flutter print like the log. see stackoverflow

Xcode's output:
↳
    === BUILD TARGET Runner OF PROJECT Runner WITH CONFIGURATION Debug ===
    The use of Swift 3 @objc inference in Swift 4 mode is deprecated. Please address deprecated @objc inference warnings, test your code with “Use of deprecated Swift 3 @objc inference” logging enabled, and then disable inference by changing the "Swift 3 @objc Inference" build setting to "Default" for the "Runner" target.
    === BUILD TARGET Runner OF PROJECT Runner WITH CONFIGURATION Debug ===
    While building module 'photo_manager' imported from /Users/cai/IdeaProjects/flutter/sxw_order/ios/Runner/GeneratedPluginRegistrant.m:9:
    In file included from <module-includes>:1:
    In file included from /Users/cai/IdeaProjects/flutter/sxw_order/build/ios/Debug-iphonesimulator/photo_manager/photo_manager.framework/Headers/photo_manager-umbrella.h:16:
    /Users/cai/IdeaProjects/flutter/sxw_order/build/ios/Debug-iphonesimulator/photo_manager/photo_manager.framework/Headers/MD5Utils.h:5:9: error: include of non-modular header inside framework module 'photo_manager.MD5Utils': '/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator11.2.sdk/usr/include/CommonCrypto/CommonDigest.h' [-Werror,-Wnon-modular-include-in-framework-module]
    #import <CommonCrypto/CommonDigest.h>
            ^
    1 error generated.
    /Users/cai/IdeaProjects/flutter/sxw_order/ios/Runner/GeneratedPluginRegistrant.m:9:9: fatal error: could not build module 'photo_manager'
    #import <photo_manager/ImageScannerPlugin.h>
     ~~~~~~~^
    2 errors generated.

Some articles about to use this library

How To: Create a custom media picker in Flutter to select photos and videos from the gallery

Flutter 开发日记-如何实现一个照片选择器 plugin

If you have other articles about this library, you can contact me or open PR here.

Migration Guide

See Migration-Guide

Download Details:
 

Author: CaiJingLong
Download Link: Download The Source Code
Official Website: https://github.com/CaiJingLong/flutter_photo_manager 
License: Apache-2.0 License 

#flutter 

How to Manage Photos/Content with APIs for Flutter
Flutter Dev

Flutter Dev

1631266222

Place picker on Google Maps for Flutter

Google Maps Place Picker

A Flutter plugin which provides 'Picking Place' using Google Maps widget.

The project relies on below packages.

Map using Flutter's official google_maps_flutter
Fetching current location using Baseflow's geolocator
Place and Geocoding API using hadrienlejard's google_maps_webservice
Builder using kevmoo's tuple

Preview

Support

If the package was useful or saved your time, please do not hesitate to buy me a cup of coffee! ;)
The more caffeine I get, the more useful projects I can make in the future.

Getting Started

Get an API key at https://cloud.google.com/maps-platform/.

Enable Google Map SDK for each platform.

  • Go to Google Developers Console.
  • Choose the project that you want to enable Google Maps on.
  • Select the navigation menu and then select "Google Maps".
  • Select "APIs" under the Google Maps menu.
  • To enable Google Maps for Android, select "Maps SDK for Android" in the "Additional APIs" section, then select "ENABLE".
  • To enable Google Maps for iOS, select "Maps SDK for iOS" in the "Additional APIs" section, then select "ENABLE".
  • Make sure the APIs you enabled are under the "Enabled APIs" section.

You can also find detailed steps to get started with Google Maps Platform here.

Android

Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml:

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

NOTE: As of version 3.0.0 the geolocator plugin switched to the AndroidX version of the Android Support Libraries. This means you need to make sure your Android project is also upgraded to support AndroidX. Detailed instructions can be found here.

The TL;DR version is:

  1. Add the following to your "gradle.properties" file:
android.useAndroidX=true
android.enableJetifier=true
  1. Make sure you set the compileSdkVersion in your "android/app/build.gradle" file to 28:
android {
 compileSdkVersion 28

 ...
}
  1. Make sure you replace all the android. dependencies to their AndroidX counterparts (a full list can be found here: https://developer.android.com/jetpack/androidx/migrate).

iOS

Specify your API key in the application delegate ios/Runner/AppDelegate.m:

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Or in your swift code, specify your API key in the application delegate ios/Runner/AppDelegate.swift:

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

On iOS you'll need to add the following entries to your Info.plist file (located under ios/Runner) in order to access the device's location.

Simply open your Info.plist file and add the following:

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app needs access to location when open and in the background.</string>

In addition, you need to add the Background Modes capability to your XCode project (Project > Signing and Capabilties > "+ Capability" button) and select Location Updates.g>This app needs access to location when open and in the background.

Opt-in to the embedded views preview by adding a boolean property to the app's Info.plist file with the key io.flutter.embedded_views_preview and the value YES.

<key>io.flutter.embedded_views_preview</key>
<true/>

Usage

Basic usage

You can use PlacePicker by pushing to a new page using Navigator, OR put as a child of any widget.
When the user picks a place on the map, it will return result to 'onPlacePicked' with PickResult type. Alternatively, you can build your own way with 'selectedPlaceWidgetBuilder' and fetch result from it (See the instruction below).

Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PlacePicker(
          apiKey: APIKeys.apiKey,   // Put YOUR OWN KEY here.
          onPlacePicked: (result) { 
            print(result.address); 
            Navigator.of(context).pop();
          },
          initialPosition: HomePage.kInitialPosition,
          useCurrentLocation: true,
        ),
      ),
    );

PickResult

ParameterTypeDescription
placeIdStringA textual identifier that uniquely identifies a place. To retrieve information about the place, pass this identifier in the placeId field of a Places API request. See PlaceId for more information.
geometryGeometryContains geometry information about the result, generally including the location (geocode) of the place and (optionally) the viewport identifying its general area of coverage.
formattedAddressStringA string containing the human-readable address of this place. Often this address is equivalent to the "postal address".
typesList<String>Contains an array of feature types describing the given result. See the list of supported types. XML responses include multiple elements if more than one type is assigned to the result.
addressComponentsList<AddressComponent>An array containing the separate components applicable to this address.
   
** Below results will be fetched only when using auto-complete search or usePlaceDetailSearch is set to true when searching by dragging the map.  

PickResult (Optional)

ParameterTypeDescription
adrAddressStringA representation of the place's address in the adr microformat
formattedPhoneNumberStringContains the place's phone number in its local format
idString? (Not documented at Google - see more info below)
referenceString? (Not documented at Google - see more info below)
iconStringThe URL of a suggested icon which may be displayed to the user when indicating this result on a map.
nameStringHuman-readable name for the returned result
openingHoursOpeningHoursDetailOpening hour information
photosList<Photo>Array of photo objects, each containing a reference to an image
internationalPhoneNumberStringThe place's phone number in international format
priceLevelPriceLevelThe price level of the place, on a scale of 0 to 4. The exact amount indicated by a specific value will vary from region to region.
ratingnumThe place's rating, from 1.0 to 5.0, based on aggregated user reviews.
scopeString 
urlStringThe URL of the official Google page for this place.
vicinityStringLists a simplified address for the place, including the street name, street number, and locality, but not the province/state, postal code, or country
utcOffsetnumThe number of minutes this place’s current timezone is offset from UTC
websiteStringThe authoritative website for this place
reviewsList<Review>JSON array of up to five reviews

More info about results at Google document.

PlacePicker

ParameterTypeDescription
apiKeyString(Required) Your google map API Key
onPlacePickedCallback(PickResult)Invoked when user picks the place and selects to use it. This will not be called if you manually build 'selectedPlaceWidgetBuilder' as you will override default 'Select here' button.
initialPositionLatLng(Required) Initial center position of google map when it is created. If useCurrentLocation is set to true, it will try to get device's current location first using GeoLocator.
useCurrentLocationboolWhether to use device's current location for initial center position. This will be used instead of initial position when it is set to true AND user ALLOW to collect their location. If DENIED, initialPosition will be used.
desiredLocationAccuracyLocationAccuracyAccuracy of fetching current location. Defaults to 'high'.
hintTextStringHint text of search bar
searchingTextStringA text which appears when searching is performing. Default to 'Searching...'
proxyBaseUrlStringUsed for API calling on google maps. In case of using a proxy the baseUrl can be set. The apiKey is not required in case the proxy sets it.
httpClientClientUsed for API calling on google maps. In case of using a proxy url that requires authentication or custom configuration.
autoCompleteDebounceInMillisecondsintDebounce timer for auto complete input. Default to 500
cameraMoveDebounceInMillisecondsintDebounce timer for searching place with camera(map) dragging. Defaults to 750
intialMapTypeMapTypeMapTypes of google map. Defaults to normal.
enableMapTypeButtonboolWhether to display MapType change button on the map
enableMyLocationButtonboolWhether to display my location button on the map
usePinPointingSearchboolDefaults to true. This will allow user to drag map and get a place info where the pin is pointing.
usePlaceDetailSearchboolDefaults to false. Setting this to true will get detailed result from searching by dragging the map, but will use +1 request on Place Detail API.
onAutoCompleteFailedCallback(String)Invoked when auto complete search is failed
onGeocodingSearchFailedCallback(String)Invoked when searching place by dragging the map failed
onMapCreatedMapCreatedCallbackReturens google map controller when created
selectedPlaceWidgetBuilderWidgetBuilderSpecified on below section
pinBuilderWidgetBuilderSpecified on below section
autocompleteOffsetnumThe position, in the input term, of the last character that the service uses to match predictions
autocompleteRadiusnumThe distance (in meters) within which to return place results
autocompleteLanguageStringThe language code, indicating in which language the results should be returned, if possible.
autocompleteComponentsList<Components>A grouping of places to which you would like to restrict your results. Currently, you can use components to filter by up to 5 countries.
autocompleteTypesList<String>The types of place results to return. See Place Types.
strictboundsboolReturns only those places that are strictly within the region defined by location and radius.
regionStringregion — The region code, specified as a ccTLD (country code top-level domain) two-character value. Most ccTLD codes are identical to ISO 3166-1 codes, with some exceptions. This parameter will only influence, not fully restrict, search results. If more relevant results exist outside of the specified region, they may be included. When this parameter is used, the country name is omitted from the resulting formatted_address for results in the specified region.
selectInitialPositionboolWhether to display selected place on initial map load. Defaults to false.
resizeToAvoidBottomInsetboolRefer to Scaffold's resizeToAvoidBottomInset property.
initialSearchStringStringSets initial search string for auto complete search
searchForInitialValueboolWether to automatically search for initial value on start
forceAndroidLocationManagerboolOn Android devices you can set this to true to force the geolocator plugin to use the 'LocationManager' to determine the position instead of the 'FusedLocationProviderClient'. On iOS this is ignored.
myLocationButtonCooldownintCooldown time in seconds for the 'myLocationButton'. Defaults to 10 seconds.
forceSearchOnZoomChangedboolWether to allow place search even when the zoom has changed. Defaults to false.
automaticallyImplyAppBarLeadingboolBy default, there is a back button on the top. Setting false will remove the back button.
autocompleteOnTrailingWhitespaceboolWhether to allow autocomplete to run even on whitespace at the end of the search. Defaults to false. Issue ref #54.

More info about autocomplete search at Google document.

Customizing picked place visualisation

By default, when a user picks a place by using auto complete search or dragging the map, we display the information at the bottom of the screen (FloatingCard).

However, if you don't like this UI/UX, simply override the builder using 'selectedPlaceWidgetBuilder'. FlocatingCard widget can be reused which is floating around the screen or build an entirely new widget as you want. It is stacked with the map, so you might want to use the Positioned widget.

Note that using this customization WILL NOT INVOKE [onPlacePicked] callback as it will override default 'Select here' button on floating card

...
PlacePicker(apiKey: APIKeys.apiKey,
            ...
            selectedPlaceWidgetBuilder: (_, selectedPlace, state, isSearchBarFocused) {
              return isSearchBarFocused
                  ? Container()
                  // Use FloatingCard or just create your own Widget.
                  : FloatingCard(
                      bottomPosition: 0.0,    // MediaQuery.of(context) will cause rebuild. See MediaQuery document for the information.
                      leftPosition: 0.0,
                      rightPosition: 0.0,
                      width: 500,
                      borderRadius: BorderRadius.circular(12.0),
                      child: state == SearchingState.Searching ? 
                                      Center(child: CircularProgressIndicator()) : 
                                      RaisedButton(onPressed: () { print("do something with [selectedPlace] data"); },),
                   );
            },
            ...
          ),
...
ParametersTypeDescription
contextBuildContextFlutter's build context value
selectedPlacePickResultResult data of user selected place
stateSearchingStateState of searching action. (Idle, Searching)
isSearchBarFocusedboolWhether the search bar is currently focused so the keyboard is shown

Customizing Pin

By default, Pin icon is provided with very simple picking animation when moving around.
However, you can also create your own pin widget using 'pinBuilder'

PlacePicker(apiKey: APIKeys.apiKey,
            ...
            pinBuilder: (context, state) {
                  if (state == PinState.Idle) {
                    return Icon(Icons.favorite_border);
                  } else {
                    return AnimatedIcon(.....);
                  }
                },
            ...                        
          ),
...
ParametersTypeDescription
contextBuildContextFlutter's build context value
statePinStateState of pin. (Preparing; When map loading, Idle, Dragging)

Changing Colours of default FloatingCard

While you can build your own prediction tile, you still can change the style of default tile using themeData as below:

// Light Theme
final ThemeData lightTheme = ThemeData.light().copyWith(
  // Background color of the FloatingCard
  cardColor: Colors.white,
  buttonTheme: ButtonThemeData(
    // Select here's button color
    buttonColor: Colors.black,
    textTheme: ButtonTextTheme.primary,
  ),
);

// Dark Theme
final ThemeData darkTheme = ThemeData.dark().copyWith(
  // Background color of the FloatingCard
  cardColor: Colors.grey,
  buttonTheme: ButtonThemeData(
    // Select here's button color
    buttonColor: Colors.yellow,
    textTheme: ButtonTextTheme.primary,
  ),
);

Feature Requests and Issues

Please file feature requests and bugs at the issue tracker.

Other useful packages you might be insterested

Firebase Auth Simplify
Material design Speed Dial

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add google_maps_place_picker

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  google_maps_place_picker: ^1.0.1

Alternatively, your editor might support or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:google_maps_place_picker/google_maps_place_picker.dart';

Download Details:

Author: fysoul17
Download Link: Download The Source Code
Official Website: https://github.com/fysoul17/google_maps_place_picker 
License: MIT License

#flutter #mobile-apps 

Place picker on Google Maps for Flutter

A Flutter Plugin That Provides a Google Maps Widget

Google Maps for Flutter

A Flutter plugin that provides a Google Maps widget.

Usage

To use this plugin, add google_maps_flutter as a dependency in your pubspec.yaml file.

Getting Started

Get an API key at https://cloud.google.com/maps-platform/.

Enable Google Map SDK for each platform.

  • Go to Google Developers Console.
  • Choose the project that you want to enable Google Maps on.
  • Select the navigation menu and then select "Google Maps".
  • Select "APIs" under the Google Maps menu.
  • To enable Google Maps for Android, select "Maps SDK for Android" in the "Additional APIs" section, then select "ENABLE".
  • To enable Google Maps for iOS, select "Maps SDK for iOS" in the "Additional APIs" section, then select "ENABLE".
  • Make sure the APIs you enabled are under the "Enabled APIs" section.

For more details, see Getting started with Google Maps Platform.

Android

  1. Set the minSdkVersion in android/app/build.gradle:
android {
    defaultConfig {
        minSdkVersion 20
    }
}

This means that app will only be available for users that run Android SDK 20 or higher.

  1. Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml:
<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

iOS

Specify your API key in the application delegate ios/Runner/AppDelegate.m:

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Or in your swift code, specify your API key in the application delegate ios/Runner/AppDelegate.swift:

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Both

You can now add a GoogleMap widget to your widget tree.

The map view can be controlled with the GoogleMapController that is passed to the GoogleMap's onMapCreated callback.

Sample Usage

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Maps Demo',
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: Text('To the lake!'),
        icon: Icon(Icons.directions_boat),
      ),
    );
  }

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }
}

See the example directory for a complete sample app.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add google_maps_flutter

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  google_maps_flutter: ^2.0.8

Alternatively, your editor might support or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:google_maps_flutter/google_maps_flutter.dart'; 

example/lib/main.dart

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// ignore_for_file: public_member_api_docs

import 'package:flutter/material.dart';
import 'package:google_maps_flutter_example/lite_mode.dart';
import 'animate_camera.dart';
import 'map_click.dart';
import 'map_coordinates.dart';
import 'map_ui.dart';
import 'marker_icons.dart';
import 'move_camera.dart';
import 'padding.dart';
import 'page.dart';
import 'place_circle.dart';
import 'place_marker.dart';
import 'place_polygon.dart';
import 'place_polyline.dart';
import 'scrolling_map.dart';
import 'snapshot.dart';
import 'tile_overlay.dart';

final List<GoogleMapExampleAppPage> _allPages = <GoogleMapExampleAppPage>[
  MapUiPage(),
  MapCoordinatesPage(),
  MapClickPage(),
  AnimateCameraPage(),
  MoveCameraPage(),
  PlaceMarkerPage(),
  MarkerIconsPage(),
  ScrollingMapPage(),
  PlacePolylinePage(),
  PlacePolygonPage(),
  PlaceCirclePage(),
  PaddingPage(),
  SnapshotPage(),
  LiteModePage(),
  TileOverlayPage(),
];

class MapsDemo extends StatelessWidget {
  void _pushPage(BuildContext context, GoogleMapExampleAppPage page) {
    Navigator.of(context).push(MaterialPageRoute<void>(
        builder: (_) => Scaffold(
              appBar: AppBar(title: Text(page.title)),
              body: page,
            )));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('GoogleMaps examples')),
      body: ListView.builder(
        itemCount: _allPages.length,
        itemBuilder: (_, int index) => ListTile(
          leading: _allPages[index].leading,
          title: Text(_allPages[index].title),
          onTap: () => _pushPage(context, _allPages[index]),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MapsDemo()));
} 

Download Details:

Author: flutter

Source Code: https://github.com/flutter/plugins/tree/master/packages/google_maps_flutter/google_maps_flutter

#maps  #flutter #google-maps 

A Flutter Plugin That Provides a Google Maps Widget
Flutter Dev

Flutter Dev

1630146472

A Flutter Plugin for the Google Mobile Ads SDK

Google Mobile Ads for Flutter

This guide is intended for publishers who want to monetize a Flutter app.

Integrating Google Mobile Ads SDK into a Flutter app, which you will do here, is the first step towards displaying AdMob ads and earning revenue. Once the integration is complete, you can choose an ad format to get detailed implementation steps.

The Google Mobile Ads SDK for Flutter currently supports loading and displaying banner, interstitial (full-screen), native ads, and rewarded video ads.

Note: This plugin also contains support for Google Ad Manager. If you are interested in creating and loading an Ad with Ad Manager, you may follow the same prerequisites, platform setup, mobile ads SDK initialization steps outlined in this doc, and then see creating and loading an ad with Ad Manager for further instructions.

See also the codelab for inline ads in Flutter for a detailed guide on setting inline banner and native ads.

Prerequisites

  • Flutter 1.22.0 or higher
  • Android
    • Android Studio 3.2 or higher
    • Target Android API level 19 or higher
    • Set compileSdkVersion to 28 or higher
    • Android Gradle Plugin 4.1 or higher (this is the version supported by Flutter out of the box)
  • Ios
  • Recommended: Create an AdMob account and register an Android and/or iOS app (To show live ads on a published app, it is required to register that app).

Import the Mobile Ads SDK

Platform Specific Setup

iOS

Update your Info.plist

Update your app's ios/Runner/Info.plist file to add two keys:

  • A GADApplicationIdentifier key with a string value of your AdMob app ID (identified in the AdMob UI).
  • A SKAdNetworkItems key with Google's SKAdNetworkIdentifier value of cstr6suwn9.skadnetwork.
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
<key>SKAdNetworkItems</key>
  <array>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>cstr6suwn9.skadnetwork</string>
    </dict>
  </array>

See https://developers.google.com/admob/ios/quick-start#update_your_infoplist for more information about configuring Info.plist and setting up your App ID.

Android

Update AndroidManifest.xml

The AdMob App ID must be included in the AndroidManifest.xml. Failure to do so will result in a crash on launch of an app.

Add the AdMob App ID (identified in the AdMob UI) to the app's android/app/src/main/AndroidManifest.xml file by adding a <meta-data> tag with name com.google.android.gms.ads.APPLICATION_ID, as shown below. You can find your App ID in the AdMob UI. For android:value insert your own AdMob App ID in quotes, as shown below.

<manifest>
    <application>
        <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>

The same value when you initialize the plugin in your Dart code.

See https://goo.gl/fQ2neu for more information about configuring AndroidManifest.xml and setting up the App ID.

Initialize the Mobile Ads SDK

Before loading ads, have your app initialize the Mobile Ads SDK by calling MobileAds.instance.initialize() which initializes the SDK and returns a Future that finishes once initialization is complete (or after a 30-second timeout). This needs to be done only once, ideally right before running the app.

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // Load ads.
  }
}

Select an Ad Format

The Mobile Ads SDK is now imported and you're ready to implement an ad. AdMob offers a number of different ad formats, so you can choose the one that best fits your app's user experience.

  • Banner
    • Rectangular ads that appear at the top or bottom of the device screen. Banner ads stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time. If you're new to mobile advertising, they're a great place to start.
  • Interstitial
    • Full-screen ads that cover the interface of an app until closed by the user. They're best used at natural pauses in the flow of an app's execution, such as between levels of a game or just after a task is completed.
  • Native Ads
    • Customizable ads that match the look and feel of your app. You decide how and where they're placed, so the layout is more consistent with your app's design.
  • Rewarded
    • Ads that reward users for watching short videos and interacting with playable ads and surveys. Good for monetizing free-to-play users.

Banner Ads

Banner ads occupy a spot within an app's layout, either at the top or bottom of the device screen. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time.

This guide shows you how to integrate banner ads from AdMob into a Flutter app. In addition to code snippets and instructions, it also includes information about sizing banners properly and links to additional resources.

See also the codelab for inline ads in Flutter for a detailed guide on setting up banner ads.

Always test with test ads

When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.

The easiest way to load test ads is to use our dedicated test ad unit ID for banners:

  • Android: https://developers.google.com/admob/android/test-ads#sample_ad_units
  • iOS: https://developers.google.com/admob/ios/test-ads#demo_ad_units

It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.

Instantiate a Banner Ad

A BannerAd requires an adUnitId, an AdSize, an AdRequest, and a BannerAdListener. An example is shown below as well as more information on each parameter following.

final BannerAd myBanner = BannerAd(
  adUnitId: '<ad unit id>',
  size: AdSize.banner,
  request: AdRequest(),
  listener: BannerAdListener(),
);

Banner Sizes

The table below lists the standard banner sizes.

Size in dp (WxH)DescriptionAdSize Constant
320x50Standard Bannerbanner
320x100Large BannerlargeBanner
320x250Medium RectanglemediumRectangle
468x60Full-Size BannerfullBanner
728x90Leaderboardleaderboard
Screen width x 32|50|90Smart BannerUse getSmartBanner(Orientation)
Provided width x Adaptive heightAdaptive BannerUse getAnchoredAdaptiveBannerAdSize(Orientation, int)

To define a custom banner size, set your desired AdSize, as shown here:

final AdSize adSize = AdSize(300, 50);

Banner Ad Events

Through the use of BannerAdListener, you can listen for lifecycle events, such as when an ad is loaded. This example implements each method and logs a message to the console:

final BannerAdListener listener = BannerAdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   // Dispose the ad here to free resources.
   ad.dispose();
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an impression occurs on the ad.
 onAdImpression: (Ad ad) => print('Ad impression.'),
);

Load Banner Ad

After a BannerAd is instantiated, load() must be called before it can be shown on the screen.

myBanner.load();

Display a Banner Ad

To display a BannerAd as a widget, you must instantiate an AdWidget with a supported ad after calling load(). You can create the widget before calling load(), but load() must be called before adding it to the widget tree.

final AdWidget adWidget = AdWidget(ad: myBanner);

AdWidget inherits from Flutter's Widget class and can be used as any other widget. On iOS, make sure you place the widget in a widget with a specified width and height. Otherwise, your Ad may not be displayed. A BannerAd can be placed in a container with a size that matches the ad:

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: myBanner.size.width.toDouble(),
  height: myBanner.size.height.toDouble(),
);

Once an Ad has called load(), it must call dispose() when access to it is no longer needed. The best practice for when to call dispose() is either after the AdWidget is removed from the widget tree or in the AdListener.onAdFailedToLoad callback.

That's it! Your app is now ready to display banner ads.

Interstitial Ad

Interstitial ads are full-screen ads that cover the interface of their host app. They're typically displayed at natural transition points in the flow of an app, such as between activities or during the pause between levels in a game. When an app shows an interstitial ad, the user has the choice to either tap on the ad and continue to its destination or close it and return to the app.

This guide explains how to integrate interstitial ads into a Flutter app.

Always test with test ads

When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.

The easiest way to load test ads is to use our dedicated test ad unit ID for interstitials:

  • Android: https://developers.google.com/admob/android/test-ads#sample_ad_units
  • iOS: https://developers.google.com/admob/ios/test-ads#demo_ad_units

It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.

Load an Interstitial Ad

Loading an InterstitialAd requires an adUnitId, an AdRequest, and an InterstitialAdLoadCallback. An example is shown below as well as more information on each parameter following.


InterstitialAd.load(
  adUnitId: '<ad unit id>',
  request: AdRequest(),
  adLoadCallback: InterstitialAdLoadCallback(
    onAdLoaded: (InterstitialAd ad) {
      // Keep a reference to the ad so you can show it later.
      this._interstitialAd = ad;
    },
    onAdFailedToLoad: (LoadAdError error) {
      print('InterstitialAd failed to load: $error');
    },
  ));

Interstitial Ad Events

Through the use of FullScreenContentCallback, you can listen for lifecycle events, such as when the ad is shown or dismissed. Set InterstitialAd.fullScreenContentCallback before showing the ad to receive notifications for these events. This example implements each method and logs a message to the console:

interstitialAd.fullScreenContentCallback = FullScreenContentCallback(
  onAdShowedFullScreenContent: (InterstitialAd ad) =>
     print('$ad onAdShowedFullScreenContent.'),
  onAdDismissedFullScreenContent: (InterstitialAd ad) {
    print('$ad onAdDismissedFullScreenContent.');
    ad.dispose();
  },
  onAdFailedToShowFullScreenContent: (InterstitialAd ad, AdError error) {
    print('$ad onAdFailedToShowFullScreenContent: $error');
    ad.dispose();
  },
  onAdImpression: (InterstitialAd ad) => print('$ad impression occurred.'),
);

Display an Interstitial Ad

An InterstitialAd is displayed as an Overlay on top of all app content and is statically placed. Which means it can not be added to the Flutter widget tree. You can choose when to show the ad by calling show().

myInterstitial.show();

Once show() is called, an Ad displayed this way can't be removed programmatically and requires user input. An InterstitialAd can only be shown once. Subsequent calls to show will trigger onAdFailedToShowFullScreenContent.

Once an ad has called load(), it must call dispose() when access to it is no longer needed. The best practice for when to call dispose() is in the FullScreenContentCallback.onAdDismissedFullScreenContent and FullScreenContentCallback.onAdFailedToShowFullScreenContent callbacks.

That's it! Your app is now ready to display interstitial ads.

Next steps

Native Ads

Native ads are ad assets that are presented to users via UI components that are native to the platform. They're shown using the same types of views with which you're already building your layouts, and can be formatted to match the visual design of the user experience in which they live. In coding terms, this means that when a native ad loads, your app receives a NativeAd object that contains its assets, and the app (rather than the Google Mobile Ads SDK) is then responsible for displaying them.

Broadly speaking, there are two parts to successfully implementing Native Ads: loading an ad via the SDK and displaying the ad content in your app. This guide is concerned with using the SDK to load native ads.

See also the codelab for inline ads in Flutter for a detailed guide on setting up native ads.

Platform Setup

Native Ads are presented to users via UI components that are native to the platform. (e.g. A View on Android or a UIView on iOS).

Since Native Ads require UI components native to a platform, this feature requires additional setup for Android and iOS:

Android

The Android implementation of the Google Mobile Ads plugin requires a class that implements a NativeAdFactory. A NativeAdFactory contains a method that takes a NativeAd and custom options and returns a NativeAdView. The NativeAdView is what will be displayed in your app.

You can implement this in your MainActivity.java or create a separate class in the same directory as MainActivity.java as seen below:

package my.app.path;

import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

class NativeAdFactoryExample implements NativeAdFactory {
  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    // Create NativeAdView
  }
}

Each NativeAdFactory needs to be registered with a factoryId, a unique String identifier, in MainActivity.configureFlutterEngine(FlutterEngine). A NativeAdFactory can be implemented and registered for each unique Native ad layout used by your app or a single one can handle all layouts. The NativeAdFactory should also be unregistered in cleanUpFlutterEngine(engine) when building with add-to-app.

MainActivity.java should look similar to:

package my.app.path;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(FlutterEngine flutterEngine) {
    flutterEngine.getPlugins().add(new GoogleMobileAdsPlugin());
   super.configureFlutterEngine(flutterEngine);

    GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine, "adFactoryExample", NativeAdFactoryExample());
  }

  @Override
  public void cleanUpFlutterEngine(FlutterEngine flutterEngine) {
    GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "adFactoryExample");
  }
}

When creating the NativeAd in Dart, the factoryId will need to match the one used to add the factory to GoogleMobileAdsPlugin. In the above code snippet, adFactoryExample is the name of the factoryId. An example NativeAdFactory follows:

package io.flutter.plugins.googlemobileadsexample;

import android.graphics.Color;
import android.view.LayoutInflater;
import android.widget.TextView;
import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

// my_native_ad.xml can be found at
/* https://github.com/googleads/googleads-mobile-flutter/tree/master/packages/google_mobile_ads/example/android/app/src/main/res/layout
*/
class NativeAdFactoryExample implements NativeAdFactory {
 private final LayoutInflater layoutInflater;

 NativeAdFactoryExample(LayoutInflater layoutInflater) {
   this.layoutInflater = layoutInflater;
 }

 @Override
 public NativeAdView createNativeAd(
     NativeAd nativeAd, Map<String, Object> customOptions) {
   final NativeAdView adView =
       (NativeAdView) layoutInflater.inflate(R.layout.my_native_ad, null);
   final TextView headlineView = adView.findViewById(R.id.ad_headline);
   final TextView bodyView = adView.findViewById(R.id.ad_body);

   headlineView.setText(nativeAd.getHeadline());
   bodyView.setText(nativeAd.getBody());

   adView.setBackgroundColor(Color.YELLOW);

   adView.setNativeAd(nativeAd);
   adView.setBodyView(bodyView);
   adView.setHeadlineView(headlineView);
   return adView;
 }
}

iOS

The iOS implementation of the Google Mobile Ads plugin requires a class that implements a FLTNativeAdFactory. A FLTNativeAdFactory contains a method that takes a GADNativeAd and custom options and returns a GADNativeAdView. The GADNativeAdView is what will be displayed in your app.

The FLTNativeAdFactory protocol can be implemented by AppDelegate or a separate class could be created as seen below:

/* AppDelegate.m */
#import "FLTGoogleMobileAdsPlugin.h"
@interface NativeAdFactoryExample : NSObject<FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  // Create GADNativeAdView
}
@end

Each FLTNativeAdFactory needs to be registered with a factoryId, a unique String identifier, in registerNativeAdFactory:factoryId:nativeAdFactory:. A FLTNativeAdFactory can be implemented and registered for each unique Native ad layout used by your app or a single one can handle all layouts. This is done by importing FLTGoogleMobileAdsPlugin.h and calling registerNativeAdFactory:factoryId:nativeAdFactory: with a FlutterPluginRegistry, a unique identifier for the factory, and the factory itself. The factory also MUST be added after [GeneratedPluginRegistrant registerWithRegistry:self]; has been called.

If this is done in AppDelegate.m, it should look similar to:

#import "FLTGoogleMobileAdsPlugin.h"

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  NativeAdFactoryExample *nativeAdFactory = [[NativeAdFactoryExample alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                        factoryId:@"adFactoryExample"
                                  nativeAdFactory:nativeAdFactory];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

When creating the NativeAd in Dart, the factoryID will need to match the one used to add the factory to FLTGoogleMobileAdsPlugin. In the above code snippet, adFactoryExample is the name of the factoryID.An exampleFLTNativeAdFactory` follows:

// The example NativeAdView.xib can be found at
/* https://github.com/googleads/googleads-mobile-flutter/blob/master/packages/google_mobile_ads/example/ios/Runner/NativeAdView.xib
*/
@interface NativeAdFactoryExample : NSObject <FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                            customOptions:(NSDictionary *)customOptions {
 // Create and place ad in view hierarchy.
 GADNativeAdView *adView =
     [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;

 // Associate the native ad view with the native ad object. This is
 // required to make the ad clickable.
 adView.nativeAd = nativeAd;

 // Populate the native ad view with the native ad assets.
 // The headline is guaranteed to be present in every native ad.
 ((UILabel *)adView.headlineView).text = nativeAd.headline;

 // These assets are not guaranteed to be present. Check that they are before
 // showing or hiding them.
 ((UILabel *)adView.bodyView).text = nativeAd.body;
 adView.bodyView.hidden = nativeAd.body ? NO : YES;

 [((UIButton *)adView.callToActionView) setTitle:nativeAd.callToAction
                                        forState:UIControlStateNormal];
 adView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;

 ((UIImageView *)adView.iconView).image = nativeAd.icon.image;
 adView.iconView.hidden = nativeAd.icon ? NO : YES;

 ((UILabel *)adView.storeView).text = nativeAd.store;
 adView.storeView.hidden = nativeAd.store ? NO : YES;

 ((UILabel *)adView.priceView).text = nativeAd.price;
 adView.priceView.hidden = nativeAd.price ? NO : YES;

 ((UILabel *)adView.advertiserView).text = nativeAd.advertiser;
 adView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;

 // In order for the SDK to process touch events properly, user interaction
 // should be disabled.
 adView.callToActionView.userInteractionEnabled = NO;

 return adView;
}
@end

Always test with test ads

When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.

The easiest way to load test ads is to use our dedicated test ad unit ID for native ads:

  • Android: https://developers.google.com/admob/android/test-ads#sample_ad_units
  • iOS: https://developers.google.com/admob/ios/test-ads#demo_ad_units

It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.

Instantiate a Native Ad

A NativeAd requires an adUnitId, a factoryId, an AdRequest, and a NativeAdListener. An example is shown below as well as more information on each parameter following.

final NativeAd myNative = NativeAd(
  adUnitId: '<test id or account id>',
  factoryId: 'adFactoryExample',
  request: AdRequest(),
  listener: NativeAdListener(),
);

Factory Id

The factoryId will need to match the one used to add the factory to GoogleMobileAdsPlugin on Android and/or the FLTGoogleMobileAdsPlugin on iOS. The same factoryId can be used by both platforms or each can have their own.

Native Ad Events

Through the use of NativeAdListener, you can listen for lifecycle events, such as when an ad is closed or the user leaves the app. This example implements each method and logs a message to the console:

final NativeAdListener listener = NativeAdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   // Dispose the ad here to free resources.
   ad.dispose();
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an impression occurs on the ad.
 onAdImpression: (Ad ad) => print('Ad impression.'),
 // Called when a click is recorded for a NativeAd.
 onNativeAdClicked: (NativeAd ad) => print('Ad clicked.'),
);

NativeAdOptions

NativeAds have an optional argument, nativeAdOptions, which can be used to set specific options on the native ad.

shouldReturnUrlsForImageAssets

If set to `true`, the SDK will not load image asset content and native ad image URLs can be used to fetch content. Defaults to false.

shouldRequestMultipleImages

Some image assets will contain a series of images rather than just one. By setting this value to true, your app indicates that it's prepared to display all the images for any assets that have more than one. By setting it to false (the default) your app instructs the SDK to provide just the first image for any assets that contain a series.

If no NativeadOptions are passed in when initializing a NativeAd, the default value for each property will be used.

 

adChoicesPlacement

The [AdChoices overlay](https://developers.google.com/admob/android/native/advanced#adchoices_overlay) is set to the top right corner by default. Apps can change which corner this overlay is rendered in by setting this property to one of the following:

  • AdChoicesPlacement.topRightCorner
  • AdChoicesPlacement.topLeftCorner
  • AdChoicesPlacement.bottomRightCorner
  • AdChoicesPlacement.bottomLeftCorner

 

videoOptions

Can be used to set video options for video assets returned as part of a native ad.

mediaAspectRatio

This sets the aspect ratio for image or video to be returned for the native ad. Setting NativeMediaAspectRatio to one of the following constants will cause only ads with media of the specified aspect ratio to be returned:

  • MediaAspectRatio.landscape
  • MediaAspectRatio.portrait
  • MediaAspectRatio.square
  • MediaAspectRatio.any

If not set, ads with any aspect ratio will be returned.

 

Load Native Ad

After a NativeAd is instantiated, load() must be called before it can be shown on the screen.

myNative.load();

Display a Native Ad

To display a NativeAd as a widget, you must instantiate an AdWidget with a supported ad after calling load(). You can create the widget before calling load(), but load() must be called before adding it to the widget tree.

final AdWidget adWidget = AdWidget(ad: myBanner);

AdWidget inherits from Flutter's Widget class and can be used as any other widget. On iOS, make sure you place the widget in a widget with a specified width and height. Otherwise, your Ad may not be displayed.

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: 500,
  height: 500,
);

Once an Ad has called load(), it must call dispose() when access to it is no longer needed. The best practice for when to call dispose() is either after the AdWidget is removed from the widget tree or in the AdListener.onAdFailedToLoad callback.

That's it! Your app is now ready to display native ads.

Next steps

Rewarded Ads

Rewarded ads are ads that users have the option of interacting with in exchange for in-app rewards. This guide shows you how to integrate rewarded ads from AdMob into a Flutter app.

Always test with test ads

When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.

The easiest way to load test ads is to use our dedicated test ad unit ID for rewarded:

  • Android: https://developers.google.com/admob/android/test-ads#sample_ad_units
  • iOS: https://developers.google.com/admob/ios/test-ads#demo_ad_units

It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.

Load a Rewarded Ad

Loading a RewardedAd requires an adUnitId, an AdRequest, and a RewardedAdLoadCallback. An example is shown below as well as more information on each parameter following.

RewardedAd.load(
  adUnitId: '<test id or account id>',
  request: AdRequest(),
  rewardedAdLoadCallback: RewardedAdLoadCallback(
    onAdLoaded: (RewardedAd ad) {
      print('$ad loaded.');
      // Keep a reference to the ad so you can show it later.
      this._rewardedAd = ad;
    },
    onAdFailedToLoad: (LoadAdError error) {
      print('RewardedAd failed to load: $error');
    },
);

Rewarded Ad Events

Through the use of FullScreenContentCallback, you can listen for lifecycle events, such as when the ad is shown or dismissed. Set RewardedAd.fullScreenContentCallback before showing the ad to receive notifications for these events. This example implements each method and logs a message to the console:

rewardedAd.fullScreenContentCallback = FullScreenContentCallback(
  onAdShowedFullScreenContent: (RewardedAd ad) =>
     print('$ad onAdShowedFullScreenContent.'),
  onAdDismissedFullScreenContent: (RewardedAd ad) {
    print('$ad onAdDismissedFullScreenContent.');
    ad.dispose();
  },
  onAdFailedToShowFullScreenContent: (RewardedAd ad, AdError error) {
    print('$ad onAdFailedToShowFullScreenContent: $error');
    ad.dispose();
  },
  onAdImpression: (RewardedAd ad) => print('$ad impression occurred.'),
);

Display a RewardedAd

A RewardedAd is displayed as an Overlay is displayed on top of all app content and is statically placed. Which means it can not be displayed this way can't be added to the Flutter widget tree. You can choose when to show the ad by calling show(). RewardedAd.show() takes an OnUserEarnedRewardCallback, which is invoked when the user earns a reward. Be sure to implement this and reward the user for watching an ad.

myRewarded.show(onUserEarnedReward: (RewardedAd ad, RewardItem rewardItem) {
  // Reward the user for watching an ad.
});

Once show() is called, an Ad displayed this way can't be removed programmatically and require user input. An RewardedAd can only be shown once. Subsequent calls to show will trigger onAdFailedToShowFullScreenContent.

Once an ad has called load(), it must call dispose() when access to it is no longer needed. The best practice for when to call dispose() is in the FullScreenContentCallback.onAdDismissedFullScreenContent and FullScreenContentCallback.onAdFailedToShowFullScreenContent callbacks.

That's it! Your app is now ready to display rewarded ads.

Creating and Loading an Ad with Ad Manager

This section shows how to create and load ads with Google Ad Manager.

Select an Ad Format

  • Banner
    • Rectangular ads that appear at the top or bottom of the device screen. Banner ads stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time. If you're new to mobile advertising, they're a great place to start.
  • Interstitial
    • Full-screen ads that cover the interface of an app until closed by the user. They're best used at natural pauses in the flow of an app's execution, such as between levels of a game or just after a task is completed.
  • Native Ads
    • Customizable ads that match the look and feel of your app. You decide how and where they're placed, so the layout is more consistent with your app's design.
  • Rewarded
    • Ads that reward users for watching short videos and interacting with playable ads and surveys. Good for monetizing free-to-play users.

AdManagerAdRequest

For Ad Manager you will be using AdManagerAdRequest instead of AdRequest. AdManagerAdRequest is similar to AdRequest but has two additional properties: customTargeting and customTargetingLists, which are used to support custom targeting.

final AdManagerAdRequest request = AdManagerAdRequest(
  keywords: <String>['flutterio', 'beautiful apps'],
  contentUrl: 'https://flutter.dev',
  customTargeting: <String, String>{'some': 'targeting'},
  customTargetingLists: <String, List<String>>{'favoriteColors': <String>['red', 'yellow']},
);

Ad Manager Banner Ads

Banner ads occupy a spot within an app's layout, either at the top or bottom of the device screen. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time.

This guide shows you how to integrate banner ads from Ad Manager into a Flutter app. In addition to code snippets and instructions, it also includes information about sizing banners properly and links to additional resources.

See also the codelab for inline ads in Flutter for a detailed guide on setting up banner ads.

Always test with test ads

When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.

The easiest way to load test ads is to use our dedicated test ad unit ID for banners:

  • Android: https://developers.google.com/ad-manager/mobile-ads-sdk/android/test-ads#sample_ad_units
  • iOS: https://developers.google.com/ad-manager/mobile-ads-sdk/ios/test-ads#demo_ad_units

It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.

Instantiate a Banner Ad

A AdManagerBannerAd requires an adUnitId, an AdSize, an AdRequest, and an AdListener. An example is shown below as well as more information on each parameter following.

final AdManagerBannerAd myBanner = AdManagerBannerAd(
  adUnitId: '<ad unit id>',
  size: AdSize.banner,
  request: AdManagerAdRequest(),
  listener: AdManagerBannerAdListener(),
);

Banner Sizes

The table below lists the standard banner sizes.

Size in dp (WxH)DescriptionAdSize Constant
320x50Standard Bannerbanner
320x100Large BannerlargeBanner
320x250Medium RectanglemediumRectangle
468x60Full-Size BannerfullBanner
728x90Leaderboardleaderboard
Screen width x 32|50|90Smart BannerUse getSmartBanner(Orientation)

To define a custom banner size, set your desired AdSize, as shown here:

final AdSize adSize = AdSize(300, 50);

Banner Ad Events

Through the use of AdManagerBannerAdListener, you can listen for lifecycle events, such as when an ad is closed. This example implements each method and logs a message to the console:

final AdManagerBannerAdListener listener = AdManagerBannerAdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   // Dispose the ad here to free resources.
   ad.dispose();
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an impression occurs on the ad.
 onAdImpression: (Ad ad) => print('Ad impression.'),
);

Load Banner Ad

After a AdManagerBannerAd is instantiated, load() must be called before it can be shown on the screen.

myBanner.load();

Display a Banner Ad

To display a AdManagerBannerAd as a widget, you must instantiate an AdWidget with a supported ad after calling load(). You can create the widget before calling load(), but load() must be called before adding it to the widget tree.

final AdWidget adWidget = AdWidget(ad: myBanner);

AdWidget inherits from Flutter's Widget class and can be used as any other widget. On iOS, make sure you place the widget in a widget with a specified width and height. Otherwise, your Ad may not be displayed. A AdManagerBannerAd can be placed in a container with a size that matches the ad:

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: myBanner.size.width.toDouble(),
  height: myBanner.size.height.toDouble(),
);

Once an Ad has called load(), it must call dispose() when access to it is no longer needed. The best practice for when to call dispose() is either after the AdWidget is removed from the widget tree or in the AdManagerBannerAdListener.onAdFailedToLoad callback.

That's it! Your app is now ready to display banner ads.

Ad Manager Interstitial Ad

Interstitial ads are full-screen ads that cover the interface of their host app. They're typically displayed at natural transition points in the flow of an app, such as between activities or during the pause between levels in a game. When an app shows an interstitial ad, the user has the choice to either tap on the ad and continue to its destination or close it and return to the app.

This guide explains how to integrate interstitial ads into a Flutter app.

Always test with test ads

When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.

The easiest way to load test ads is to use our dedicated test ad unit ID for interstitials:

  • Android: https://developers.google.com/ad-manager/mobile-ads-sdk/android/test-ads#sample_ad_units
  • iOS: https://developers.google.com/ad-manager/mobile-ads-sdk/ios/test-ads#demo_ad_units

It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.

Load an Interstitial Ad

Loading an AdManagerInterstitialAd requires an adUnitId, an AdRequest, and an AdManagerInterstitialAdLoadCallback. An example is shown below as well as more information on each parameter following.

AdManagerInterstitialAd.load(
  adUnitId: '<ad unit id>',
  request: AdRequest(),
  adLoadCallback: AdManagerInterstitialAdLoadCallback(
    onAdLoaded: (AdManagerInterstitialAd ad) {
      // Keep a reference to the ad so you can show it later.
      this._interstitialAd = ad;
    },
    onAdFailedToLoad: (LoadAdError error) {
      print('InterstitialAd failed to load: $error');
    },
  ));

Interstitial Ad Events

Through the use of FullScreenContentCallback, you can listen for lifecycle events, such as when the ad is shown or dismissed. Set AdManagerInterstitialAd.fullScreenContentCallback before showing the ad to receive notifications for these events. This example implements each method and logs a message to the console:

interstitialAd.fullScreenContentCallback = FullScreenContentCallback(
  onAdShowedFullScreenContent: (InterstitialAd ad) =>
     print('$ad onAdShowedFullScreenContent.'),
  onAdDismissedFullScreenContent: (InterstitialAd ad) {
    print('$ad onAdDismissedFullScreenContent.');
    ad.dispose();
  },
  onAdFailedToShowFullScreenContent: (InterstitialAd ad, AdError error) {
    print('$ad onAdFailedToShowFullScreenContent: $error');
    ad.dispose();
  },
  onAdImpression: (InterstitialAd ad) => print('$ad impression occurred.'),
);

Display an Interstitial Ad

A AdManagerInterstitialAd is displayed as an Overlay on top of all app content and is statically placed. Which means it can not be added to the Flutter widget tree. You can choose when to show the ad by calling show().

myInterstitial.show();

Once show() is called, an Ad displayed this way can't be removed programmatically and requires user input. An InterstitialAd can only be shown once. Subsequent calls to show will trigger onAdFailedToShowFullScreenContent.

Once an ad has called load(), it must call dispose() when access to it is no longer needed. The best practice for when to call dispose() is in the FullScreenContentCallback.onAdDismissedFullScreenContent and FullScreenContentCallback.onAdFailedToShowFullScreenContent callbacks.

That's it! Your app is now ready to display interstitial ads.

Next steps

Ad Manager Native Ads

Native ads are ad assets that are presented to users via UI components that are native to the platform. They're shown using the same types of views with which you're already building your layouts, and can be formatted to match the visual design of the user experience in which they live. In coding terms, this means that when a native ad loads, your app receives a NativeAd object that contains its assets, and the app (rather than the Google Mobile Ads SDK) is then responsible for displaying them.

Broadly speaking, there are two parts to successfully implementing Native Ads: loading an ad via the SDK and displaying the ad content in your app. This guide is concerned with using the SDK to load native ads.

See also the codelab for inline ads in Flutter for a detailed guide on setting up native ads.

Platform Setup

Native Ads are presented to users via UI components that are native to the platform. (e.g. A View on Android or a UIView on iOS).

Since Native Ads require UI components native to a platform, this feature requires additional setup for Android and iOS:

Android

The Android implementation of the Google Mobile Ads plugin requires a class that implements a NativeAdFactory. A NativeAdFactory contains a method that takes a NativeAd and custom options and returns a NativeAdView. The NativeAdView is what will be displayed in your app.

You can implement this in your MainActivity.java or create a separate class in the same directory as MainActivity.java as seen below:

package my.app.path;

import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

class NativeAdFactoryExample implements NativeAdFactory {
  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    // Create NativeAdView
  }
}

Each NativeAdFactory needs to be registered with a factoryId, a unique String identifier, in MainActivity.configureFlutterEngine(FlutterEngine). A NativeAdFactory can be implemented and registered for each unique Native ad layout used by your app or a single one can handle all layouts. The NativeAdFactory should also be unregistered in cleanUpFlutterEngine(engine) when building with add-to-app.

MainActivity.java should look similar to:

package my.app.path;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(FlutterEngine flutterEngine) {
    flutterEngine.getPlugins().add(new GoogleMobileAdsPlugin());
   super.configureFlutterEngine(flutterEngine);

    GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine, "adFactoryExample", NativeAdFactoryExample());
  }

  @Override
  public void cleanUpFlutterEngine(FlutterEngine flutterEngine) {
    GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "adFactoryExample");
  }
}

When creating the NativeAd in Dart, the factoryId will need to match the one used to add the factory to GoogleMobileAdsPlugin. In the above code snippet, adFactoryExample is the name of the factoryId. An example NativeAdFactory follows:

package io.flutter.plugins.googlemobileadsexample;

import android.graphics.Color;
import android.view.LayoutInflater;
import android.widget.TextView;
import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

// my_native_ad.xml can be found at
/* https://github.com/googleads/googleads-mobile-flutter/tree/master/packages/google_mobile_ads/example/android/app/src/main/res/layout
*/
class NativeAdFactoryExample implements NativeAdFactory {
 private final LayoutInflater layoutInflater;

 NativeAdFactoryExample(LayoutInflater layoutInflater) {
   this.layoutInflater = layoutInflater;
 }

 @Override
 public NativeAdView createNativeAd(
     NativeAd nativeAd, Map<String, Object> customOptions) {
   final NativeAdView adView =
       (NativeAdView) layoutInflater.inflate(R.layout.my_native_ad, null);
   final TextView headlineView = adView.findViewById(R.id.ad_headline);
   final TextView bodyView = adView.findViewById(R.id.ad_body);

   headlineView.setText(nativeAd.getHeadline());
   bodyView.setText(nativeAd.getBody());

   adView.setBackgroundColor(Color.YELLOW);

   adView.setNativeAd(nativeAd);
   adView.setBodyView(bodyView);
   adView.setHeadlineView(headlineView);
   return adView;
 }
}

iOS

The iOS implementation of the Google Mobile Ads plugin requires a class that implements a FLTNativeAdFactory. A FLTNativeAdFactory contains a method that takes a GADNativeAd and custom options and returns a GADNativeAdView. The GADNativeAdView is what will be displayed in your app.

The FLTNativeAdFactory protocol can be implemented by AppDelegate or a separate class could be created as seen below:

/* AppDelegate.m */
#import "FLTGoogleMobileAdsPlugin.h"
@interface NativeAdFactoryExample : NSObject<FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  // Create GADNativeAdView
}
@end

Each FLTNativeAdFactory needs to be registered with a factoryId, a unique String identifier, in registerNativeAdFactory:factoryId:nativeAdFactory:. A FLTNativeAdFactory can be implemented and registered for each unique Native ad layout used by your app or a single one can handle all layouts. This is done by importing FLTGoogleMobileAdsPlugin.h and calling registerNativeAdFactory:factoryId:nativeAdFactory: with a FlutterPluginRegistry, a unique identifier for the factory, and the factory itself. The factory also MUST be added after [GeneratedPluginRegistrant registerWithRegistry:self]; has been called.

If this is done in AppDelegate.m, it should look similar to:

#import "FLTGoogleMobileAdsPlugin.h"

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  NativeAdFactoryExample *nativeAdFactory = [[NativeAdFactoryExample alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                        factoryId:@"adFactoryExample"
                                  nativeAdFactory:nativeAdFactory];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

When creating the NativeAd in Dart, the factoryID will need to match the one used to add the factory to FLTGoogleMobileAdsPlugin. In the above code snippet, adFactoryExample is the name of the factoryID.An exampleFLTNativeAdFactory` follows:

// The example NativeAdView.xib can be found at
/* https://github.com/googleads/googleads-mobile-flutter/blob/master/packages/google_mobile_ads/example/ios/Runner/NativeAdView.xib
*/
@interface NativeAdFactoryExample : NSObject <FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                            customOptions:(NSDictionary *)customOptions {
 // Create and place ad in view hierarchy.
 GADNativeAdView *adView =
     [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;

 // Associate the native ad view with the native ad object. This is
 // required to make the ad clickable.
 adView.nativeAd = nativeAd;

 // Populate the native ad view with the native ad assets.
 // The headline is guaranteed to be present in every native ad.
 ((UILabel *)adView.headlineView).text = nativeAd.headline;

 // These assets are not guaranteed to be present. Check that they are before
 // showing or hiding them.
 ((UILabel *)adView.bodyView).text = nativeAd.body;
 adView.bodyView.hidden = nativeAd.body ? NO : YES;

 [((UIButton *)adView.callToActionView) setTitle:nativeAd.callToAction
                                        forState:UIControlStateNormal];
 adView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;

 ((UIImageView *)adView.iconView).image = nativeAd.icon.image;
 adView.iconView.hidden = nativeAd.icon ? NO : YES;

 ((UILabel *)adView.storeView).text = nativeAd.store;
 adView.storeView.hidden = nativeAd.store ? NO : YES;

 ((UILabel *)adView.priceView).text = nativeAd.price;
 adView.priceView.hidden = nativeAd.price ? NO : YES;

 ((UILabel *)adView.advertiserView).text = nativeAd.advertiser;
 adView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;

 // In order for the SDK to process touch events properly, user interaction
 // should be disabled.
 adView.callToActionView.userInteractionEnabled = NO;

 return adView;
}
@end

Always test with test ads

When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.

The easiest way to load test ads is to use our dedicated test ad unit ID for native ads:

  • Android: https://developers.google.com/ad-manager/mobile-ads-sdk/android/test-ads#sample_ad_units
  • iOS: https://developers.google.com/ad-manager/mobile-ads-sdk/ios/test-ads#demo_ad_units

It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.

Instantiate a Native Ad

A NativeAd requires an adUnitId, a factoryId, an AdRequest, and an AdListener. An example is shown below as well as more information on each parameter following.

final NativeAd myNative = NativeAd.fromAdManagerRequest(
  adUnitId: '<test id or account id>',
  factoryId: 'adFactoryExample',
  adManagerRequest: AdManagerAdRequest(),
  listener: NativeAdListener(),
);

Factory Id

The factoryId will need to match the one used to add the factory to GoogleMobileAdsPlugin on Android and/or the FLTGoogleMobileAdsPlugin on iOS. The same factoryId can be used by both platforms or each can have their own.

Native Ad Events

Through the use of NativeAdListener, you can listen for lifecycle events, such as when an ad is closed or the user leaves the app. This example implements each method and logs a message to the console:

final NativeAdListener listener = NativeAdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   // Dispose the ad here to free resources.
   ad.dispose();
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an impression occurs on the ad.
 onAdImpression: (Ad ad) => print('Ad impression.'),
 // Called when a click is recorded for a NativeAd.
 onNativeAdClicked: (NativeAd ad) => print('Ad clicked.'),
);

NativeAdOptions

NativeAds have an optional argument, nativeAdOptions, which can be used to set specific options on the native ad.

shouldReturnUrlsForImageAssets

If set to `true`, the SDK will not load image asset content and native ad image URLs can be used to fetch content. Defaults to false.

shouldRequestMultipleImages

Some image assets will contain a series of images rather than just one. By setting this value to true, your app indicates that it's prepared to display all the images for any assets that have more than one. By setting it to false (the default) your app instructs the SDK to provide just the first image for any assets that contain a series.

If no NativeadOptions are passed in when initializing a NativeAd, the default value for each property will be used.

 

adChoicesPlacement

The [AdChoices overlay](https://developers.google.com/admob/android/native/advanced#adchoices_overlay) is set to the top right corner by default. Apps can change which corner this overlay is rendered in by setting this property to one of the following:

  • AdChoicesPlacement.topRightCorner
  • AdChoicesPlacement.topLeftCorner
  • AdChoicesPlacement.bottomRightCorner
  • AdChoicesPlacement.bottomLeftCorner

 

videoOptions

Can be used to set video options for video assets returned as part of a native ad.

mediaAspectRatio

This sets the aspect ratio for image or video to be returned for the native ad. Setting NativeMediaAspectRatio to one of the following constants will cause only ads with media of the specified aspect ratio to be returned:

  • MediaAspectRatio.landscape
  • MediaAspectRatio.portrait
  • MediaAspectRatio.square
  • MediaAspectRatio.any

If not set, ads with any aspect ratio will be returned.

 

Load Native Ad

After a NativeAd is instantiated, load() must be called before it can be shown on the screen.

myNative.load();

Display a Native Ad

To display a NativeAd as a widget, you must instantiate an AdWidget with a supported ad after calling load(). You can create the widget before calling load(), but load() must be called before adding it to the widget tree.

final AdWidget adWidget = AdWidget(ad: myBanner);

AdWidget inherits from Flutter's Widget class and can be used as any other widget. On iOS, make sure you place the widget in a widget with a specified width and height. Otherwise, your Ad may not be displayed.

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: 500,
  height: 500,
);

Once an Ad has called load(), it must call dispose() when access to it is no longer needed. The best practice for when to call dispose() is either after the AdWidget is removed from the widget tree or in the AdListener.onAdFailedToLoad callback.

That's it! Your app is now ready to display native ads.

Next steps

Ad Manager Rewarded Ads

Rewarded ads are ads that users have the option of interacting with in exchange for in-app rewards. This guide shows you how to integrate rewarded ads from Ad Manager into a Flutter app.

Always test with test ads

When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.

The easiest way to load test ads is to use our dedicated test ad unit ID for rewarded:

  • Android: https://developers.google.com/ad-manager/mobile-ads-sdk/android/test-ads#sample_ad_units
  • iOS: https://developers.google.com/ad-manager/mobile-ads-sdk/ios/test-ads#demo_ad_units

It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.

Load a Rewarded Ad

Loading a RewardedAd requires an adUnitId, an AdManagerAdRequest, and a RewardedAdLoadCallback. An example is shown below as well as more information on each parameter following.

RewardedAd.loadWithAdManagerAdRequest(
  adUnitId: '<test id or account id>',
  adManagerRequest: AdManagerAdRequest(),
  rewardedAdLoadCallback: RewardedAdLoadCallback(
    onAdLoaded: (RewardedAd ad) {
      print('$ad loaded.');
      // Keep a reference to the ad so you can show it later.
      this._rewardedAd = ad;
    },
    onAdFailedToLoad: (LoadAdError error) {
      print('RewardedAd failed to load: $error');
    },
);

Rewarded Ad Events

Through the use of FullScreenContentCallback, you can listen for lifecycle events, such as when the ad is shown or dismissed. Set RewardedAd.fullScreenContentCallback before showing the ad to receive notifications for these events. This example implements each method and logs a message to the console:

rewardedAd.fullScreenContentCallback = FullScreenContentCallback(
  onAdShowedFullScreenContent: (RewardedAd ad) =>
     print('$ad onAdShowedFullScreenContent.'),
  onAdDismissedFullScreenContent: (RewardedAd ad) {
    print('$ad onAdDismissedFullScreenContent.');
    ad.dispose();
  },
  onAdFailedToShowFullScreenContent: (RewardedAd ad, AdError error) {
    print('$ad onAdFailedToShowFullScreenContent: $error');
    ad.dispose();
  },
  onAdImpression: (RewardedAd ad) => print('$ad impression occurred.'),
);

Display a RewardedAd

A RewardedAd is displayed as an Overlay is displayed on top of all app content and is statically placed. Which means it can not be displayed this way can't be added to the Flutter widget tree. You can choose when to show the ad by calling show(). A RewardedAd can only be shown once. Subsequent calls to show will trigger onAdFailedToShowFullScreenContent. RewardedAd.show() takes an OnUserEarnedRewardCallback, which is invoked when the user earns a reward. Be sure to implement this and reward the user for watching an ad.

myRewarded.show(onUserEarnedReward: (RewardedAd ad, RewardItem rewardItem) {
  // Reward the user for watching an ad.
});

Once show() is called, an Ad displayed this way can't be removed programmatically and require user input. Do not call show() more than once for a loaded RewardedAd. Instead you should load a new ad.

Once an ad has called load(), it must call dispose() when access to it is no longer needed. The best practice for when to call dispose() is in the FullScreenContentCallback.onAdDismissedFullScreenContent and FullScreenContentCallback.onAdFailedToShowFullScreenContent callbacks.

That's it! Your app is now ready to display rewarded ads.

Next Steps

Targeting

The RequestConfiguration object collects the global configuration for every ad request and is applied byMobileAds.instance.updateRequestConfiguration().

Child-directed setting

For purposes of the Children's Online Privacy Protection Act (COPPA), there is a setting called "tag for child-directed treatment."

As an app developer, you can indicate whether you want Google to treat your content as child-directed when you make an ad request. If you indicate that you want Google to treat your content as child-directed, we take steps to disable IBA and remarketing ads on that ad request. The setting can be used with all versions of the Google Play services SDK viaRequestConfiguration.tagForChildDirectedTreatment():

  • Use the argument TagForChildDirectedTreatment.yes to indicate that you want your content treated as child-directed for the purposes of COPPA.
  • Use the argument TagForChildDirectedTreatment.no to indicate that you don't want your content treated as child-directed for the purposes of COPPA.
  • Use the argument TagForChildDirectedTreatment.unspecified or do not set this tag if you do not wish to indicate how you would like your content treated with respect to COPPA in ad requests.

The following example indicates that you want your content treated as child-directed for purposes of COPPA:

final RequestConfiguration requestConfiguration = RequestConfiguration(
  tagForChildDirectedTreatment: TagForChildDirectedTreatment.yes);
MobileAds.instance.updateRequestConfiguration(requestConfiguration);

Users under the age of consent

You can mark your ad requests to receive treatment for users in the European Economic Area (EEA) under the age of consent. This feature is designed to help facilitate compliance with the General Data Protection Regulation (GDPR). Note that you may have other legal obligations under GDPR. Please review the European Union’s guidance and consult with your own legal counsel. Please remember that Google's tools are designed to facilitate compliance and do not relieve any particular publisher of its obligations under the law. Learn more about how the GDPR affects publishers.

When using this feature, a Tag For Users under the Age of Consent in Europe (TFUA) parameter will be included in the ad request. This parameter disables personalized advertising, including remarketing, for that specific ad request. It also disables requests to third-party ad vendors, such as ad measurement pixels and third-party ad servers.

The setting can be used via RequestConfiguration.tagForUnderAgeOfConsent():

  • Use the argument TagForUnderAgeOfConsent.yes to indicate that you want the request configuration to be handled in a manner suitable for users under the age of consent.
  • Use the argument TagForUnderAgeOfConsent.no to indicates that you don't want the request configuration to be handled in a manner suitable for users under the age of consent.
  • Use the argument TagForUnderAgeOfConsent.unspecified or do not set this tag to indicate that you have not specified whether the ad request should receive treatment for users in the European Economic Area (EEA) under the age of consent. The following example indicates that you want TFUA included in your ad request:
final RequestConfiguration requestConfiguration = RequestConfiguration(
  tagForUnderAgeOfConsent: TagForUnderAgeOfConsent.yes);
MobileAds.instance.updateRequestConfiguration(requestConfiguration);

The tags to enable the Child-directed setting and setTagForUnderAgeOfConsent should not both simultaneously be set to true. If they are, the child-directed setting takes precedence.

Ad Content Filtering

The setting can be set viaRequestConfiguration.maxAdContentRating():

AdMob ads returned for these requests have a content rating at or below that level. The possible values for this network extra are based on digital content label classifications, and should be one of the followingMaxAdContentRating objects:

  • MaxAdContentRating.g
  • MaxAdContentRating.pg
  • MaxAdContentRating.t
  • MaxAdContentRating.ma

The following code configures aRequestConfiguration object to specify that ad content returned should correspond to a digital content label designation no higher than G:

final RequestConfiguration requestConfiguration = RequestConfiguration(
  maxAdContentRating: MaxAdContentRating.g);
MobileAds.instance.updateRequestConfiguration(requestConfiguration);

Response Info

For debugging and logging purposes, LoadAdErrors and successfully loaded ads provide a ResponseInfo object. This object contains information about the ad it loaded. Each ad format class has a property Ad.responseInfo which is populated after it loads.

Properties on the ResponseInfo object include:

mediationAdapterClassName : The class name of the ad network that fetched the current ad.

responseId : The response identifier is a unique identifier for the ad response. This identifier can be used to identify and block the ad in the Ads Review Center (ARC).

adapterResponses : The list of AdapterResponseInfo containing metadata for each adapter included in the ad response. Can be used to debug the mediation waterfall execution.

For each ad network in the waterfall, AdapterResponseInfo provides the following properties:

PropertyDescription
adapterClassNameA class name that identifies the ad network.
credentialsA string description of adapter credentials specified in the AdMob or Ad Manager UI.
adErrorError associated with the request to the network. Null if the network successfully loaded an ad or if the network was not attempted.
latencyMillisAmount of time the ad network spent loading an ad. 0 if the network was not attempted.
descriptionA log friendly string version of the AdapterResponseInfo.

Ad Load Errors

When an ad fails to load, a failure callback is called which provides a LoadAdError object.

The following code snippet retrieves error information when a rewarded ad fails to load:

onAdFailedToLoad: (ad, loadAdError) {
  // Gets the domain from which the error came.
  String domain = loadAdError.domain;

  // Gets the error code. See
  // https://developers.google.com/android/reference/com/google/android/gms/ads/AdRequest
  // and https://developers.google.com/admob/ios/api/reference/Enums/GADErrorCode
  // for a list of possible codes.
  int code = loadAdError.code;
  
  // A log friendly string summarizing the error.
  String message = loadAdError.message;
  
  // Get response information, which may include results of mediation requests.
  ResponseInfo? responseInfo = loadAdError.responseInfo;
}

This information can be used to more accurately determine what caused the ad load to fail. In particular, for errors under the domain com.google.admob on iOS and com.google.android.gms.ads on Android, the GetMessage() can be looked up in this help center article for a more detailed explanation and possible actions that can be taken to resolve the issue.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add google_mobile_ads

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  google_mobile_ads: ^0.13.4

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:google_mobile_ads/google_mobile_ads.dart';

example/lib/main.dart

// Copyright 2021 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// ignore_for_file: public_member_api_docs

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

import 'reusable_inline_example.dart';

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

// You can also test with your own ad unit IDs by registering your device as a
// test device. Check the logs for your device's ID value.
const String testDevice = 'YOUR_DEVICE_ID';
const int maxFailedLoadAttempts = 3;

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  static final AdRequest request = AdRequest(
    keywords: <String>['foo', 'bar'],
    contentUrl: 'http://foo.com/bar.html',
    nonPersonalizedAds: true,
  );

  InterstitialAd? _interstitialAd;
  int _numInterstitialLoadAttempts = 0;

  RewardedAd? _rewardedAd;
  int _numRewardedLoadAttempts = 0;

  BannerAd? _anchoredBanner;
  bool _loadingAnchoredBanner = false;

  @override
  void initState() {
    super.initState();
    _createInterstitialAd();
    _createRewardedAd();
  }

  void _createInterstitialAd() {
    InterstitialAd.load(
        adUnitId: InterstitialAd.testAdUnitId,
        request: request,
        adLoadCallback: InterstitialAdLoadCallback(
          onAdLoaded: (InterstitialAd ad) {
            print('$ad loaded');
            _interstitialAd = ad;
            _numInterstitialLoadAttempts = 0;
            _interstitialAd!.setImmersiveMode(true);
          },
          onAdFailedToLoad: (LoadAdError error) {
            print('InterstitialAd failed to load: $error.');
            _numInterstitialLoadAttempts += 1;
            _interstitialAd = null;
            if (_numInterstitialLoadAttempts <= maxFailedLoadAttempts) {
              _createInterstitialAd();
            }
          },
        ));
  }

  void _showInterstitialAd() {
    if (_interstitialAd == null) {
      print('Warning: attempt to show interstitial before loaded.');
      return;
    }
    _interstitialAd!.fullScreenContentCallback = FullScreenContentCallback(
      onAdShowedFullScreenContent: (InterstitialAd ad) =>
          print('ad onAdShowedFullScreenContent.'),
      onAdDismissedFullScreenContent: (InterstitialAd ad) {
        print('$ad onAdDismissedFullScreenContent.');
        ad.dispose();
        _createInterstitialAd();
      },
      onAdFailedToShowFullScreenContent: (InterstitialAd ad, AdError error) {
        print('$ad onAdFailedToShowFullScreenContent: $error');
        ad.dispose();
        _createInterstitialAd();
      },
    );
    _interstitialAd!.show();
    _interstitialAd = null;
  }

  void _createRewardedAd() {
    RewardedAd.load(
        adUnitId: RewardedAd.testAdUnitId,
        request: request,
        rewardedAdLoadCallback: RewardedAdLoadCallback(
          onAdLoaded: (RewardedAd ad) {
            print('$ad loaded.');
            _rewardedAd = ad;
            _numRewardedLoadAttempts = 0;
          },
          onAdFailedToLoad: (LoadAdError error) {
            print('RewardedAd failed to load: $error');
            _rewardedAd = null;
            _numRewardedLoadAttempts += 1;
            if (_numRewardedLoadAttempts <= maxFailedLoadAttempts) {
              _createRewardedAd();
            }
          },
        ));
  }

  void _showRewardedAd() {
    if (_rewardedAd == null) {
      print('Warning: attempt to show rewarded before loaded.');
      return;
    }
    _rewardedAd!.fullScreenContentCallback = FullScreenContentCallback(
      onAdShowedFullScreenContent: (RewardedAd ad) =>
          print('ad onAdShowedFullScreenContent.'),
      onAdDismissedFullScreenContent: (RewardedAd ad) {
        print('$ad onAdDismissedFullScreenContent.');
        ad.dispose();
        _createRewardedAd();
      },
      onAdFailedToShowFullScreenContent: (RewardedAd ad, AdError error) {
        print('$ad onAdFailedToShowFullScreenContent: $error');
        ad.dispose();
        _createRewardedAd();
      },
    );

    _rewardedAd!.setImmersiveMode(true);
    _rewardedAd!.show(onUserEarnedReward: (RewardedAd ad, RewardItem reward) {
      print('$ad with reward $RewardItem(${reward.amount}, ${reward.type}');
    });
    _rewardedAd = null;
  }

  Future<void> _createAnchoredBanner(BuildContext context) async {
    final AnchoredAdaptiveBannerAdSize? size =
        await AdSize.getAnchoredAdaptiveBannerAdSize(
      Orientation.portrait,
      MediaQuery.of(context).size.width.truncate(),
    );

    if (size == null) {
      print('Unable to get height of anchored banner.');
      return;
    }

    final BannerAd banner = BannerAd(
      size: size,
      request: request,
      adUnitId: Platform.isAndroid
          ? 'ca-app-pub-3940256099942544/6300978111'
          : 'ca-app-pub-3940256099942544/2934735716',
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) {
          print('$BannerAd loaded.');
          setState(() {
            _anchoredBanner = ad as BannerAd?;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('$BannerAd failedToLoad: $error');
          ad.dispose();
        },
        onAdOpened: (Ad ad) => print('$BannerAd onAdOpened.'),
        onAdClosed: (Ad ad) => print('$BannerAd onAdClosed.'),
      ),
    );
    return banner.load();
  }

  @override
  void dispose() {
    super.dispose();
    _interstitialAd?.dispose();
    _rewardedAd?.dispose();
    _anchoredBanner?.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(builder: (BuildContext context) {
        if (!_loadingAnchoredBanner) {
          _loadingAnchoredBanner = true;
          _createAnchoredBanner(context);
        }
        return Scaffold(
          appBar: AppBar(
            title: const Text('AdMob Plugin example app'),
            actions: <Widget>[
              PopupMenuButton<String>(
                onSelected: (String result) {
                  switch (result) {
                    case 'InterstitialAd':
                      _showInterstitialAd();
                      break;
                    case 'RewardedAd':
                      _showRewardedAd();
                      break;
                    default:
                      throw AssertionError('unexpected button: $result');
                  }
                },
                itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                  PopupMenuItem<String>(
                    value: '$InterstitialAd',
                    child: Text('$InterstitialAd'),
                  ),
                  PopupMenuItem<String>(
                    value: '$RewardedAd',
                    child: Text('$RewardedAd'),
                  ),
                ],
              ),
            ],
          ),
          body: SafeArea(
            child: Stack(
              alignment: AlignmentDirectional.bottomCenter,
              children: <Widget>[
                ReusableInlineExample(),
                if (_anchoredBanner != null)
                  Container(
                    color: Colors.green,
                    width: _anchoredBanner!.size.width.toDouble(),
                    height: _anchoredBanner!.size.height.toDouble(),
                    child: AdWidget(ad: _anchoredBanner!),
                  ),
              ],
            ),
          ),
        );
      }),
    );
  }
}

Download Details:
 

Author: googleads

Download The Source Code : https://github.com/googleads/googleads-mobile-flutter/archive/refs/heads/master.zip 

GITHUB: https://github.com/googleads/googleads-mobile-flutter 
 

A Flutter Plugin for the Google Mobile Ads SDK
Adam Daniels

Adam Daniels

1629733036

Sass is replacing @import with @use and @forward

This video explains the new @use and @forward rules in Sass that are replacing the old @import rule. I'll show you how the old and new rules compare, and how to set up your Sass/SCSS files in your workflow.

0:00 - Intro
0:43 - ✨ Thank you to GitHub sponsors clint25104, ChideraObi, and Deta ✨
1:09 - Walkthrough of the demo project
1:58 - Looking at files with "old" way using @import
4:47 - Issues with @import and why @use and @forward were introduced
8:32 - Sass modules explained
10:11 - Updating the old Sass files with the new @use and @forward rules
16:03 - How the new rules fix the issues with @import
19:14 - Updating Gulp config for the new Sass syntax

#sass #import #scss

Sass is replacing @import with @use and @forward

Flutter Foreground Service on The Android Platform

This plugin is used to implement a foreground service on the Android platform.

Features

  • Can perform repetitive task with foreground service notification.
  • Provides useful utilities (minimizeApp, wakeUpScreen, etc.) that can use when performing task.
  • Provides a widget that prevents the app from closing when a foreground task is running.
  • Provides a widget that can start a foreground task when trying to minimize or close the app.
  • Can automatically resume foreground task at boot time.

Getting started

To use this plugin, add flutter_foreground_task as a dependency in your pubspec.yaml file. For example:

dependencies:
  flutter_foreground_task: ^2.2.1

After adding the flutter_foreground_task plugin to the flutter project, we need to specify the permissions and services to use for this plugin to work properly.

:baby_chick: Android

Since this plugin is based on a foreground service, we need to add the following permission to the AndroidManifest.xml file. Open the AndroidManifest.xml file and specify it between the <manifest> and <application> tags.

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

And we need to add this permission to automatically resume foreground task at boot time.

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

And specify the service inside the <application> tag as follows.

<service android:name="com.pravera.flutter_foreground_task.service.ForegroundService" />

:baby_chick: iOS

We can also launch flutter_foreground_task on iOS platform. However, it has the following limitations.

  • Works only on iOS 10.0 or later.
  • If the app is forcibly closed, the task will not work.
  • Task cannot be started automatically on device reboot.

Objective-C:

To use this plugin developed in Swift language in a project using Objective-C, you need to add a bridge header. If you don't have an ios/Runner/Runner-Bridging-Header.h file in your project, check this page.

Open the ios/Runner/AppDelegate.swift file and add the commented code.

#import "AppDelegate.h"
#import "GeneratedPluginRegistrant.h"

// here
#import <flutter_foreground_task/FlutterForegroundTaskPlugin.h>

// here
void registerPlugins(NSObject<FlutterPluginRegistry>* registry) {
  [GeneratedPluginRegistrant registerWithRegistry:registry];
}

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];
  [FlutterForegroundTaskPlugin setPluginRegistrantCallback:registerPlugins];  // here
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

Swift:

  1. Declare the import statement below in the ios/Runner/Runner-Bridging-Header.h file.
#import <flutter_foreground_task/FlutterForegroundTaskPlugin.h>
  1. Open the ios/Runner/AppDelegate.swift file and add the commented code.
import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    SwiftFlutterForegroundTaskPlugin.setPluginRegistrantCallback(registerPlugins)   // here
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

// here
func registerPlugins(registry: FlutterPluginRegistry) {
  GeneratedPluginRegistrant.register(with: registry)
}

How to use

This plugin has two ways to start a foreground task. There are two ways to start the foreground task manually and to start it when the app is minimized or closed by the WillStartForegroundTask widget.

:hatched_chick: Start manually

  1. Initialize the FlutterForegroundTask. FlutterForegroundTask.init() provides notification and task options, detailed options are as follows:
  • androidNotificationOptions: Notification options for Android platform.
  • iosNotificationOptions: Notification options for iOS platform.
  • foregroundTaskOptions: Options for setting the foreground task behavior in detail.
  • printDevLog: Whether to show the developer log. If this value is set to true, you can see logs of the activity (start, stop, etc) of the flutter_foreground_task plugin. It does not work in release mode. The default is false.
void _initForegroundTask() {
  FlutterForegroundTask.init(
    androidNotificationOptions: AndroidNotificationOptions(
      channelId: 'notification_channel_id',
      channelName: 'Foreground Notification',
      channelDescription: 'This notification appears when a foreground task is running.',
      channelImportance: NotificationChannelImportance.LOW,
      priority: NotificationPriority.LOW,
      iconData: NotificationIconData(
        resType: ResourceType.mipmap,
        resPrefix: ResourcePrefix.ic,
        name: 'launcher',
      ),
    ),
    iosNotificationOptions: IOSNotificationOptions(
      showNotification: true,
      playSound: false,
    ),
    foregroundTaskOptions: ForegroundTaskOptions(
      interval: 5000,
      autoRunOnBoot: true,
    ),
    printDevLog: true,
  );
}

@override
void initState() {
  super.initState();
  _initForegroundTask();
}
  1. Add WithForegroundTask widget to prevent the app from closing when a foreground task is running.
@override
Widget build(BuildContext context) {
  return MaterialApp(
    // A widget that prevents the app from closing when a foreground task is running.
    // Declare on top of the [Scaffold] widget.
    home: WithForegroundTask(
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Foreground Task'),
          centerTitle: true,
        ),
        body: buildContentView(),
      ),
    ),
  );
}
  1. Write a foreground task start callback function and start the FlutterForegroundTask. FlutterForegroundTask.start() provides the following options:
  • notificationTitle: The title that will be displayed in the notification.
  • notificationText: The text that will be displayed in the notification.
  • callback: A top-level function that calls the initDispatcher function.
// The callback function should always be a top-level function.
void startCallback() {
  // The initDispatcher function must be called to handle the task in the background.
  // And the code to be executed except for the variable declaration
  // must be written inside the initDispatcher function.
  FlutterForegroundTask.initDispatcher((timestamp, sendPort) async {
    final strTimestamp = timestamp.toString();
    print('timestamp: $strTimestamp');

    // Send data to the main isolate.
    sendPort?.send(timestamp);
  }, onDestroy: (timestamp) async {
    print('Dispatcher is dead.. x_x');
  });
}

class ExampleApp extends StatefulWidget {
  @override
  _ExampleAppState createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  ReceivePort? _receivePort;

  // ...

  void _startForegroundTask() async {
    _receivePort = FlutterForegroundTask.start(
      notificationTitle: 'Foreground task is running',
      notificationText: 'Tap to return to the app',
      callback: startCallback,
    );

    _receivePort?.listen((message) {
      if (message is DateTime)
        print('receive timestamp: $message');
    });
  }

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

If the plugin you want to use provides a stream, use it like this:

void startCallback() {
  final positionStream = Geolocator.getPositionStream();
  StreamSubscription<Position>? streamSubscription;

  FlutterForegroundTask.initDispatcher((timestamp, sendPort) async {
    if (streamSubscription != null) return;

    streamSubscription = positionStream.listen((event) {
      print('timestamp: ${timestamp.toString()}');

      FlutterForegroundTask.update(
          notificationTitle: 'Current Position',
          notificationText: '${event.latitude}, ${event.longitude}');
    });
  }, onDestroy: (timestamp) async {
    await streamSubscription?.cancel();
    print('Dispatcher is dead.. x_x');
  });
}
  1. Use FlutterForegroundTask.update() to update the foreground task. The options are the same as the start function.
// The callback function should always be a top-level function.
void startCallback() {
  int updateCount = 0;

  FlutterForegroundTask.initDispatcher((timestamp, sendPort) async {
    final strTimestamp = timestamp.toString();
    print('startCallback - timestamp: $strTimestamp');

    FlutterForegroundTask.update(
        notificationTitle: 'startCallback',
        notificationText: strTimestamp,
        callback: updateCount >= 10 ? updateCallback : null);

    updateCount++;
  }, onDestroy: (timestamp) async {
    print('Dispatcher is dead.. x_x');
  });
}

void updateCallback() {
  FlutterForegroundTask.initDispatcher((timestamp, sendPort) async {
    final strTimestamp = timestamp.toString();
    print('updateCallback - timestamp: $strTimestamp');

    FlutterForegroundTask.update(
        notificationTitle: 'updateCallback',
        notificationText: strTimestamp);
  }, onDestroy: (timestamp) async {
    print('Dispatcher is dead.. x_x');
  });
}
  1. When you have completed the required foreground task, call FlutterForegroundTask.stop().
void _stopForegroundTask() {
  FlutterForegroundTask.stop();
}

:hatched_chick: Start with WillStartForegroundTask widget

@override
Widget build(BuildContext context) {
  return MaterialApp(
    // A widget used when you want to start a foreground task when trying to minimize or close the app.
    // Declare on top of the [Scaffold] widget.
    home: WillStartForegroundTask(
      onWillStart: () {
        // Please return whether to start the foreground task.
        return true;
      },
      androidNotificationOptions: AndroidNotificationOptions(
        channelId: 'notification_channel_id',
        channelName: 'Foreground Notification',
        channelDescription: 'This notification appears when a foreground task is running.',
        channelImportance: NotificationChannelImportance.LOW,
        priority: NotificationPriority.LOW,
        iconData: NotificationIconData(
          resType: ResourceType.mipmap,
          resPrefix: ResourcePrefix.ic,
          name: 'launcher',
        ),
      ),
      iosNotificationOptions: IOSNotificationOptions(
        showNotification: true,
        playSound: false,
      ),
      foregroundTaskOptions: ForegroundTaskOptions(
        interval: 5000,
        autoRunOnBoot: false,
      ),
      printDevLog: true,
      notificationTitle: 'Foreground task is running',
      notificationText: 'Tap to return to the app',
      callback: callback,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Foreground Task'),
          centerTitle: true,
        ),
        body: buildContentView(),
      ),
    ),
  );
}

Models

:chicken: AndroidNotificationOptions

Notification options for Android platform.

PropertyDescription
channelIdUnique ID of the notification channel.
channelNameThe name of the notification channel. This value is displayed to the user in the notification settings.
channelDescriptionThe description of the notification channel. This value is displayed to the user in the notification settings.
channelImportanceThe importance of the notification channel. The default is NotificationChannelImportance.DEFAULT.
priorityPriority of notifications for Android 7.1 and lower. The default is NotificationPriority.DEFAULT.
enableVibrationWhether to enable vibration when creating notifications. The default is false.
playSoundWhether to play sound when creating notifications. The default is false.
showWhenWhether to show the timestamp when the notification was created in the content view. The default is false.
visibilityControl the level of detail displayed in notifications on the lock screen. The default is NotificationVisibility.VISIBILITY_PUBLIC.
iconDataThe data of the icon to display in the notification. If the value is null, the app launcher icon is used.

:chicken: NotificationIconData

Data for setting the notification icon.

PropertyDescription
resTypeThe resource type of the notification icon. If the resource is in the drawable folder, set it to ResourceType.drawable, if the resource is in the mipmap folder, set it to ResourceType.mipmap.
resPrefixThe resource prefix of the notification icon. If the notification icon name is ic_simple_notification, set it to ResourcePrefix.ic and set name to simple_notification.
nameNotification icon name without prefix.

:chicken: ResourceType

The resource type of the notification icon.

ValueDescription
drawableA resources in the drawable folder. The drawable folder is where all kinds of images are stored.
mipmapA resources in the mipmap folder. The mipmap folder is usually where the launcher icon image is stored.

:chicken: ResourcePrefix

The resource prefix of the notification icon.

ValueDescription
icA resources with the ic_ prefix.
imgA resources with the img_ prefix.

:chicken: IOSNotificationOptions

Notification options for iOS platform.

PropertyDescription
showNotificationWhether to show notifications. The default is true.
playSoundWhether to play sound when creating notifications. The default is false.

:chicken: ForegroundTaskOptions

Data class with foreground task options.

PropertyDescription
intervalThe task call interval in milliseconds. The default is 5000.
autoRunOnBootWhether to automatically run foreground task on boot. The default is false

:chicken: NotificationChannelImportance

The importance of the notification channel. See https://developer.android.com/training/notify-user/channels?hl=ko#importance

ValueDescription
NONEA notification with no importance: does not show in the shade.
MINMin notification importance: only shows in the shade, below the fold.
LOWLow notification importance: shows in the shade, and potentially in the status bar (see shouldHideSilentStatusBarIcons()), but is not audibly intrusive.
DEFAULTDefault notification importance: shows everywhere, makes noise, but does not visually intrude.
HIGHHigher notification importance: shows everywhere, makes noise and peeks. May use full screen intents.
MAXMax notification importance: same as HIGH, but generally not used.

:chicken: NotificationPriority

Priority of notifications for Android 7.1 and lower.

ValueDescription
MINNo sound and does not appear in the status bar.
LOWNo sound.
DEFAULTMakes a sound.
HIGHMakes a sound and appears as a heads-up notification.
MAXSame as HIGH, but used when you want to notify notification immediately.

:chicken: NotificationVisibility

The level of detail displayed in notifications on the lock screen.

ValueDescription
VISIBILITY_PUBLICShow this notification in its entirety on all lockscreens.
VISIBILITY_SECRETDo not reveal any part of this notification on a secure lockscreen.
VISIBILITY_PRIVATEShow this notification on all lockscreens, but conceal sensitive or private information on secure lockscreens.

Utility methods

:lollipop: minimizeApp

Minimize the app to the background.

import 'package:flutter_foreground_task/flutter_foreground_task.dart';

void function() {
  FlutterForegroundTask.minimizeApp();
}

:lollipop: wakeUpScreen

Wake up the screen of a device that is turned off.

import 'package:flutter_foreground_task/flutter_foreground_task.dart';

void function() {
  FlutterForegroundTask.wakeUpScreen();
}

:lollipop: isIgnoringBatteryOptimizations

Returns whether the app has been excluded from battery optimization.

import 'package:flutter_foreground_task/flutter_foreground_task.dart';

void function() async {
  var isIgnoring = await FlutterForegroundTask.isIgnoringBatteryOptimizations;
}

:lollipop: openIgnoreBatteryOptimizationSettings

Open the settings page where you can set ignore battery optimization.

import 'package:flutter_foreground_task/flutter_foreground_task.dart';

void function() async {
  var isIgnoring = await FlutterForegroundTask.openIgnoreBatteryOptimizationSettings();
}

Support

If you find any bugs or issues while using the plugin, please register an issues on GitHub. You can also contact us at hwj930513@naver.com.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_foreground_task

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  flutter_foreground_task: ^2.2.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_foreground_task/flutter_foreground_task.dart'; 

example/lib/main.dart

import 'dart:isolate';

import 'package:flutter/material.dart';
import 'package:flutter_foreground_task/flutter_foreground_task.dart';

void main() => runApp(ExampleApp());

// The callback function should always be a top-level function.
void startCallback() {
  int updateCount = 0;

  // The initDispatcher function must be called to handle the task in the background.
  // And the code to be executed except for the variable declaration
  // must be written inside the initDispatcher function.
  FlutterForegroundTask.initDispatcher((timestamp, sendPort) async {
    final strTimestamp = timestamp.toString();
    print('startCallback - timestamp: $strTimestamp');

    FlutterForegroundTask.update(
        notificationTitle: 'startCallback',
        notificationText: strTimestamp,
        callback: updateCount >= 10 ? updateCallback : null);

    // Send data to the main isolate.
    sendPort?.send(timestamp);
    sendPort?.send(updateCount);

    updateCount++;
  }, onDestroy: (timestamp) async {
    print('Dispatcher is dead.. x_x');
  });
}

void updateCallback() {
  FlutterForegroundTask.initDispatcher((timestamp, sendPort) async {
    final strTimestamp = timestamp.toString();
    print('updateCallback - timestamp: $strTimestamp');

    FlutterForegroundTask.update(
        notificationTitle: 'updateCallback',
        notificationText: strTimestamp);
  }, onDestroy: (timestamp) async {
    print('Dispatcher is dead.. x_x');
  });
}

class ExampleApp extends StatefulWidget {
  @override
  _ExampleAppState createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  ReceivePort? _receivePort;

  void _initForegroundTask() {
    FlutterForegroundTask.init(
      androidNotificationOptions: AndroidNotificationOptions(
        channelId: 'notification_channel_id',
        channelName: 'Foreground Notification',
        channelDescription: 'This notification appears when a foreground task is running.',
        channelImportance: NotificationChannelImportance.LOW,
        priority: NotificationPriority.LOW,
        iconData: NotificationIconData(
          resType: ResourceType.mipmap,
          resPrefix: ResourcePrefix.ic,
          name: 'launcher',
        ),
      ),
      iosNotificationOptions: IOSNotificationOptions(
        showNotification: true,
        playSound: false,
      ),
      foregroundTaskOptions: ForegroundTaskOptions(
        interval: 5000,
        autoRunOnBoot: true,
      ),
      printDevLog: true,
    );
  }

  void _startForegroundTask() async {
    _receivePort = await FlutterForegroundTask.start(
      notificationTitle: 'Foreground task is running',
      notificationText: 'Tap to return to the app',
      callback: startCallback,
    );

    _receivePort?.listen((message) {
      if (message is DateTime)
        print('receive timestamp: $message');
      else if (message is int)
        print('receive updateCount: $message');
    });
  }
  
  void _stopForegroundTask() {
    FlutterForegroundTask.stop();
  }

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // A widget that prevents the app from closing when a foreground task is running.
      // Declare on top of the [Scaffold] widget.
      home: WithForegroundTask(
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Foreground Task'),
            centerTitle: true,
          ),
          body: _buildContentView(),
        ),
      ),
    );
  }

  Widget _buildContentView() {
    final buttonBuilder = (String text, {VoidCallback? onPressed}) {
      return ElevatedButton(
        child: Text(text),
        onPressed: onPressed,
      );
    };

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          buttonBuilder('start', onPressed: _startForegroundTask),
          buttonBuilder('stop', onPressed: _stopForegroundTask),
        ],
      ),
    );
  }
}

Download Details:

Author: Dev-hwang

Source Code: https://github.com/Dev-hwang/flutter_foreground_task

#flutter #foreground 

Flutter Foreground Service on The Android Platform
Conor  Grady

Conor Grady

1629638927

How To Create Custom Component ?

In this video, I have created a custom component using props and #propTypes. By this way we can create a custom #component and #import them where we want to show it and pass the props as #attributes to it. Learning how to create your own #reactnativecomponents is one of the fundamental things that you need to learn when #learning about react native. I hope you like my video. Please share & support.
#react-native 

How To Create Custom Component ?

Official Adobe Experience Platform support for Flutter apps

flutter_assurance is a flutter plugin for the iOS and Android AEPAssurance SDK to allow for integration with Flutter applications. Functionality to enable the Assurance extension is provided entirely through Dart documented below.

Installation

Install instructions for this package can be found here.

Note: After you have installed the SDK, don't forget to run pod install in your ios directory to link the libraries to your Xcode project.

Tests

Run:

flutter test

Usage

Assurance

Registering the extension with ACPCore:

Note: It is required to initialize the SDK via native code inside your AppDelegate and MainApplication for iOS and Android respectively. For more information see how to initialize Core.

iOS

Swift

import AEPAssurance

AEPAssurance.registerExtension()

Objective-C

#import "AEPAssurance.h"

[AEPAssurance registerExtension];

Android:

import com.adobe.marketing.mobile.Assurance;

Assurance.registerExtension();

Importing the SDK:

import 'package:flutter_assurance/flutter_assurance.dart';

Getting Assurance version:

String version = await FlutterAssurance.extensionVersion;

Starting a Assurance session:

FlutterAssurance.startSession(url);

Contributing

See CONTRIBUTING

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_assurance

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  flutter_assurance: ^2.0.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_assurance/flutter_assurance.dart'; 

example/lib/main.dart

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:developer';

import 'package:flutter/services.dart';
import 'package:flutter_assurance/flutter_assurance.dart';
import 'package:flutter_acpcore/flutter_acpcore.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _platformVersion = 'Unknown';
  String _url_text = '';

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

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    String? assuranceVersion;
    // Platform messages may fail, so we use a try/catch PlatformException.
    try {
      assuranceVersion = await FlutterAssurance.extensionVersion;
    } on PlatformException {
      log("Failed to get extension versions");
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      _platformVersion = assuranceVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: ListView(shrinkWrap: true, children: <Widget>[
            Text('AEPAssurance version = $_platformVersion\n'),
            ElevatedButton(
              child: Text("ACPCore.trackState(...)"),
              onPressed: () => FlutterACPCore.trackState("myState",
                  data: {"key1": "value1"}),
            ),
            ElevatedButton(
              child: Text("ACPCore.trackAction(...)"),
              onPressed: () => FlutterACPCore.trackAction("myAction",
                  data: {"key1": "value1"}),
            ),
            TextField(
              decoration: InputDecoration(
                  border: new OutlineInputBorder(
                      borderSide: new BorderSide(color: Colors.teal)),
                  hintText: 'Enter a assurance session url'),
              onChanged: (text) {
                _url_text = text;
              },
            ),
            ElevatedButton(
              child: Text("AEPAssurance.startSession(...)"),
              onPressed: () => FlutterAssurance.startSession(_url_text),
            ),
          ]),
        ),
      ),
    );
  }
} 

#flutter #ios #android 

Official Adobe Experience Platform support for Flutter apps

A Plugin integrates The onyx Fingerprint Camera Api with Flutter

Onyx Flutter Package

This is not free software. This plugin uses the Onyx software development kits (SDKs) for Android and iOS. It requires a license agreement with:Diamond Fortress Technologies, Inc.

Package Requirements

Sample Project

To run the sample project, run Example/lib/main.dart. The sample app load to a screen that shows all of the onyx camera settings, and provides the ability to start the onyx camera with any of the settings on the initial screen.

Onyx controls

The OnyxCamera class's options contains all of onyx camera options, including the license key. please see the documentation for a complete list of the configuration options.

Once the settings are configured, simply call OnyxCamera.configureOnyx to set the onyx configurations, and OnyxCamera.StartOnyx() to start the camera.

Listen for changes to the OnyxCamera state to determine when the onyx package is configured (state=configured), is returning results(state=success), or has an error (state=error).

OnyxCamera.state.addListener(() async {
   setState(() {});
   if (OnyxCamera.state.status == OnyxStatuses.configured) {
       await OnyxCamera.startOnyx();
   }
});

Here's a bare bones implementation for getting started

OnyxCamera.state.addListener(() {
   if (OnyxCamera.state.status == OnyxStatuses.configured) {
       //starts onyx after it's configured
       OnyxCamera.startOnyx();
   }
   if (OnyxCamera.state.isError) {
       //handle any onyx related errors.  error messages are stored in the OnyxCamera.state.resultMessage variable.
   }
   if (OnyxCamera.state.status == OnyxStatuses.success) {
       //do something when the onyx camera sends back results.  OnyxCamera.Results holds the onyx results.
   }
});
//sets the license key
OnyxCamera.options.licenseKey = "xxxx";
//starts the onyx camera.
OnyxCamera.configureOnyx();

Android setup

The minimum android version supported is 21. More details for installing the plugin can be found at pub.dev.

Add the Onyx native package's repository and dependency references below to your app's android/app/build.gradle file.

android {
    lintOptions {
        disable 'InvalidPackage'
    }
}
repositories {
    maven {
        url 'http://nexus.diamondfortress.com/nexus/content/repositories/releases/'
    }
    maven {
        url 'http://nexus.diamondfortress.com/nexus/content/repositories/snapshots/'
    }
}
dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    implementation 'com.google.android.gms:play-services-base:17.6.0'
    implementation 'com.dft.android:onyx-camera:7.1.1'
}

The plugin also needs permission to write to external storage, so in the app's AndroidManifest.xml, make sure to add the line below.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

iOS setup

Onyx must Run on a device, and will NOT run on an emulator!

Set the iOS version to 11.

  • [ ] Insure that the ./iOS/PodFile specifies ios version 11 or later.
# Uncomment the next line to define a global platform for your project
platform :ios, '11.0'

Adjust iOS project properties from XCode

[ ] Disable Bitcode

  • Select the root directory and go to Build Settings
  • Search for bitcode
  • Set Enable Bitcode to No

[ ] Add 4 files to your project's xcodeproj properties. Otherwise the OnyxCamera will crash!

Steps to add the files to the project

  • Select your xcodeproj file from the naviagtion pane on the left
  • Select Build Phases
  • Expand Copy Bunde Resources
  • Click the +
  • Click Add Other...
  • A Finder window will launch
  • Navigate to Pods/OnyxCamera/OnyxCamera/Assets/ source the resource files from here

Files To Add

  • onyx_4f_logo_v2.png
  • onyx_4f_logo_v2@2x.png
  • capturenet.tflite
  • qualitynet.tflite

Adjust the app permissions

[ ] Open the project's Info.plist file, and paste the following lines at the bottom of the <dict> element.

Add the navigation controller to the iOS/Runner/AppDelegate file

#import "AppDelegate.h"
#import "GeneratedPluginRegistrant.h"
#import "OnyxPlugin.h"
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [GeneratedPluginRegistrant registerWithRegistry:self];
    //New Code
    FlutterViewController *flutterViewController =(FlutterViewController*)self.window.rootViewController;
    UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:flutterViewController];
    [navigationController setNavigationBarHidden:YES];    
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    self.window.rootViewController = navigationController;
    [self.window makeKeyAndVisible];
    OnyxPlugin.flutterViewController=flutterViewController;
    
  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
 <key>NSCameraUsageDescription</key>
 <string>Capture fingerprint image</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Save Onyx Image Results</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Save Pictures</string>

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add onyx_plugin

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  onyx_plugin: ^7.1.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:onyx_plugin/onyx.dart';
import 'package:onyx_plugin/onyx_camera.dart';
import 'package:onyx_plugin/onyx_fingerprint_template.dart';
import 'package:onyx_plugin/onyx_options.dart';
import 'package:onyx_plugin/onyx_results.dart';
import 'package:onyx_plugin/onyx_state.dart';
import 'package:onyx_plugin/onyx_statuses.dart'; 

example/example.md

Onyx Examples

#flutter  #onyx 

A Plugin integrates The onyx Fingerprint Camera Api with Flutter

Place Picker on Google Maps for Flutter

Google Maps Place Picker MB (forked MB edition) A Flutter plugin which provides 'Picking Place' using Google Maps widget.

The project relies on below packages.

Map using Flutter's official google_maps_flutter
Fetching current location using Baseflow's geolocator
Place and Geocoding API using hadrienlejard's google_maps_webservice
Builder using kevmoo's tuple

Preview

Support

If the package was useful or saved your time, please do not hesitate to buy the original a cup of coffee! ;)
The more caffeine he gets, the more useful projects he can make in the future.

Buy Me A Coffee

Getting Started

Get an API key at https://cloud.google.com/maps-platform/.

Enable Google Map SDK for each platform.

  • Go to Google Developers Console.
  • Choose the project that you want to enable Google Maps on.
  • Select the navigation menu and then select "Google Maps".
  • Select "APIs" under the Google Maps menu.
  • To enable Google Maps for Android, select "Maps SDK for Android" in the "Additional APIs" section, then select "ENABLE".
  • To enable Google Maps for iOS, select "Maps SDK for iOS" in the "Additional APIs" section, then select "ENABLE".
  • Make sure the APIs you enabled are under the "Enabled APIs" section.

You can also find detailed steps to get started with Google Maps Platform here.

Android

Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml:

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

NOTE: As of version 3.0.0 the geolocator plugin switched to the AndroidX version of the Android Support Libraries. This means you need to make sure your Android project is also upgraded to support AndroidX. Detailed instructions can be found here.

The TL;DR version is:

  1. Add the following to your "gradle.properties" file:
android.useAndroidX=true
android.enableJetifier=true
  1. Make sure you set the compileSdkVersion in your "android/app/build.gradle" file to 28:
android {
 compileSdkVersion 28

 ...
}
  1. Make sure you replace all the android. dependencies to their AndroidX counterparts (a full list can be found here: https://developer.android.com/jetpack/androidx/migrate).

iOS

Specify your API key in the application delegate ios/Runner/AppDelegate.m:

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Or in your swift code, specify your API key in the application delegate ios/Runner/AppDelegate.swift:

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

On iOS you'll need to add the following entries to your Info.plist file (located under ios/Runner) in order to access the device's location.

Simply open your Info.plist file and add the following:

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app needs access to location when open and in the background.</string>

In addition, you need to add the Background Modes capability to your XCode project (Project > Signing and Capabilties > "+ Capability" button) and select Location Updates.g>This app needs access to location when open and in the background.

Opt-in to the embedded views preview by adding a boolean property to the app's Info.plist file with the key io.flutter.embedded_views_preview and the value YES.

<key>io.flutter.embedded_views_preview</key>
<true/>

Usage

Basic usage

You can use PlacePicker by pushing to a new page using Navigator, OR put as a child of any widget.
When the user picks a place on the map, it will return result to 'onPlacePicked' with PickResult type. Alternatively, you can build your own way with 'selectedPlaceWidgetBuilder' and fetch result from it (See the instruction below).

Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PlacePicker(
          apiKey: APIKeys.apiKey,   // Put YOUR OWN KEY here.
          onPlacePicked: (result) { 
            print(result.address); 
            Navigator.of(context).pop();
          },
          initialPosition: HomePage.kInitialPosition,
          useCurrentLocation: true,
        ),
      ),
    );

PickResult

** Below results will be fetched only when using auto-complete search or usePlaceDetailSearch is set to true when searching by dragging the map.

PickResult (Optional)

More info about results at Google document.

PlacePicker

More info about autocomplete search at Google document.

Customizing picked place visualisation

By default, when a user picks a place by using auto complete search or dragging the map, we display the information at the bottom of the screen (FloatingCard).

However, if you don't like this UI/UX, simply override the builder using 'selectedPlaceWidgetBuilder'. FlocatingCard widget can be reused which is floating around the screen or build an entirely new widget as you want. It is stacked with the map, so you might want to use the Positioned widget.

Note that using this customization WILL NOT INVOKE [onPlacePicked] callback as it will override default 'Select here' button on floating card

...
PlacePicker(apiKey: APIKeys.apiKey,
            ...
            selectedPlaceWidgetBuilder: (_, selectedPlace, state, isSearchBarFocused) {
              return isSearchBarFocused
                  ? Container()
                  // Use FloatingCard or just create your own Widget.
                  : FloatingCard(
                      bottomPosition: 0.0,    // MediaQuery.of(context) will cause rebuild. See MediaQuery document for the information.
                      leftPosition: 0.0,
                      rightPosition: 0.0,
                      width: 500,
                      borderRadius: BorderRadius.circular(12.0),
                      child: state == SearchingState.Searching ? 
                                      Center(child: CircularProgressIndicator()) : 
                                      RaisedButton(onPressed: () { print("do something with [selectedPlace] data"); },),
                   );
            },
            ...
          ),
...

Parameters | Type | Description ---------- | ---- | ----------- context | BuildContext | Flutter's build context value selectedPlace | PickResult | Result data of user selected place state | SearchingState | State of searching action. (Idle, Searching) isSearchBarFocused | bool | Whether the search bar is currently focused so the keyboard is shown

Customizing Pin

By default, Pin icon is provided with very simple picking animation when moving around.
However, you can also create your own pin widget using 'pinBuilder'

PlacePicker(apiKey: APIKeys.apiKey,
            ...
            pinBuilder: (context, state) {
                  if (state == PinState.Idle) {
                    return Icon(Icons.favorite_border);
                  } else {
                    return AnimatedIcon(.....);
                  }
                },
            ...                        
          ),
...

Parameters | Type | Description ---------- | ---- | ----------- context | BuildContext | Flutter's build context value state | PinState | State of pin. (Preparing; When map loading, Idle, Dragging)

Changing Colours of default FloatingCard

While you can build your own prediction tile, you still can change the style of default tile using themeData as below:

// Light Theme
final ThemeData lightTheme = ThemeData.light().copyWith(
  // Background color of the FloatingCard
  cardColor: Colors.white,
  buttonTheme: ButtonThemeData(
    // Select here's button color
    buttonColor: Colors.black,
    textTheme: ButtonTextTheme.primary,
  ),
);

// Dark Theme
final ThemeData darkTheme = ThemeData.dark().copyWith(
  // Background color of the FloatingCard
  cardColor: Colors.grey,
  buttonTheme: ButtonThemeData(
    // Select here's button color
    buttonColor: Colors.yellow,
    textTheme: ButtonTextTheme.primary,
  ),
);

Feature Requests and Issues

Please file feature requests and bugs at the issue tracker.

Other useful packages you might be interested

Firebase Auth Simplify
Material design Speed Dial

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add google_maps_place_picker_mb

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  google_maps_place_picker_mb: ^2.0.0-mb.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:google_maps_place_picker_mb/google_maps_place_picker.dart';
import 'package:google_maps_place_picker_mb/providers/place_provider.dart';
import 'package:google_maps_place_picker_mb/providers/search_provider.dart';

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:google_maps_place_picker_mb/google_maps_place_picker.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

// Your api key storage.
import 'keys.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // Light Theme
  final ThemeData lightTheme = ThemeData.light().copyWith(
    // Background color of the FloatingCard
    cardColor: Colors.white,
    buttonTheme: ButtonThemeData(
      // Select here's button color
      buttonColor: Colors.black,
      textTheme: ButtonTextTheme.primary,
    ),
  );

  // Dark Theme
  final ThemeData darkTheme = ThemeData.dark().copyWith(
    // Background color of the FloatingCard
    cardColor: Colors.grey,
    buttonTheme: ButtonThemeData(
      // Select here's button color
      buttonColor: Colors.yellow,
      textTheme: ButtonTextTheme.primary,
    ),
  );

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Map Place Picker Demo',
      theme: lightTheme,
      darkTheme: darkTheme,
      themeMode: ThemeMode.light,
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key key}) : super(key: key);

  static final kInitialPosition = LatLng(-33.8567844, 151.213108);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  PickResult selectedPlace;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Google Map Place Picker Demo"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                child: Text("Load Google Map"),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) {
                        return PlacePicker(
                          apiKey: APIKeys.apiKey,
                          initialPosition: HomePage.kInitialPosition,
                          useCurrentLocation: true,
                          selectInitialPosition: true,
                          usePinPointingSearch: true,
                          usePlaceDetailSearch: true,
                          onPlacePicked: (result) {
                            selectedPlace = result;
                            Navigator.of(context).pop();
                            setState(() {});
                          },
                          // forceSearchOnZoomChanged: true,
                          // automaticallyImplyAppBarLeading: false,
                          // autocompleteLanguage: "ko",
                          // region: 'au',
                          // pickArea: CircleArea(
                          //   center: HomePage.kInitialPosition,
                          //   radius: 300,
                          //   fillColor: Colors.lightGreen.withGreen(255).withAlpha(32),
                          //   strokeColor: Colors.lightGreen.withGreen(255).withAlpha(192),
                          //   strokeWidth: 2,
                          // ),
                          // selectedPlaceWidgetBuilder: (_, selectedPlace, state, isSearchBarFocused) {
                          //   print("state: $state, isSearchBarFocused: $isSearchBarFocused");
                          //   return isSearchBarFocused
                          //       ? Container()
                          //       : FloatingCard(
                          //           bottomPosition: 0.0, // MediaQuery.of(context) will cause rebuild. See MediaQuery document for the information.
                          //           leftPosition: 0.0,
                          //           rightPosition: 0.0,
                          //           width: 500,
                          //           borderRadius: BorderRadius.circular(12.0),
                          //           child: state == SearchingState.Searching
                          //               ? Center(child: CircularProgressIndicator())
                          //               : RaisedButton(
                          //                   child: Text("Pick Here"),
                          //                   onPressed: () {
                          //                     // IMPORTANT: You MUST manage selectedPlace data yourself as using this build will not invoke onPlacePicker as
                          //                     //            this will override default 'Select here' Button.
                          //                     print("do something with [selectedPlace] data");
                          //                     Navigator.of(context).pop();
                          //                   },
                          //                 ),
                          //         );
                          // },
                          // pinBuilder: (context, state) {
                          //   if (state == PinState.Idle) {
                          //     return Icon(Icons.favorite_border);
                          //   } else {
                          //     return Icon(Icons.favorite);
                          //   }
                          // },
                        );
                      },
                    ),
                  );
                },
              ),
              selectedPlace == null ? Container() : Text(selectedPlace.formattedAddress ?? ""),
            ],
          ),
        ));
  }
}

#flutter #dart  #mobile #mobile-apps 

Place Picker on Google Maps for Flutter

Flutter Plugin for AEP Analytics

flutter_acpanalytics is a flutter plugin for the iOS and Android AEP Analytics SDK to allow for integration with flutter applications. Functionality to enable the Analytics extension is provided entirely through Dart documented below.

Installation

Install instructions for this package can be found here.

Note: After you have installed the SDK, don't forget to run pod install in your ios directory to link the libraries to your Xcode project.

Tests

Run:

flutter test

Usage

Analytics

Importing the SDK:

import 'package:flutter_acpanalytics/flutter_acpanalytics.dart';

Getting the SDK version:

String version = await FlutterACPAnalytics.extensionVersion;

Registering the extension with ACPCore:

Note: It is required to initialize the SDK via native code inside your AppDelegate and MainApplication for iOS and Android respectively. For more information see how to initialize Core.

iOS

Swift

import ACPAnalytics

ACPAnalytics.registerExtension()

Objective-C

#import "ACPAnalytics.h"

[ACPAnalytics registerExtension];

Android:

import com.adobe.marketing.mobile.Analytics;

Analytics.registerExtension();

Get the tracking identifier:

String trackingId;

try {
	trackingId = await FlutterACPAnalytics.trackingIdentifier;
} on PlatformException {
	log("Failed to get the tracking identifier");
}

Send queued hits:

FlutterACPAnalytics.sendQueuedHits();

Get the queue size:

int queueSize;

try {
	queueSize = await FlutterACPAnalytics.queueSize;
} on PlatformException {
	log("Failed to get the queue size");
}

Clear queued hits:

FlutterACPAnalytics.clearQueue();

Set the custom visitor identifier:

FlutterACPAnalytics.setVisitorIdentifier("vid");

Get the custom visitor identifier:

String visitorId;

try {
	visitorId = await FlutterACPAnalytics.visitorIdentifier;
} on PlatformException {
	visitorId = "Failed to get the visitor identifier";
}

Track app actions:

FlutterACPCore.trackAction("myAction",  data: {"key1": "value1"});

Track app states:

FlutterACPCore.trackState("myState",  data: {"key1": "value1"});

Contributing

See CONTRIBUTING

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_acpanalytics

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  flutter_acpanalytics: ^2.0.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_acpanalytics/flutter_acpanalytics.dart'; 

example/lib/main.dart

/*
Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/
import 'dart:async';
import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_acpanalytics/flutter_acpanalytics.dart';
import 'package:flutter_acpcore/flutter_acpcore.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  int _queueSize = 0;
  String _trackingId = '';
  String _visitorId = '';

  @override
  void initState() {
    super.initState();
    initPlatformState();
    getQueueSize();
    getTrackingIdentifier();
    getVisitorIdentifier();
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    String platformVersion = '';
    // Platform messages may fail, so we use a try/catch PlatformException.
    try {
      platformVersion = await FlutterACPAnalytics.extensionVersion;
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  Future<void> getQueueSize() async {
    int queueSize = 0;
    try {
      queueSize = await FlutterACPAnalytics.queueSize;
    } on PlatformException {
      log("Failed to get the queue size");
      queueSize = 0;
    }

    if (!mounted) return;
    setState(() {
      _queueSize = queueSize;
    });
  }

  Future<void> getTrackingIdentifier() async {
    String trackingId = '';
    try {
      trackingId = await FlutterACPAnalytics.trackingIdentifier ?? '???';
    } on PlatformException {
      log("Failed to get the tracking identifier");
    }

    if (!mounted) return;
    setState(() {
      _trackingId = trackingId;
    });
  }

  Future<void> getVisitorIdentifier() async {
    String visitorId = '';
    try {
      visitorId = await FlutterACPAnalytics.visitorIdentifier ?? '???';
    } on PlatformException {
      visitorId = "Failed to get the visitor identifier";
    }

    if (!mounted) return;
    setState(() {
      _visitorId = visitorId;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(children: <Widget>[
            Text('ACPAnalytics version = $_platformVersion\n'),
            Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  ElevatedButton(
                    child: Text("ACPCore.trackState(...)"),
                    onPressed: () => FlutterACPCore.trackState("myState",
                        data: {"key1": "value1"}),
                  ),
                  ElevatedButton(
                    child: Text("ACPCore.trackAction(...)"),
                    onPressed: () => FlutterACPCore.trackAction("myAction",
                        data: {"key1": "value1"}),
                  ),
                ]),
            ElevatedButton(
              child: Text("ACPAnalytics.sendQueuedHits()"),
              onPressed: () => FlutterACPAnalytics.sendQueuedHits(),
            ),
            ElevatedButton(
              child: Text("ACPAnalytics.clearQueue()"),
              onPressed: () => FlutterACPAnalytics.clearQueue(),
            ),
            Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  ElevatedButton(
                    child: Text("ACPAnalytics.getQueueSize()"),
                    onPressed: () => getQueueSize(),
                  ),
                  Text('Queue size = $_queueSize\n'),
                ]),
            Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  ElevatedButton(
                    child: Text("ACPAnalytics.getTrackingIdentifier()"),
                    onPressed: () => getTrackingIdentifier(),
                  ),
                  Text('Tracking Id = $_trackingId\n'),
                ]),
            Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  ElevatedButton(
                    child: Text("ACPAnalytics.getVisitorIdentifier()"),
                    onPressed: () => getVisitorIdentifier(),
                  ),
                  Text('Visitor Id = $_visitorId\n'),
                ]),
            ElevatedButton(
              child: Text("ACPAnalytics.setVisitorIdentifier(vid)"),
              onPressed: () => FlutterACPAnalytics.setVisitorIdentifier("vid"),
            ),
          ]),
        ),
      ),
    );
  }
}

#flutter #dart  #mobile #mobile-apps 

 

Flutter Plugin for AEP Analytics

WebEngage Flutter Plugin

WebEngage Flutter SDK

For more information checkout our website and documentation.

Installation

Add WebEngage Flutter Plugin

  • Add webengage_flutter in your pubspec.yaml file.
dependencies:
webengage_flutter: 1.0.3
  • Run flutter packages get to install the SDK

Initialization

Android

  1. Initialize WebEngage in main.dart in initState();
WebEngagePlugin _webEngagePlugin = new WebEngagePlugin();
  1. Initialize WebEngage Android SDK in your <your-project>/android/app/src/main/java/<your-package-path>/MainApplication.java class.
...
import com.webengage.sdk.android.WebEngageActivityLifeCycleCallbacks;
import io.flutter.app.FlutterApplication;

public class MainApplication extends FlutterApplication {
    @Override
    public void onCreate() {
        super.onCreate();
         WebEngageConfig webEngageConfig = new WebEngageConfig.Builder()
                .setWebEngageKey("YOUR_LICENCSE_CODE")
                .setAutoGCMRegistrationFlag(false)
                .setLocationTrackingStrategy(LocationTrackingStrategy.ACCURACY_BEST)
                .setDebugMode(true) // only in development mode
                .build();
        WebengageInitializer.initialize(this,webEngageConfig);
        ...
    }
    ...
}

Push Notifications

  1. Add below dependencies in app-level build gradle
    implementation platform('com.google.firebase:firebase-bom:25.12.0')
    implementation 'com.google.firebase:firebase-analytics'
    implementation 'com.google.firebase:firebase-messaging:20.2.1'
    implementation 'com.google.android.gms:play-services-ads:15.0.1'
  1. Add the following to your dependencies section in project/build.gradle
        classpath 'com.google.gms:google-services:4.3.4'
  1. Firebase tokens can be passed to WebEngage using FirebaseMessagingService
import com.google.firebase.messaging.FirebaseMessagingService;
import com.webengage.sdk.android.WebEngage;

public class MyFirebaseMessagingService extends FirebaseMessagingService {
    @Override
    public void onNewToken(String s) {
        super.onNewToken(s);
        WebEngage.get().setRegistrationID(s);
    }
}

It is also recommended that you pass Firebase token to WebEngage from onCreate of your Application class as shown below. This will ensure that changes in user’s Firebase token are communicated to WebEngage.

import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.iid.FirebaseInstanceId;
import com.google.firebase.iid.InstanceIdResult;
import com.webengage.sdk.android.WebEngage;

public class MainApplication extends FlutterApplication {
    @Override
    public void onCreate() {
        super.onCreate();
    FirebaseMessaging.getInstance().getToken()
    .addOnCompleteListener(new OnCompleteListener<String>() {
        @Override
        public void onComplete(@NonNull Task<String> task) {
          if (!task.isSuccessful()) {
            Log.w(TAG, "Fetching FCM registration token failed", task.getException());
            return;
          }
          // Get new FCM registration token
          String token = task.getResult();
          WebEngage.get().setRegistrationID(token);
        }
    });
     
    }
}
  1. Pass Messages to WebEngage Create a class that extends FirebaseMessagingService and pass messages to WebEngage. All incoming messages from WebEngage will contain key source with the value as webengage.
package your.application.package;

import com.google.firebase.messaging.FirebaseMessagingService;
import com.google.firebase.messaging.RemoteMessage;
import com.webengage.sdk.android.WebEngage;

public class MyFirebaseMessagingService extends FirebaseMessagingService {
  @Override
  public void onMessageReceived(RemoteMessage remoteMessage) {
    Map<String, String> data = remoteMessage.getData();
    if(data != null) {
      if(data.containsKey("source") && "webengage".equals(data.get("source"))) {
        WebEngage.get().receive(data);
      }
    }
  }
}

Next, register the service to the application element of your AndroidManifest.xml as follows.

<service
    android:name=".MyFirebaseMessagingService">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT"/>
    </intent-filter>
</service>

iOS

  1. Add WebEngage configurations <your-project>/ios/<YourApp>/Info.plist file.
<dict>
	<key>WEGLicenseCode</key>
	<string>YOUR-WEBENGAGE-LICENSE-CODE</string>

	<key>WEGLogLevel</key>
	<string>VERBOSE</string>
    ...
</dict>
  1. Initialize WebEngage iOS SDK in <your-project>/ios/<YourApp>/AppDelegate.m file.
#import <WebEngage/WebEngage.h>
...

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary * launchOptions {
    ...
  
    [[WebEngage sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions];
    
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

Push Notifications

Push Notification Callbacks

  1. Add Below code in AppDelegate.h file
  #import <WebEngagePlugin.h>
  
  @property (nonatomic, strong) WebEngagePlugin *bridge;
  1. Add Below code in AppDelegate.m file
    self.bridge = [WebEngagePlugin new];
    //For setting push click callback set pushNotificationDelegate after webengage SDK is initialised
    
    [[WebEngage sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions notificationDelegate:self.bridge];
    [WebEngage sharedInstance].pushNotificationDelegate = self.bridge;
  1. Add below subscribeToPushCallbacks() method in main.dart and call it from initMethod()
  void subscribeToPushCallbacks() {
      //Push click stream listener
      _webEngagePlugin.pushStream.listen((event) {
        String deepLink = event.deepLink;
        Map<String, dynamic> messagePayload = event.payload;
      });

      //Push action click listener
      _webEngagePlugin.pushActionStream.listen((event) {
        print("pushActionStream:" + event.toString());
        String deepLink = event.deepLink;
        Map<String, dynamic> messagePayload = event.payload;
      });
  }
  1. Add below code in dispose() of the main.dart
  //Close the streams in dispose()
  @override
  void dispose() {
    _webEngagePlugin.pushSink.close();
    _webEngagePlugin.pushActionSink.close();
    super.dispose();
  }

Universal Link

  1. Add Below code in AppDelegate.m file
  - (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
  [[[WebEngage sharedInstance] deeplinkManager] getAndTrackDeeplink:userActivity.webpageURL callbackBlock:^(id location){
    [self.bridge trackDeeplinkURLCallback:location];
  }];
  return YES;
}
  1. Add below subscribeToTrackUniversalLink() method in main.dart and call it from initMethod()
 void subscribeToTrackUniversalLink() {
    _webEngagePlugin.trackDeeplinkStream.listen((location) {
      print("trackDeeplinkStream: " + location);
    });
  }
  1. Add below code in dispose() of the main.dart
  //Close the streams in dispose()
  @override
  void dispose() {
    _webEngagePlugin.trackDeeplinkURLStreamSink.close();
    super.dispose();
  }

Track Users

import 'package:webengage_flutter/webengage_flutter.dart';
...
    // User login
    WebEngagePlugin.userLogin('3254');

    // User logout
    WebEngagePlugin.userLogout();

    // Set user first name
    WebEngagePlugin.setUserFirstName('John');

    // Set user last name
    WebEngagePlugin.setUserLastName('Doe');

    // Set user email
    WebEngagePlugin.setUserEmail('john.doe@gmail.com');

    // Set user hashed email
    WebEngagePlugin.setUserHashedEmail('144e0424883546e07dcd727057fd3b62');

    // Set user phone number
    WebEngagePlugin.setUserPhone('+551155256325');

    // Set user hashed phone number
    WebEngagePlugin.setUserHashedPhone('e0ec043b3f9e198ec09041687e4d4e8d');

    // Set user company
    WebEngagePlugin.setUserCompany('WebEngage');

    // Set user birth-date, supported format: 'yyyy-MM-dd'
    WebEngagePlugin.setUserBirthDate('1994-05-24');

    // Set user gender, allowed values are ['male', 'female', 'other']
    WebEngagePlugin.setUserGender('male');

    // Set user channel opt-in status
    WebEngagePlugin.setUserOptIn('in_app', false);

    // Set user location
    WebEngagePlugin.setUserLocation(19.25, 72.45);

    // Set User Attribute with  String value
    WebEngagePlugin.setUserAttribute("twitterusename", "saurav12994");

    // Set User Attribute with  Boolean value
    WebEngagePlugin.setUserAttribute("Subscribed to email", true);

    // Set User Attribute with  Integer value
    WebEngagePlugin.setUserAttribute("Points earned", 2626);

    // Set User Attribute with  Double value
    WebEngagePlugin.setUserAttribute("Dollar Spent", 123.44);

    // Set User Attribute with  Map value
    var details = {'Usrname':'tom','Passiword':'pass@123'};
    WebEngagePlugin.setUserAttributes(details);

Track Events

import 'package:webengage_flutter/webengage_flutter.dart';
...
    // Track simple event
      WebEngagePlugin.trackEvent('Added to Cart');

      // Track event with attributes
      WebEngagePlugin.trackEvent('Order Placed', {'Amount': 808.48});

In-app Notifications

Track Screens

import 'package:webengage_flutter/webengage_flutter.dart';
...
    // Track screen
    WebEngagePlugin.trackScreen('Home Page');

    // Track screen with data
    WebEngagePlugin.trackScreen('Product Page', {'Product Id': 'UHUH799'});

In-app Notification Callbacks

  1. Add Below code in AppDelegate.h file
  #import <WebEngagePlugin.h>
  
  @property (nonatomic, strong) WebEngagePlugin *bridge;
  1. Add Below code in AppDelegate.m file
    self.bridge = [WebEngagePlugin new];
    //For setting in-app click callback set notificationDelegate while initialising WebEngage SDK
    
    [[WebEngage sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions notificationDelegate:self.bridge];
  1. Add Below Method in main.dart
 void _onInAppPrepared(Map<String, dynamic> message) {
    print("This is a inapp Prepated callback from native to flutter. Payload " +
        message.toString());
  }
  void _onInAppClick(Map<String, dynamic> message,String s) {
    print("This is a inapp click callback from native to flutter. Payload " +
        message.toString());

  }

  void _onInAppShown(Map<String, dynamic> message) {
    print("This is a callback on inapp shown from native to flutter. Payload " +
        message.toString());
  }

  void _onInAppDismiss(Map<String, dynamic> message) {
    print("This is a callback on inapp dismiss from native to flutter. Payload " +
        message.toString());
  }
  1. Add Below code inside initmethod() in main.dart
_webEngagePlugin.setUpInAppCallbacks(
        _onInAppClick, _onInAppShown, _onInAppDismiss, _onInAppPrepared);

More Info

Questions?

Reach out to our Support Team for further assistance.

Plugin info

WebEngage Flutter SDK

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add webengage_flutter

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  webengage_flutter: ^1.0.3

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:webengage_flutter/webengage_flutter.dart';

#fluter  #dart #mobile-apps

WebEngage Flutter Plugin

Best Practices of Using IMPORT Statement

In this video, we can learn best practices of using the import statement
1. Order of the import statements
2. Avoid long relative paths to the files.
3. Import what is necessary at that point.

For More Videos:
Essentials for Web Developers: https://www.youtube.com/watch?v=9uGuG2L08W0&list=PL20fyMtMStyGltl7wjgwSoKM_PmhB6J1v

Interview Questions: https://www.youtube.com/watch?v=Omu272bMBlk&list=PL20fyMtMStyEK2gggQurRKZMpbwgiMh-1

Best Practises & Common Mistakes: https://www.youtube.com/watch?v=Qtrl0OEzvMo&list=PL20fyMtMStyHL0uMGRLACViz8-04mhxcC

Reactjs beginner Playlist: https://www.youtube.com/watch?v=SkevBJhRV4M&list=PL20fyMtMStyFsrTQAjqc4QpkpCqrR3qN1

#statement #import

Best Practices of Using IMPORT Statement
Marisol  Kuhic

Marisol Kuhic

1627117200

Flutter - Import image from gallery & camera | Image picker

This video explains you the usage of the loading images form your #gallery in flutter. Image picker is opened on your device to choose the #image.
Almost every social networking app use this feature to add images, videos for creating a post.
Full source code is available in below link.

Source Code : http://www.androidcoding.in/2020/07/24/flutter-image-picker/

Join Flutter Group for daily updates : https://www.facebook.com/groups/273290910590819/

#flutter #import

Flutter - Import image from gallery & camera | Image picker

Sandy Aniston

1626272325

Importing OST Emails to Office 365 - A Step-by-step Guide

Users now have access to the advanced features of Exchange Server without having to install an on-premises Exchange Server. Microsoft 365 Business and Enterprise Edition subscription plans include Exchange Online. It’s available as a stand-alone application, but with Microsoft 365, it’s fully integrated with the rest of the Microsoft Office suite. One advantage of a Microsoft 365 subscription is that you can purchase licenses based on the number of users you expect to have.

Best OST to Office 365 Migration Tool

Why should you use Office 365 to import OST files?

Using a cloud platform like Office 365 to store your Exchange mailbox data has a lot of benefits. Emails in Office 365 can be accessed from anywhere in the world as long as you have internet access. As a result, many Exchange users prefer to back up their Exchange mailboxes to Office 365. One can move their offline Outlook Data File (OST) to Office 365 accounts to make this process easier. And there are a variety of ways to go about doing so.

Let’s look at some of the reasons why people are moving their OST files to Office 365.

  • Moving from OST to Office 365 has a number of advantages.
  • Due to the benefits of Office 365, there has been a change in the organization.
  • When an exchange server goes down, you’ll need a solid platform to rebuild it. It Reduces the amount of time your Exchange is unavailable due to scheduled maintenance.
  • After an unintentional deletion, data can be accessed quickly in a secure environment.

How can OST emails be imported into Office 365?

To migrate OST emails to Office 365, there are no direct methods. OST files can, however, be converted to PST and then uploaded to Office 365. There are also a variety of third-party tools available to assist you in saving OST emails directly to Office 365 accounts.

  1. Convert an OST file to a PST file, then upload it to Office 365.
  2. Using third-party tools, import OST files into Office 365.

Method 1: After converting OST to PST files, upload to Office 365.

Exporting OST files to Office 365 is done in a roundabout way. To upload OST files to Office 365 accounts, first convert them to PST format and then upload them.

Step 1: Convert the OST file to PST format.

Step 2: Transfer the PST file to Office 365.

These two steps can be carried out in a variety of ways.

Step 1: Convert the OST file to PST format.
Converting an OST file to a PST file can be done in four different ways.

  • Copy OST items into a new PST file.
  • Utilize MS Outlook’s archive function.
  • Make use of MS Outlook’s Export feature.
  • Use an OST to PST converter from a third-party website.

Copy OST items to a new PST file.
This method is useful for transferring mailbox items to a new PST file.

  1. From the Application menu, launch the Outlook program. Open the file.
  2. Go to More Items as the last option after clicking New Items. Select Outlook Data File from the drop-down menu. You can now move the data to the new data file folder after creating a new PST file.
  3. Right-click the emails you want to move and select Move from the drop-down menu. After that, select Other Folder from the drop-down menu. Click OK after selecting the new data file folder. Utilize MS Outlook’s archive function.
  4. Open Outlook and select File. Click the Archive option in the Cleanup Tools drop-down menu to save your mailbox content. Click OK after that.

Utilize MS Outlook’s Export feature.

  1. Select File from the File menu in Outlook. Then select Open and Export from the drop-down menu.
  2. Import/Export should be selected. After that, click Next and select Export to a file.
  3. Click Next and select Outlook Data File (.pst).
  4. Select all of the folders to include in the PST file. After that, select Next.

Step 2: Sync the PST file with Office 365.

You have several options for uploading the OST file to Office 365 after it has been converted to PST.

  • Using Azure AzCopy, upload files to Office 365.
  • To Microsoft, drive shipping.
  • Use an OST to Office 365 migration tool from a third-party provider.

Azure AzCopy is used to perform network uploads.

Using AzCopy, you can upload the PST file directly into Office 365.

  • Copy the SAS (Shared Access Signature) URL after you install Azure AzCopy (the SAS URL will provide the necessary permission to migrate the PST file to Azure).
  • In-Office 365, upload the PST files.
  • Make a CSV file with the PST mapping.
  • To import a PST file, you’ll need to create an import job in Office 365.
  • Start the PST import job after filtering the data.

Because Azure AzCopy is a method provided by Microsoft’s cloud platform that is not part of Office 365, you must exercise caution before beginning the upload process.

  • To complete the process, the user must be assigned the Mailbox Import Export Role by an Office 365 Administrator. By default, such a role is disabled, and it is not available to any user or group. The user or the Organization Management Role group can be assigned the role by the Administrator.
  • Only the AzCopy tool can use the network upload method. Direct uploading of PST files is not possible using Azure Storage Explorer.
  • Otherwise, the tool will not be able to access the network-shared folder because the PST files are missing.
  • For large-sized PST files, the upload method is ineffective. The PST file size should not exceed 20 GB.
  • The PST file can be imported to an Office 365 account’s inactive mailbox.
  • You should modify Office 365’s retention hold policies after importing the PST files. Because the incoming emails may be quite old, and the system may delete them due to current retention policies.
  • The tool can upload messages to Office 365 with a maximum size of 35 MB.

PST files to Office 365 via a USB drive

Shipping should be pushed. PST files can be imported into Office 365 with Microsoft’s assistance. Simply copy the PST files to a hard drive and mail it to Microsoft. The data on the disc drive will be copied to the cloud by Microsoft.

Method 2: Use third-party tools to import OST files into Office 365.

It is not easy to import OST files into Office 365. It’s a difficult task for novice and non-technical users. For direct OST to Office 365 migration, third-party tools are recommended. A useful tool for this is RecoveryTools Import OST to Office 365.

How can OST files be easily imported into Office 365?

RecoveryTools Import OST to Office 365 is a tool that imports OST files into Office 365 mailboxes directly. Here’s how it’s done:

  • Install RecoveryTools Import OST to Office 365 and double-click the icon to launch it. Add your OST file to the Add Source section of the tool and Office 365 mailboxes to the Add Destination section when you’re on the tool’s home screen.
  • To map your Office 365 mailboxes to OST files that will be imported, select them and then click Set Filter and Migrate.
  • Apply filters to OST data based on criteria such as Review PST Folders to Migrate, Date Filter, Item Type Filter, Exclude Deleted Folders, Exclude Empty Folders, and so on, and then click I’m OK Start Migration.
  • You’ll get a summary of the process once your OST items have been successfully transferred to Office 365 mailboxes (to save the summary, click Save report to CSV).

Conclusion:

Due to the complexities of manual methods (converting OST files to PST files before migrating to Office 365), the professional tool RecoveryTools Import OST to Office 365 becomes a more straightforward and straightforward solution. It has a user-friendly interface that allows you to add multiple Outlook data files and then migrate them to your Office 365 account. CSV file support, account mapping from source to destination, and advanced filters are just a few of the useful features.

#import #ost #exchange