Live Coding in Flutter - Background Notifications and Alarms

Tensor Programming · Intermediate ·📐 ML Fundamentals ·7y ago

Key Takeaways

The video demonstrates how to build an app in Flutter that can schedule notifications and alarms which will go off even if the app is in the background, using tools like Android Alarm Manager, Flutter Local Notifications, and Background Fetch.

Full Transcript

guys sorry about that didn't mean way when Windows 10 months we'll crash all right so I'm going to wait for some people to get in here and then we'll start so how're you guys doing today you that's how you doing alright looks like we've got well not sure says stream is healthy that's good like five people in here that's good and I think I think we can start just check one more thing all right so for the benefit of the people on YouTube who are probably watching this after the fact and for anybody who's new to the stream my name is tensor and we're going to be doing some fluttery stuff today specifically they're going to look at a package called Android alarm manager and if we have some time we're also going to go and look at another package called flutter local notifications I think that's what it's called at least it's an approximate name at the very least okay hey guys we've got a lie arch Robert Robin though apps neela sh owdown few familiar faces few new faces it's great alright so let's get into this before we get into the code though I do want to kind of show you guys what we're dealing with let's there we go let's move over to the browser real quick so this is the Android alarm manager this is obviously Android only hence the name Android so one of the big deals with flutter is this idea that you're using a flutter view and when the application is closed and it's not in the window you only get a certain amount of time to continue to do different computations and hang different services and stuff before everything just kind of goes into the background and of course this is not like a native application on either Android or iOS for the most part with iOS you can do very small computations while your app is in the background though it is frowned upon and with Android you can do as much as you want really now there are some constraints and we'll kind of talk about those later now this package specifically allows us to interface with Android and go in basically spawn and isolate that is independent of our application and that isolate can then do whatever we want it to so it's basically just a big pocket of dark code that we can execute at the most every 15 minutes after our application has gone out of the screen just so that you guys know though I believe the flutter team is working on a better solution than using like this particular library one of the biggest problems is that iOS and Android do things completely differently as far as background services go and so trying to find a common ground between the two is sort of difficult they're working on essentially reseeding flutter into the different platforms and I'm assuming they're mainly doing this for the sake of desktop and web but it's also got benefits for the mobile platforms as well and one of the big benefits is that it will allow us to call background code in a way that's much more native and easy already or anyone getting questions as far should be should be fairly straightforward you you you I asked background fetch fetch I believe is written by the guy who one of the guys behind react native like he ported it over here let me and back here so here's background fetch this is another library I didn't really include it today because I mainly wanted to touch on libraries that were a bit more mature this is a fairly recent addition and yeah I've never really messed around with it but it looks decent slightly it will also change though you can see here it also still has the same constraint where you can only call to the background every 15 minutes so age they're basically they basically do the same thing this one it's not specialized instead it uses a headless implementation whereas the other one uses also uses a headless implementation and both presumably allow us to run dart isolate in the background assuming that this one also works for iOS perhaps anyway I'm not gonna worry about it I'll just do with what we were planning to do or what I was planning to do you and we're whatsapp is in the flutter application so they have full control over the Android API not that we don't and flutter it's just different like if you wanted to do something like whatsapp usually what you would have to do is actually write a bunch of Java or a bunch of Swift depending on the platform that you're on but because we're using flutter you can go ahead and use a plug-in and then pass along a bunch of dart that you want to execute and so that kind of makes it a little bit easier for calling us as flutter developers instead of just mobile developers all righty so what we're essentially gonna do here is just kind of set up the plugin there are a bunch of steps that we need to follow to get this thing started so let's go ahead and get the imports and stuff if I have some time I will go back and take a look at this background fetch plugin because seems like yet having iOS on there is pretty nice so I want this and I think I'm going to want to bring in HTTP as well so let me get the version on that and hmm think maybe I want to bring in Android intent as well to allow us to specifically call an Android intent so and I think this is I see you there we go excuse me so we install them from our pub spec yeah mo but we also have to modify the Android layer to make all this work so then going to Android and well first it's always a good practice to make sure that your Android API can deal with Android X and Jetta files so I'm going to say Android enabled Jets of fire equals true and then Android use Android eggs was true probably shouldn't have spaces I don't think that will really do much but yeah it's always a nice practice I'm also going to update Gradle so instead of three point two point zero I'm gonna go 3.0 and I think I'll bring in the Google DNS services I think it's four point two point zero it's just working with this earlier it's not CMS its GMS so these I think are optional but the the parts that are optional are modifying the androidmanifest and first we want to come in here and actually change our activity name or our application name change it to period application and you'll see why we're doing this in a moment make sure that we've got the name of the project which is just notification and alarm example then let's see we're also going to need to bring in some permissions so let me see let's see this page actually has all the stuff I need so I don't have to type them all out they've got all of it on their own readme which makes this really easy so you can just copy and paste them in so we need the receive boot completed and the wakelock permissions I'm also going to grab two other permissions one for the Internet which I think we don't actually need that why not and then the other one is for the ability to set an alarm so that we can pass that back through our intent right in our activity we need to define some of the actions that we're going to use with this so they've got that also in their github so you can just copy and paste it over like this that's a big old block of stuff mainly this is just binding to the to the activity that we're gonna make and let's go ahead and do that right now so I'm going to come in here into calm example and then the name of the application and make a new new file here called application Java and then I'm just going to copy and paste the code that they have over here and hang on before I do that I'm going to need some imports so needs to name it the same thing that we have with our main activity import I are flutter at letter application import iro weather plugin come on plug in I think it's registry hang on let me see if I can actually find it in there example you so much easier just copy and paste instead of actually writing it out see so you know this um basically then I'll explain what this is doing here in a moment let me up paces in here and then we've got the actual application code so when your application terminates the problem is is that we have no way to register the dart code with the background so that it will actually fire off so what will happen is like you'll set up an event to happen in the future but it won't know what to actually call to you so what we do here is we just override this register with function which will then sort of fix that because it will then allow us to specifically tell it what we want to put in that background service and so that's what this entire setup is for is basically just to add this little piece to our application so that it will actually be able to call to our isolate and close all that let's just test this make sure it's working so I'm going to call this up in the main app here or in the main function rather it's let's bring in our dependency that is not what I wanted there we go and the way that we call to this thing is by specifically initializing it and then telling it what we want it to do and this can really be anything anything that you can put inside of a isolate you can put inside of this handler so we go ahead and say and what is it it's Android alarm manager initialize and that will initialize it and we want to of course wait on this because as a future passes backup bullion but we don't really care about that and then after we do that we can call a wait Android alarm manager and then we can fire off what we want so we have two options here we have one shot this is a one-time item that will only happen you know obviously once and then we can set up a periodic background item so periodic background item we put in the duration that we want so I'll make this seconds but this is a really bad practice because like I showed you guys before Android only really lets you have one of these callbacks happen every 15 minutes I'm only doing it for 10 seconds because we can do that in our development environment but after a certain number of times it will stop working then we have an ID that we want to pass in for this background service and I'm just going to call this zero because it's simple and then our callback needs to be a top-level function or a static function so I can't just put a anonymous function in here I have to actually write a function out so let's see I'm just going to say create a function here called callback and then I'll just have it print I don't know I am in the isolates and yeah and then we'll just call it in here so callback like that there are a few more options you can add here see there's this few billions here we can tell it that we wanted to execute at that exact moment we wanted to wake up the device or we want it to continue to schedule or to continue to work through boots so if a user turns off their device these are still scheduled if we set that to true I'm not gonna mess with any of that because we're working on an emulator instead of an actual device all right so let me open up the emulator here and then we'll take a look and see if this works should be set up properly I'm thinking let's see what you guys are saying alexxa says I'm interested in foreground notification and how to get out of doze mode you mean sleep mode through code you could use this to get yourself out of sleep mode so as I showed you there is a boolean here that will wake up the device if you set that to true with the devices if the device is currently in standby then it will automatically wake it up and of course the notification side of things is different this is this is mainly just code running in the background and in Android they call that API the alarm manager so sort of like you're setting up alarms but the reality is that you're just running code in the background if you want to then issue a notification you can create an Android intent using the Android intent library or you can use the other library that I want to show you guys which will pair up with this particular library and then actually issue a notification to your device see you the reason why my emulator is so slow is because I have it boot from core boot and the reason I had it turned off is because right before the stream it actually crashed my computer so kind of taking a gamble here that it won't do that again you you let's see let me turn that off and just wait for this to get up and Wan doing that I'll talk to you guys you laughs 2.0 I've done some OAuth 2.0 in the past with other languages of course it's certainly something I've thought about doing with flutter I don't have any specific tutorials in mind but yeah it's definitely something that I want to cover I think there was a a set of tutorials that I wanted to do where we had like a go server and then a flutter front-end and then the go server issued our auth tokens I'll have to all have to work back into that I've got I've got a whole list of things that I have written down that I actually can go and take a look at but I'm not gonna do that right now all right finally our emulators up we can run this program and we can take a look and see what's going on actually bring up the debug terminal because our print will happen in here and see there are few other things that I'll show you when this actually gets running you what's my day job I'm a freelance programmer a slash consultant I work with a lot of different companies doing different technologies mainly doing what I'm doing right now is showing you guys showing people how to implement and use various technologies and also doing it myself yeah an English you're right the actual devices you do have to consider at battery optimization and stuff like that you can put logic for that type of thing in these background applications and that's something that I would definitely recommend doing also using like also using like some of our lifecycle hooks would be great to initialize some of these background processes no you didn't miss much we really just started about 15 minutes ago suggest a laptop on and it's been a while since I bought a rap table nikkei I guess you're asking in a different currency I'm from the US so I'm not really sure what you're asking for you know wow that crashed real fast I guess oh yeah we've got a few tags that are not closing properly in our androidmanifest let's see which one's there as a service closes receiver closes receiver closes all right let me see let me just check their example real quick you all right that's why this needs to be on the outside of the activity so out here rather than inside and yeah that should fix it no wonder it was taking so long for Gradle to actually build this thing you can you please stop spamming the chat otherwise I will have to put you in a timeout um I wouldn't really call it an alternative I mean it is sort of but at the same time you can use it in conjunction with FMC our FCM alright so Josh says that he's just finishing his internship going to is found on your computer science fluttery tutorials have helped him out that's great oh yes needless you're absolutely right of course I don't really when I'm writing these tutorials I don't really consider different flavors of Android anyway so here we go we've got a few little pieces that have already started so you can see here it says starting alarm service and then alarm service started and then we've got our first printout which is I am in the isolate so we know that our isolate is running and in fact if we go to our debugger you can see here that we actually have two main stacks running one of them is the isolate and the other one is the actual app this should print out again after 10 seconds but sometimes it won't go that far because it's not really supposed to anyway I'm not gonna worry about it it's not a big deal all right let's close this thing down and let's actually apply to something useful one of the better uses for this type of thing is to make it so that you can pass in tensed for users or make it so that maybe your application can update like an API while it's not on the screen and of course when you're doing something like that you probably want to use the lifecycle hooks like for instance when the application goes off the screen you initiate an alarm that they will go off and maybe update your API so what we'll do here I guess is create a small little call to an API I'm going to use one of the fake api's thank the swappi API which is this Star Wars API and we'll use that just for fake data so I'll create a repository the URL I think is let me see if I can get it you you there we go so it's called swap eto and we specifically want it in JSON format like that let's bring in HTTP and I guess we'll use this and all we're going to do is run serialize this thing we're just gonna have it push back at a string because when you're talking between isolates you really want to just pass back primitive types if you can do that you don't really want to pass back baby to objects because I can generally that's not a good idea so so we'll parse our URL in this call and then I'll take this response and just grab the body which should be a string all right so now let's take this home page and actually you know what I'm gonna make a new widget that will sit inside of the home page I'll just call this I don't know hello I'm widget and that's converted into a stateful widget you and what I want to do in here is define a receive pork which comes from the isolate library which just got Auto imported so that we can communicate with the actual isolate that's running in the background so we'll create the receive port and then we're calling to the planets branch of this API so I'll create a list here we'll call this planets and we'll set it equal to an empty list we also need in it stayed here and hang on let me let me take the the terminal off the not determine on the emulator out the screen so you guys can see more of it the shortcuts that I'm using our control period I think it was ela she told me about it earlier in another stream somebody did Neil is rather naughty lished somebody told me about in another stream if you see like like a light bulb next to something envious code and you hit control period it'll bring up this little context menu and then you can just click the option that you want makes it a lot faster it's pretty useful for changing widget types and adding a constructor to an object and stuff like that oh yes we've already got our init state let's create a function here we'll call this init isolate and what we'll do here is we're gonna use what's called the isolate name server which comes from dart you I believe yeah dart UI and this will allow us to register a port name on our receive port so that we actually know which port is which and you know so that we can actually communicate between our isolate and our actual application even if the application refreshes so I'm going to put a constant string up here and this will be our port name just call this port port name and we can use that here we need to put the poor name here and then we need to put the Sunport side of the received port here so port send port like that so we can check to see if we've registered this send port with this name and if it comes back as false then we'll throw an exception so I will throw unable to your name port that way we don't continue to actually do things after the fact also we can call this in disposed to remove the port name from our port so we can say isolate name server remove port mapping and then we just put in the name so port name and this will take it off at the port so each port can have only one name and each port needs to have a unique name and so doing it this way we assure that when this state object in this widget gets destroyed the port name gets detached from the port even if the port still exists all right so we want to call in it isolate in here in the init state function and then I guess let's create some logic that will allow us to take the planets the string that we're getting back and converted into a format that we can put into our list here so just say J map equals JSON to code and I probably need to bring in dart convert put in our message and then we're gonna want to planets at all and then we'll just call J and map results I should probably show you guys what this JSON looks like but basically it's a map and then it's got the list of items after a key of results so it's just fairly basic fairly standard JSON you guys can go look at it later if you want to anyway so we've got most of this set up we do need to set up the function that we're going to execute in our isolate though so let's create that I'm going to just call this isolate function I guess or we call it isolate call back it'll be asynchronous and I need to set up our send port it's just some port and then we can call isolate name server to get the send port by the name that we gave it that's just port name like that and now we can then create a repository and then we can just say strange JSON equals a weight free protocol API and then just pass it through the Sunport so to send Port we don't check to see if it's there just send the JSON on through so this will execute in the background even when our application is out of the screen and we can tell it when we want to deploy this isolating all that stuff to update our our data of course this isn't really going to matter that much for the data that we're actually looking at because it's all static but if we had data that changed maybe if we were looking at like a firebase database or if we were looking at like an API that maybe has like chat messages and stuff like that in it this would be extremely useful all right so let me get rid of this here and then let's build out the UI Center here we then want to I guess embed this alarm widget in here and then the alarm legit let's start by so let's start with a center and then wallah create a stream builder in here and the cool thing about our receive portside is that it's essentially just a stream and so we can just use the string builder to listen on it so you can just we're getting back strings so we need a stream builder string type you can say stream pass in the port and well we can then cast it like this and now it's essentially just a stream because cast will convert it into a stream type and now it should interface with our stream builder and then we can actually set up the logic here so just if snapshot has data or rather doesn't have data and will return a center actually don't need a center because we're already in one circular progress indicator otherwise we want to call what does it create planets passing our snapshot data and then will return a list view builder or not a list view builder but a list view so and in here we can just say children equals our planets list map let me just map on each of the planets and create a list pile with the data inside of them all let's see planet what would it be let's let's get the name subtitle let's get I think they have population and we'll just do that that's that should be enough to sort of prove the point here or to sort of show you guys what's happening here we do want a button to make this work so I'm just going to put this in the fab button on the scaffold so and actually you yeah we can do it in the fab to make a void callback though so I'm going to need to move this function the isolate function up there and if I do that that should be alright so let me I'll just make this a global function and then yeah we'll be able to call from here so floating action button child will call this icon icons alarm yeah and then pressed make it asynchronous and we can then just say await Android alarm manager initialize and maybe we should put this in main so away in droid alarm manager dot let's make this periodic we'll have a duration because this will be our initialization of the actual data will make the duration ten seconds again give it an ID of zero and then we can just call to our isolate function like that and let me put this other thing up here there we go and yeah that should do it let's see let's actually run this in the emulator now and yeah we'll take a look so let me open the emulator you you and just reading through your guys text you you Kanaya Theory taken android/ios package and right platform channels to use the function or should i implement it myself in dart aflutter depends on what you're trying to implement Josh see I'll return for the classroom to work into that one yeah I know about the the the what are they called the snippets that you can use what is my favorite database software to use depends on the use case I tend towards no SQL because I find relational databases to be a little bit painful sometimes but it depends like I said it depends on the use case because relational databases can be perfect for certain things and yet at the same time something like de Tomic or or like like how using prologue based database like a data log database can be very useful hey there I was running do you know if you can do push notifications on flutter without fire you can do push notifications and in fact we're gonna get to that library here in a moment could you recap a bit of the logic you just implemented yes give me a second let me actually run this thing see if it actually works first I'm gonna check the debug console so alarm service has connected and it's started and let's say after about 10 seconds we should get our data in the window actually that may not work because we forgot to call set state so well actually we shouldn't have to call set state because we're inside of a string builder so in theory this should work let's see you there we go finally all right cool so we've got our data and it looks like just some of the data so not all of it there supposedly like 60 planets in here so I'm assuming that when it goes and it calls again it'll go and get the rest of the planets and it'll just keep populating the list or maybe it'll just keep adding more of the same items to the data or to the list rather so I'm just gonna leave it here for a moment and then I'll come back to it and see what happens and while I'm doing that let's go over some of this logic for you all right so I've got the basic flutter setup at the very top we've got this a weight Android alarm manager initialize this is where we're initializing the plug-in so that we can run all this stuff in the background then of course we've got a Salus widget stainless widget all pretty straightforward down here there we've got our floating action button and then we are actually calling out to the background code which is just an isolate that we're spawning and we responding it via this function here the isolate function and basically you can think of the isolate function like an entry point for this isolated process so the it's like the main function of the isolated process everything that's written in it will be done in a secret order like you know because it's a procedural code and so we get our send port which is the receive port the end of the receive port from the port down here and then we call to the repo object we then call call API and then we send the JSON string along the send port back to the receive port here and down in the widget this is fall fairly straightforward receive port a list of planets which is just a list of JSON Maps essentially and then we have our init isolate which is just checking to see if we can name the the send port with an port name so that all of our isolates know where this port is supposed to be and where it's supposed to be coming from we can also dispose of that same name so because we can only have one unique name and then create planets down here just takes the JSON string and then turns it into our list and then the rest of it is fairly straight for it it's just a matter of taking that JSON unwrapping it in the right way and then creating list tiles inside of our ListView let's see if we have more data you can see here we actually have doubled the data because it called to the same API and then just doubled up our string so this is all happening in the background I'm not actually doing anything to make it run just that one button click was enough to get it started so you could probably see how this would be very useful especially for data that is changing over time if your app goes out of the screen like for instance if I just go to the home screen this should still be running in the background just no matter what unless I go ahead and turn off the device all righty if the app is in the background how is the fab access the fab doesn't need to be accessed you only need to click the fab the one time to initialize that isolate the rest of it is just you know it's just running already and it's running because what happens is the Java code executes sit and then it it's essentially just a headless application that's every 15 minutes it wakes up it calls to the dart code the dart code executes and then it goes back to sleep and then it just keeps doing that over and over again and of course ours is doing it every 10 seconds rather than every 15 minutes but it's not precise because we're not really supposed to schedule it that many times so and that's why we're not seeing it just populate with a ton of data right now already so that's it for this I'm going to take this entire app and just put it into a different file and then commit it over to github see let's just call this dirt I'll just paste it in here and then let's let's send all this over and if you guys want to take a look at the code you can obviously go to the github repository that's in the description of this livestream okay so I just realized that we never used the Android intent library well whatever you know that's not a big loss it's a pretty straightforward library and it's it's only really useful if you want to spawn a custom intent but for the most part there are plugins to do the things that you can do with intense anyway so we're gonna go and look at the other plugin so let me pull that up you it is called flutter local notifications so let me get over to the browser so this is a library we're going to take a look at there is a bit of setup here like we had with our other library and there are various different notifications that we can set up we can set up a specific time we can set up to have it repeat over and over again and again this uses background code so once you've scheduled the notification it will it should appear later down the Rhine anyway so let's see got to get some of this stuff put it into our code let me go back to the the actual editor here and I'll take off the emulator should already be in our pups bag or a manifest rather you that's yeah we've already got that permission add another receiver here you and this one actually is the same as this one here except it's got a different receiver name so it's got the same intent filter but a different receiver we want to display the schedule notifications we need this other receiver to and let's see if we want to make our phone vibrate we can also add that permission to and I think that should be it is setting up Android yeah that looks alright alright and I think this should also work with iOS just out of the box there are a few things that you want to do with iOS obviously but you know we'll actually look over those as we're doing them one of the other things we want to do is actually get a a an icon so let's see probably just use this icon and put this in drawable because we need an icon to attach to our to our notification let me get the smallest one here probably be this one here is cutting this over they renamed it back to what it was called so yeah when you have a when you have a notification that appears you want that notification to have you know a piece of or an image on it to indicate that it's from the application that you're working with and so yeah that's what that's for anyway so let me clean this up I'm just going to get rid of all this other stuff and I guess we'll know this and remember this it's just a container and I guess we'll remove this and get rid of these for now and this now before I get going let's see if we have any more questions got a lot of foreign languages that I can't speak unfortunately sorry guys I only speak English and a little bit of Japanese how how can I hide the icon of my app in Android I'm not really sure what you mean by that do you mean have like an an app that doesn't have an icon or do you mean like while you're in your application you're not seeing the icon I'm not really sure you mean so give me more details than I can try to answer it for you right oh yes we forgot to bring in our dependency so let me get that you so this is just flutter local notifications now flutter local notifications and then the version number is this version right now and our while I'm at it I'm going to take these and comment them out that we might need HTTP so I'll leave that one in let's see alright well so let's go ahead and just implement this fairly simply so that we know it works so we're going to need our local notifications what it's called we can actually set it up so let's let's do this in Maine should just be local notifications letter local notifications plugin thought and then we create a so we're creating an object here then we can use this object to do various things so we can say you can set up Android let's see let's see so in here we have initialized I think we call that rest instead we want to call and create a new Android setting object whereas Android initialization settings I'm not sure where I'm not getting out of completion and then we put in the name of the the launcher application or the launcher picture that we had which is just I see the launcher you for iOS we have the same thing so we could say initialize iOS equals and then it's just i OS initializer ization settings and for this one I don't think you have anything specific that you have to put in here but you do have a bunch of different options you can put in here so you can you have all these different brands so you can have it play a sound you can have it be silence you can present a badge you can request sound permissions and stuff like that with the Android notification it's just the icon so now we can go ahead and connect these two so that's what it should be called I spelt it right all right and we just put in our Android and then iOS objects and then we can call the initialize function with the flutter notifications plug-in object so just and for this we pass in the initialized settings that we just created here and then that initializes our ability to send out a notification let's let's make it so that we can actually send out a notification so what I'm gonna do is just add a let's let's add some text to this application so and then we'll put in our fab and we'll use the floating action button to launch our notifications so that's whoops and then on pressed we'll make a function to put in here and I'll make the function down here so let's it's going to return a future and I'm going to call it single notification and we want to pass in a date time we also want to pass in a string message and then we I guess we could pass in some subtext the hash code and then they sound if you want one I can make this sound optional let me do that and if I'm gonna make this static let's let's just make it a top level function alright so we've got to set up some platform channel specifics so let's just call it Android channel and this is just a Android notification details object and in here we specify well let's see specify the channel ID the channel name then the channel description we're sending all this and it's got a ton of different options you can see well that's quite a lot so we can manipulate like the LED lights we could have it vibrate make sounds have different colors just a ton of different stuff it's kind of cool so channel ID is just gonna be let's just call it channel ID then the channel name channel name and then the channel description just do it like that and then the rest of this stuff I guess we can put in our sound if it's here so sound sound we don't actually have a sound so I'm not really gonna worry about that let's remove it for now and maybe if you guys want to hear a sound I'll put in a sound right here we can also specify the importance so there's an important scene oom that we can use for this importance let's make it Max and then a priority that we can also do which is also our priority inu so let's give it max again for the iOS side let's close this iOS well iOS channel is fine I wish notification details the same type of object as the Android one this one has a lot fewer settings so we can only really set up an alert present a badge present a sound or just put in the sound I'm just going to leave it empty and then we can set up notification details which are just platform in specific one so just call this platform channel so notification details then we pass in our Android channel and then our iOS Channel like that and let's see is there anything else no that's it and then when you want to use our fluttery local notifications plug-in to schedule the actual the actual thing the the notification so me uh hang on let's just pass us in here oh no you know what we'll just create a new one you or now we need this here the plug-in object so we actually need this one let me pass it through here and pass it our way through Maine and all the way down here so called so then we can just use control period again make the constructor and we can pass it through my home page as well you guys probably shouldn't do things like this like it's really not advisable to have an object and pass it to the right your entire widget tree like this but whatever this is a really small app so I don't really care and then more pass it into our function here let me put it in the front just call to our plugin and we can just go ahead and call schedule we pass in an ID which will be the hashcode let's see that's good title let's make that the message body will be the subtext schedule date will be the date time and then the notification details are our platform channel and we can also put in let's see there's also a payload that we can put in here so the payload can just be our hash to string for instance alrighty so now we can go ahead and just call this in our floating action button so I see plain single notification and let's make you say synchronous we're going to need to specify a date/time per so date time let's just call this now equals date and up now let's make a UTC time it seems like my analyzer slowing down yet again it's really nice and then let's see we'll pass in a plugin and now and let's put in our message which would be notification this is a notification the hashcode will just be an integer sir whatever just put an integer in there and then sound will just leave empty all right so that looks about right let's go ahead and run this and see if it works well alright we have some errors somebody debug those real quick apparently it's not finding the uri for this for some reason let me make sure it's imported properly oh I know what it is it's the background that's giving the error so let me just comment all this out you knew that with control forward slash just highlight some code and just do that anyway alright so now we can run this thing you you want to hide the launcher in the Android launcher these are local notification you can obviously push a notification into your application and then push it using were Oakland notifications as well so it can be used for both one or the other yep just crashed I'm not really sure why let me see all right so it looks like it has to do with the stuff that we set up that doesn't exist anymore so let me go ahead and just remove that stuff we're actually you know what would be easier is just to keep our import on the Android alarm manager because all this is is if you've ever noticed I don't know if you guys have ever looked inside of this aisle folder but any plugins you have in your application will have generated register with calls inside of them so you can see here this is all a generated file and we have our Android alarm manager plugin and then the flutter or local notifications plugin and they're both being registered in the java side of things and so since we didn't have this imported it was getting confused because it didn't know what the hell it was all right also when in doubt you can always run for other clean that will help too yeah as I was saying him I'm not really sure how you can hide your icon on Indra and I'm sure there isn't way though generally you want the icon to be there I can't really think of a use case where you wouldn't want it I mean unless you're trying to have like an app that you don't want the user to know is installed on their application in that case I would just make a partial rap that doesn't even have an icon but yeah if you don't supply an icon with flutter if you don't supply an icon it'll automatically give you the flutter icon but if you don't supply an icon with a normal Android app I don't think it will default to something else sambong says nay nay she Heil which I guess means hello teacher according to Google Translate is interesting I don't speak much Chinese and I'm not sure if that's Cantonese or Mandarin all right so our application is open like we've got some kind of issue here so it says that the initialized function was caused on null which shouldn't be the case maybe I should bring these downwards fact that's probably what we're going to have to do rather than typing them through the entire tree I'll just turn this into a stateful widget and and I'll put it in this let's see just let's see make a function like this and then we'll call it inside of it and stay all right so I should do it perhaps we'll see let me close this out seems to be another arrow summer all right because now we're trying to get the plug in the pregnant and I call plug in anymore it's called the local notifications pardon and yeah these should be this should be in the very least declared out here alright let's see I reset this thing but actually shot again we're getting issue with initialize all right so I need to find out why that's happening I'm pretty sure I walked through this pretty pretty self-explanatory I don't know maybe there's a step I miss you so it's the initialized fun in here okay I see I probably want to call them wait here there we go all right so that that solved the problem and the problem was that it was just running before everything else was set up and yeah it's usually not a good thing so let's see if we can get our notification all right and before we do that what we want to do is actually add some time here so when we call the button unless add five seconds to it so he gives it five seconds before it posts the notification all right let's give this a shot and seem some kind of you we have a notification up there yet you and see what's a sing method schedulers Collin okay so problem is is that so what I'll do is rather than passing in the plugin like this I'll just directly call on the notification plugin and I'm going to need to bring this function put it right inside of this object or make it static and let's not make it static and let's see we'll make it asynchronous while we're at it that way it'll have some time to actually wait wait for this to call and then yeah hence the car weight on a function that wasn't asynchronous all right let's try again you like we're already but it's fine see you know what it might be maybe I do have to initialize this thing before I even call any of this stuff something like that that simple I'm going to be kind of mad yep it's that simple all right so now it's sending the notification back and there's our notification including some sound and I guess it uses the default sound if you don't specify sound which is fine and it seems to take about five seconds to pop up which is cool all righty so that's pretty straightforward pretty easy to do and neither she was perfectly right I should have looked at the chat yeah sometimes I get a little overzealous and I don't actually initialize the object and then that causes problems is a keylogger app yeah there are ways to hide to hide icons Google hide app icon you'll find tons of ways to do that anyway all right so I think am I not showing the emulator huh okay I'm sorry about that I thought I was all righty so let me go reset this thing and yeah there we go so just simple app click on the fab wait about five seconds and then we'll have a notification pop there we go and I'm not sure if you guys you probably can't hear the noise it's making it's making just a normal notification noise let me add the audio input for my computer just temporarily so that you can share it let's see that is not the one I wanted ani there we go all right so you should in theory be able to hear this now though I'm not sure maybe very loud too made about five seconds I heard it anyway I tried you alright alright good so the effort was worth it so yeah alright and I think so you can see here you actually have the little flutter icon sitting in the top that's the icon that we specified and when you pull it down you have the text for the notification so it says notification this is a notification we can click on the notification and if we had some kind of action built into the notification it would do something maybe open the app like for instance if I fire the notification close the app it should still pop up yeah there we go so you can see it does still work in the background and then when I click the notification by default I guess it opens the app so yeah it sort of uses all that background stuff that we were looking at before but it's less involved in this case if you combine these two widgets together are these two libraries together you can do a lot of really cool things though so I would recommend you guys check that out yeah that would be something because I just killed the the input mainly because my computer can get pretty noisy and I don't really want that coming through on the stream all the time of voice-chat software open up in the background and skyping people skyping and people discarding and slacking and all that stuff it's really annoying alright guys well I'm gonna call it for today I guess we've been going for about an hour and a half but it seems like a good place to stop ID we've only been going for about an hour and that's that's fine I really didn't want to overdo it this time like we did in the last two streams to our streams is a bit too much for me especially if we're gonna do three in a row like this if you guys have any questions though go ahead and ask them and I'll answer them if I can and of course they don't have to be about this they can be about whatever now of course all the code here will be on github and I'll make sure that that happens right now so just go ahead and commit all this stuff the background file should be all should still be commented out but it'll be alright I'm sure you guys can figure out what to do with it I think in the future I probably do something more complicated with these two with these two libraries and I'll definitely be looking at background fetch as Neela suggested it is a pretty cool library I didn't realize that he worked with iOS that's why I didn't actually look at it because it was like ah this is basically the Android library but yeah you can launch the app without the head I actually just showed that well in theory I didn't let me see so let me we go I'm gonna go ahead and make this like ten seconds and then I'm going to kill the app after I click the button so let's see click the button kill me app let's see still get our notification and clicking it will open the app from start so it actually did open the app from cold even though it's not showing that well probably because it's not hot reloaded anymore so yeah it's trying to load an app that doesn't exist so yeah that did open the app I just moved it to ten seconds so it had more time to kill the app it would still show after TIF five seconds if I left it that way if so if you schedule notification it will happen roughly in the time that you've scheduled it in Android is not exact it's never exact about its notifications and if you're scheduling a lot of notifications then you're going to have to abide by the whole 15-minute rule which means that you can't just schedule like thousands of notifications and have them come in every second or whatever you have to make it so that they are spread apart by 15 minutes and even if you're using multiple apps scheduling all of them scheduling notifications at the same time you can only have so many on both Android and iOS I think iOS it's only like a hundred and like 40 notifications it was and then like androids like a thousand something but it's still pretty pretty limiting in that regard I could actually look it up not really sure what it is anyway I'm not gonna worry about it something that maybe we could talk about it's another plane anyway I appreciate you guys all coming out for this livestream and I hope you guys enjoyed the content I do I hope you didn't just come in because this is actually literally the end of the livestream but you know what you can watch it on YouTube in in like a moment when I'm after it's turned off so should be alright No thank you in English alright guys well I'll see you guys next time probably do it another next week not Monday but probably like Wednesday Tuesday or Wednesday probably be the next livestream I'll definitely have an elixir tutorial out on Monday and I'll probably do another video on Tuesday if I don't do our livestream so you

Original Description

#flutter #tensorprogramming #notifications In this live stream, I will be building an app that can schedule notifications and alarms which will go off even if the app is in the background. Will most likely be using Provider and the BLoC pattern or RxCommand depending on the setup. Feedback is welcome Source Code for this example: https://github.com/tensor-programming/flutter_notification_live_stream Request Form: https://goo.gl/forms/rFjHcZMRJ3bYPEC03 Feel free to support the channel: Patreon: https://www.patreon.com/tensor_programming Check out our Twitter: https://twitter.com/TensorProgram Check out our Facebook: https://www.facebook.com/Tensor-Programming-1197847143611799/
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Tensor Programming · Tensor Programming · 0 of 60

← Previous Next →
1 NodeJs, Text editors and IDEs
NodeJs, Text editors and IDEs
Tensor Programming
2 Vanilla JS todo App
Vanilla JS todo App
Tensor Programming
3 Elm Tutorial part 1
Elm Tutorial part 1
Tensor Programming
4 Elm Lang Tutorial, Part 2
Elm Lang Tutorial, Part 2
Tensor Programming
5 Elm Tutorial Part 3
Elm Tutorial Part 3
Tensor Programming
6 Elm Tutorial Part 4 -- Analog Clock App
Elm Tutorial Part 4 -- Analog Clock App
Tensor Programming
7 Elm Tutorial part 5 -- Snake Game
Elm Tutorial part 5 -- Snake Game
Tensor Programming
8 Elm Tutorial part 6 -- Calculator
Elm Tutorial part 6 -- Calculator
Tensor Programming
9 Go Tutorial part 1 -- Hello World and Static File Server
Go Tutorial part 1 -- Hello World and Static File Server
Tensor Programming
10 Go Tutorial part 2 -- Web Crawler
Go Tutorial part 2 -- Web Crawler
Tensor Programming
11 Go Tutorial Part 3 (Web App part 1)
Go Tutorial Part 3 (Web App part 1)
Tensor Programming
12 Go tutorial Part 4 (Web tutorial part 2) - Using templates
Go tutorial Part 4 (Web tutorial part 2) - Using templates
Tensor Programming
13 Go tutorial part 5 (web app part 3)
Go tutorial part 5 (web app part 3)
Tensor Programming
14 Go tutorial part 6 (webapp part 4)
Go tutorial part 6 (webapp part 4)
Tensor Programming
15 Go tutorial part 7 (web app part 5)
Go tutorial part 7 (web app part 5)
Tensor Programming
16 Go tutorial part 8 (Web app part 6)
Go tutorial part 8 (Web app part 6)
Tensor Programming
17 Go tutorial Part 9 (web tutorial part 7)
Go tutorial Part 9 (web tutorial part 7)
Tensor Programming
18 Go tutorial Part 10 (web app part 8)
Go tutorial Part 10 (web app part 8)
Tensor Programming
19 Go tutorial Part 11 (Web app Part 9)
Go tutorial Part 11 (Web app Part 9)
Tensor Programming
20 Go Tutorial Part 12 (Web app Part 10)
Go Tutorial Part 12 (Web app Part 10)
Tensor Programming
21 Go Tutorial Part 13 (Web app Part 11)
Go Tutorial Part 13 (Web app Part 11)
Tensor Programming
22 Looking at Elm 0.18
Looking at Elm 0.18
Tensor Programming
23 Go tutorial Part 14 (Web tutorial part 12)
Go tutorial Part 14 (Web tutorial part 12)
Tensor Programming
24 Go tutorial Part 15 (Web tutorial part 13)
Go tutorial Part 15 (Web tutorial part 13)
Tensor Programming
25 Go tutorial part 16 (web app part 14)
Go tutorial part 16 (web app part 14)
Tensor Programming
26 Elm Tutorial Part 7 (SPA part 1)
Elm Tutorial Part 7 (SPA part 1)
Tensor Programming
27 Elm Tutorial Part 8 (SPA Part 2)
Elm Tutorial Part 8 (SPA Part 2)
Tensor Programming
28 Electron Elm Tutorial
Electron Elm Tutorial
Tensor Programming
29 Go tutorial part 17 (web app part 15)
Go tutorial part 17 (web app part 15)
Tensor Programming
30 Up and Coming Programming Languages and Technologies for 2017
Up and Coming Programming Languages and Technologies for 2017
Tensor Programming
31 elixir tutorial part 1
elixir tutorial part 1
Tensor Programming
32 elixir tutorial part 2
elixir tutorial part 2
Tensor Programming
33 Elixir tutorial Part 3 (GenServer and Supervisor)
Elixir tutorial Part 3 (GenServer and Supervisor)
Tensor Programming
34 Elixir Tutorial Part 4 (GenStage)
Elixir Tutorial Part 4 (GenStage)
Tensor Programming
35 Elixir Tutorial Part 5 (Plug and Cowboy)
Elixir Tutorial Part 5 (Plug and Cowboy)
Tensor Programming
36 Phoenix Framework Tutorial Part 1 (elixir part 6)
Phoenix Framework Tutorial Part 1 (elixir part 6)
Tensor Programming
37 Phoenix Framework Tutorial Part 2  (elixir part 7)
Phoenix Framework Tutorial Part 2 (elixir part 7)
Tensor Programming
38 Phoenix Framework Tutorial Part 3 (elixir part 8)
Phoenix Framework Tutorial Part 3 (elixir part 8)
Tensor Programming
39 A Intro to Clojure and Clojure Syntax
A Intro to Clojure and Clojure Syntax
Tensor Programming
40 An Update about the channel
An Update about the channel
Tensor Programming
41 Intro to Rustlang (Setup and Primitives)
Intro to Rustlang (Setup and Primitives)
Tensor Programming
42 Intro to Rustlang (Strings, Tuples, Arrays, Slices and Pretty Printing)
Intro to Rustlang (Strings, Tuples, Arrays, Slices and Pretty Printing)
Tensor Programming
43 Intro to Rustlang (Ownership and Borrowing)
Intro to Rustlang (Ownership and Borrowing)
Tensor Programming
44 Intro to Rustlang (Structs, Methods, Functions, Related Functions and the Display/Debug Traits)
Intro to Rustlang (Structs, Methods, Functions, Related Functions and the Display/Debug Traits)
Tensor Programming
45 Intro to Rustlang (Control Flow, Conditionals and Pattern Matching)
Intro to Rustlang (Control Flow, Conditionals and Pattern Matching)
Tensor Programming
46 Intro to RustLang (Enums and Options)
Intro to RustLang (Enums and Options)
Tensor Programming
47 Intro to Rustlang (Vectors, HashMaps, Casting, If-Let, While-Let, and the Result Enum)
Intro to Rustlang (Vectors, HashMaps, Casting, If-Let, While-Let, and the Result Enum)
Tensor Programming
48 Rustlang Project: Snake Game
Rustlang Project: Snake Game
Tensor Programming
49 Intro to Rustlang (Traits and Generic Types)
Intro to Rustlang (Traits and Generic Types)
Tensor Programming
50 Intro to Rust-lang (Closures, the Box Pointer and Iterators)
Intro to Rust-lang (Closures, the Box Pointer and Iterators)
Tensor Programming
51 Intro to Rust-lang (Modules and Lifetimes)
Intro to Rust-lang (Modules and Lifetimes)
Tensor Programming
52 Intro to Rust-lang (Macros and Metaprogramming)
Intro to Rust-lang (Macros and Metaprogramming)
Tensor Programming
53 Intro to Rust-lang (Error Handling)
Intro to Rust-lang (Error Handling)
Tensor Programming
54 Intro to Rust-lang (Concurrency, Threads, Channels, Mutex and Arc)
Intro to Rust-lang (Concurrency, Threads, Channels, Mutex and Arc)
Tensor Programming
55 Intro to Rust-lang (Tests, Attributes, Configuration and Conditional compilation)
Intro to Rust-lang (Tests, Attributes, Configuration and Conditional compilation)
Tensor Programming
56 Rustlang Project: Port Sniffer CLI
Rustlang Project: Port Sniffer CLI
Tensor Programming
57 Rustlang Project: Chat Application
Rustlang Project: Chat Application
Tensor Programming
58 Rustlang Project: CLI Toy Blockchain
Rustlang Project: CLI Toy Blockchain
Tensor Programming
59 Intro to Rust-lang (Setting up a Development Environment)
Intro to Rust-lang (Setting up a Development Environment)
Tensor Programming
60 Intro to Rust-lang (Building a Web API with Iron)
Intro to Rust-lang (Building a Web API with Iron)
Tensor Programming

This video teaches how to build an app in Flutter that can schedule notifications and alarms which will go off even if the app is in the background. It covers the use of Android Alarm Manager, Flutter Local Notifications, and Background Fetch, and provides a step-by-step guide on how to implement these tools.

Key Takeaways
  1. Set up the Android Alarm Manager plugin
  2. Modify the Android layer to work with the plugin
  3. Update Gradle to version 3.0
  4. Bring in the Google DNS services
  5. Modify the AndroidManifest to add permissions and actions
  6. Use a receive port to communicate with the isolate
  7. Create a stateful widget to handle API data
  8. Use a stream builder to listen on a receive port and get back strings
  9. Create a ListView with planet data using ListView Builder
  10. Add a FAB button to call isolate function
💡 The use of isolates and receive ports allows for efficient communication between the background service and the app, enabling the scheduling of notifications and alarms even when the app is in the background.

Related Reads

📰
Python Tricks With zip(), enumerate(), and map()
Learn how to use zip(), enumerate(), and map() in Python to simplify your code and improve productivity
Medium · Machine Learning
📰
Python Tricks With zip(), enumerate(), and map()
Master Python's zip(), enumerate(), and map() functions to simplify your code and improve productivity
Medium · Python
📰
Understanding Transformers (Part 2): Why Backpropagation Broke Recurrent Neural Networks
Learn why backpropagation through time broke recurrent neural networks and how it led to the development of transformers
Medium · Data Science
📰
CS-NRRM™: A Practical Implementation of AI-Readable Longitudinal Data Infrastructure
Learn how to implement a practical AI-readable longitudinal data infrastructure using CS-NRRM, a framework for preserving continuity in large datasets
Medium · Data Science
Up next
What is Deep Learning Explained with Examples
VLR Software Training
Watch →