Implement Flutter Local Push Notifications | Local Notification for android and iOS | PackageExplore

foreign [Music] notification within our flat wrap what I have here is a running emulator of both Android and iOS and the UI is going to be very simple what we have is a single elevator button which is placed right at the center and upon clicking this elevated button it should trigger the notifications that is the local notifications with the help of the package flutter local notifications first let's start trying it out with the Android emulator now let me click this button and as I click you see a push notification prompting up in the Android device now let's test with iOS emulator and upon clicking this you see we get a notification right here on the iOS device as well so this is basically what we are about to discuss in this video therefore without wasting time let's directly jump in the coding part and start implementing this local notification feature in our flutter app first let's start by adding the package in the bus bag and the package is going to be the flatter local notifications after adding this package let's move on to the main.file here in the main.ad file we have the navigation to my home page and here in my home page we have a basic app bar and a body which has the elevator button placed right in the center you see the on press event is where we need to write the logic for triggering the notifications so this is pretty much uh what needs to be done in the UI side first let's start by writing the core logic of initializing the notifications for both Android and iOS for that let's create a separate Dart file and write the local logic there well we have here a separate folder called services and under Services folder we have a separate Dart file called notification service here in this Dart file is where we will write the core logic of enabling the local notifications further first let's start by creating a class and the class is named as notification service since it is going to deal with all the notification for both Android and iOS devices and the first thing what we need to do is to create instance for federal local notification plugin after creating an instance let's start by creating a function that will initialize the notifications the same way let's create an instance for Android installations and settings here you need to provide the image of the notification image here I have provided as flutter underscore logo and you need to make sure that here in say the Android folder app Source Main and then resource and here inside the drawable you need to add a notification image you can give any name you want I have provided this letter logo since I am going to make use of the flutter logo here for this example and here is where I have the image and I need to drag and drop it right here and say the drawable folder after you have done this let's start by creating initialization instance for the iOS device and after it is done you need to provide few permissions like dollar permissions and the permissions for the batch and the sound finally you need to select the Callback function on did receive local notifications this is basically what we need to do for Android and iOS after creating the installation settings we need to make use of these two instances here inside this installation settings for Android into provide this instance which is installation settings Android and similarly for iOS you need to provide this instance which is installation settings iOS after doing so we need to make use of the dot installation of method and pass in the Callback which is on date receive notification response okay so for now we are not going to deal with these callback functions for this tutorial keep it simple we can just leave it empty so this is all about initializing the notification for both Android and iOS device now let's start by creating a separate function called so notification which will be called directly from the UI upon clicking this elevated button okay so basically whenever the elevator button is pressed we will try to call this so notification function that will do the rest of triggering the notification in your device and it is going to take a few set of parameters the first parameter which is a mandatory one is going to be the ID of course you need a separate ID for each notification for now I will be providing it the default value as 0 and we can provide the title body payload and function is going to return a notification which can be triggered with the help of dark show off method and inside this method you need to pass in the same title ID body all those stuff finally you need to provide the notification details the notification detail is something which we have created a separate function here that is going to hold the notification details for Android it is going to be the Android notification details followed by the channel ID and channel name and similarly for iOS it is going to be Darwin nodes in details so this is basically all about core logical of insulization in the notification as well as triggering the notification using this method with this we complete setting up the notifications for Android but for iOS we need to do something in the app delegates folder so let's start with that and here inside the iOS folder we have the runner inside which we have the app delegate and here in this file we need to add few code to enable the notification for iOS devices the first thing is going to be the import statement we probably need to import the local notifications again here and here inside this we need to add this line plugin register callback finally at the end before the return statement you need to add these two lines so make sure you add this if condition followed by this resistance callback and the import statement so these are the basic three things which we need to add inside this app delegate of the iOS folder with this we should be now able to receive notification within our fat wrap are the only thing which is left is we didn't try calling this so notification function in the on press event of this button so let's move over to the UI here at the home page and say this on proceed but we need to make use of the notification service class and that class is going to have the short notification of method the so notification method is going to accept the ID payload title extra ID is given by default as zero it's make use of the title title can be anything so I have basically provided the title and the body details Let me refresh this app and this time if I click this notification button I should get a notification here with the titanium body as specified right so you can notice that we have the notification here which actually works in the way it is expected okay so this is basically how you can enable local push notification within your fat wrap hope you guys found this tutorial useful if you do so consider subscribing and I will see you in the next one bye foreign [Music]

Channel: vijaycreations

Views: 39,671

Keywords: flutter, dart, app dev, package, dart package, flutter package, tutorials, mobile app dev, appdevelopment, flutter tutorials, flutter animations, software developer, mobile application, software, android, ios, web, web design, web development, webapp, flutter web, ui, uiux, app tutorials, education, courses, youtube, youtube education, application, UIUX, notifications, flutter local notifications, push notifications, notification in flutter, flutter notifications, android notifications, Notifica

Id: 26TTYlwc6FM

Length: 6min 57sec (417 seconds)

Published: Sat Jan 07 2023