Complete Guide for Creating Home Widgets with Flutter for Android & iOS

so as you can see here we are able to run the application for both Android and iOS and you can see that in the app Android we can refresh the weather and the weather will automatically change to a random location and based on that the icon as well changes in the home screen if I go in the iOS you can see I can hit refresh it will automatically update in the home widget as well so if I click on home you will see it is automatically updated and these widgets are not the native code that is written inside Android or iOS it is written all in flutter we just have to write it once for flutter and then we can make it for both Android and iOS without any issues and welcome to my YouTube channel so in this video we'll be making a complete home widget application inside flutter so we'll be not needing any native code for both Java or Swift UI to make our UI for the home widget we will be using just the flutter UI so if you're interested in that make sure to stick till the end [Music] foreign [Music] application in flutter so I have made some time stamps that you can check it out from below as well so these are the timestamps and fourths we'll be talking about the home widgets why do we need them what are they then what this is little to no native code what do I mean by that then we will talk about the flutter code that we have in the application and then Android configuration what do we have to do inside Android XML files XML files what do we have to change in that and for the iOS configuration as well what extra things we have to add that for the iOS configuration that we'll talk about so why do you need home widgets so home widgets are the widgets that are not inside your sweater application but on your home screen or also it can be also on your lock screen as well so these are really essential whenever you are making the applications like calendar app Notes app where you want the user that the data that you have in the app can be accessible and they can see that data without any effort like opening the app going with the flow and without doing that notes the recent notes they can see calendar they can see whether they can see and a whole bunch of other data they can see right so in that case home visits can be really helpful what does this little to no native code means so let me show you a quick demo of the application of the flutter code that I used so if you go inside The Code by the way the code is mentioned in the description box as well so you can check that out so here inside the views you can see a home widget dot that file is there on clicking that we have this home widget now you can see it has a column it has a image it has a text and a text so this is the image as you can see then we have a weather we have the weather value then we have the city name or the area name that you can see so this widget that we saw in the demo earlier was built not with the Android native UI is not built using Swift UI is built using flutter UI so that's what I mean right now let's see the flutter code entirely like how we will be using so first things first you have to add a perfect yaml and we'll be needing a few packages for this number one we'll be reading the home widget package that is the main package that we will be using to add our home widgets using the flutter application so we can update them we can save them and we can initialize them by using our flutter application but we have to include home widget package makes sense then we have our DaVinci so this darwinchi what it will do it will translate so let me explain you the whole process how will be doing this so we'll be first rendering the widget and from that widget we'll be Translating that into an image and that image we are going to then initialize inside our native code so either it can be Android or for iOS so this damning Qi what it does is that it does the translation part for us so it it helps us to easily translate any widget to its image form that we can get and store that inside our mobile right and the best part is that the widget doesn't have to be rendered on the screen that we'll talk about just in a moment then we need the path provider basic then else we need flutter whether BG null safety this package is optional because I used it for the background so you can see that the background then it does have some animations as well so I use this package and this is the weather so this weather is for the open API so this is for the open Weather API that I used to get the real time weather data here so this is for the API so these two are optional if you are making any other application you won't be needing that but these three packages are the main packages that you need to make the home widgets using just flutter all right then we have three or four folders constant models views and then our main dot dot so inside our main dot dot you can see the we are navigating to the dashboard screen inside the dashboard screen I am using the weather package and I am passing my API key here so this is nothing but the API key that I have that I bought from the dashboard of the open Weather API that we need and based on that we'll be getting so this is a location so here I am picking a random location so this is our location class and I created a factory method and it is fetching a random location from these location right so this is a random location current weather then we have initially it will be null so in the inner State we are using the home widget config so I made a file home widget config Dot initialized and once the it is initialized then we'll call our API and update the UI of the home widget makes sense so let's go in the call Api and update UI method so what it will do it will take up a random location get the current weather by the lat long and then we will initialize our current weather inside the variable and then using the home visit config we will simply update that and we'll pass a widget what we want to update it with so this home widget is nothing but this widget that you can see in the home screen this is the widget for the home widget that we have to pass so this update method takes context and it takes a widget whatever widget you will pass it will show that inside our home widget either it is Android or iOS both it supports right so here we are simply updating it so call Api and update UI same function I'm calling inside the refresh button that we have on the bottom right you can see here on picking that I will click it and it will automatically call Api and update UI so it will call the API current weather will be updating set State we are calling so that everything in the app also will change as well as we are calling the home widget config.update so that now if I go back you can see that my home widget is also changed makes sense right then we have our basic flutter code here we have a floating action button then I use a stack and inside the stack we have our weather BG that is the package that I use for the visit Regional safety for the backgrounds and right then we have our column Center so there we have some sized box descriptions this is the description then the city name and then the weather so this is the basic code that we have inside the model we have two models location for flat law these locations we are storing for random location and for the weather so every weather will have a weather city name description image and a weather type so that is a enough you can see this is the enum all right makes sense but this is the model inside the constants we have a extension so this is extension is using from code so basically the weather code that I am getting from the API I am converting that into a enum so I pass this from code here so from the code from the API we'll be changing it to the email okay now this is the views dashboard home widget home widget is like the main widget that we have it is a box we have gradient gradient we are passing so you can see that if I come back there's a gradient this is light this is dark so this gradient we are passing here we have a box 170 by 170 we can also change the box size accordingly how much space is available then we have a column and based on that we are simply rendering the data here makes sense perfect so this is the views now let's talk about the most important thing here that is the home widget config that I am in because that is the only thing that is initializing and that is updating it right so let's see what it is here what we are doing is that in the initialize we are using the home widget package and we are setting the app Group ID so this group ID we are setting when we are initializing make sense right and then here we are updating so whenever we want to update so this group ID I'll show you I have in the constants file we have a strings dot dot and here you can see we have my API key that I got from the open API there is a Android widget there is one iOS widget and there is one grouped ID so this group ID we are passing from our constants now I'll show you just in a moment how you can get your own group ID IOS widget name Android widget name so don't worry about that once we have our group ID we have to pass that so that our home widget will be initialized inside our home page then inside the update method it takes context and it takes widget now based on the DaVinci capture package it will take the widget and it will give back us the uint 8 list bytes for that image so we'll be using this bytes data and I will be storing that inside our application support directory on the date time we can change this logic if you want and then I'll be save widget data so we have a variable file name inside our native code for the Swift or Java and this file name we are passing the fine path and we are updating the variable first and then we are updating our widgets for both IOS as well as for the Android and here we are passing the IOS and Android names now I know it can be a little bit complicated like why we are passing file name what is this say widget data so just say widget data is updating a variable that we have inside our native code known as file name so to make things more clear what I will do is let's start with our Android configuration as well inside our Android you can see if I close everything here what you have to do inside the Android open it up go to app go to SRC then Main and here androidmanifest dot XML here I added this part of the code as you can see this part you have to adjust nothing else and above the metadata and below the activity tag we have to add this receiver okay I'll show you and here you need to change the custom home view so what this custom home view represents is that if you come here to inside the Court Link you can see that we have our main activity that is empty you don't have to change anything here I made one custom home View and inside that I added this code so basically you can see that we have file name here so what it is doing is that flutter and both Android and iOS have like shared preferences or data storage so we'll be storing our file path inside the data storage by the key as file name and then our native code will pick it up the file path using the file name so this variable has to be same with the variable that we have in the flutter code right so this is the code basically what it is saying that on update because here we are updating the widget so on update listening it is doing and then basically what we are doing here we are rendering our widget layout we are rendering the widget layout we are getting the image path and then we are decoding that and then we are updating our widget image let me show you what I mean so here once you add this code we have to add one and last thing inside so inside the rest folder inside you have to create one XML folder and inside that XML folder we have to add this home visit demo dot example as well so this code we need to add here home widget demo example and inside our layout folder we need to add our widget layout so these files these four files we have to update for our Android configuration this is nothing but a image we are showing so so here you can see that we have a linear layout linear layout is like a column and image view is like image so here we have one image ID known as widget image so inside our Android inside our kotlin file inside our custom home view you can see that we are getting r dot layout dot widget layout so layout resources layout widget layout so this widget layout represents that right so this widget layout represents that and then our image widget image so here inside the widget image we are getting the ID widget image and then we are updating the image inside that using our kotlin so here we are updating based on the file paths that we are storing the image inside okay so this is the widget layout pretty basic you don't have to change anything inside the widget layout let's close that and this is the file bar make sure that the r dot layout file widget layout has to be same with the file name here also the widget image ID has to be saved with the image view ID here okay that's about it and this XML file so here we have to add this code which will initialize our layout known as widget layout right okay and you can see that in the Android manifest.xml we added this receiver so here the Android name this custom home view will represent the class name for the kotlin file and then you need to pass the resource file the XML file that is home widget demo example that we added here this file name should match here and custom home view should match with the kotlin file so that's it this is all you have to do for the Android configuration and once that is done you don't have to do anything just update the flutter code and based on that you will get the image and it will show you inside our home widget same we have to do for the IOS as well so let me show you go to the iOS and here open in finder I'll open in finder open iOS and here let me open up Runner dot xcode project so here inside xcode what you have to do you have to first go to file new then go to Target and here you need to add widget extension so if you scroll down you have your widget extension you have to click next give it a product name hit finish and then you will be getting to this page where if you click on render you will be having one targets as to Runner that is our flutter application and then this home with a demo extension that you will make right so both of these four you have to go to the signing in capabilities add a capability as group so here Search Group app groups you can see here app groups we need to add so here you have to add group Dot and then ID you can pass so I already made one that is home visit demo Group whatever ID you will make here you need to add that same one inside a runner as well so app Group inside you need to add here also so both places same ID has to be there whatever ID you have added you need to add that inside your flutter project so move over to Android go to constants and here group ID you will paste it easy now this Android widget is custom home view that we already talked about the court name file that class name you need to pass here and this iOS widget is nothing but whenever you click file and new Target whatever project name you have given in my case I have given as home widget demo so that is what I have added here as the iOS widget name right so that is it now inside the home widget demo you just need to change this home widget demo dot Swift file here we have a little bit of Swift UI code you need to add it once and do nothing after that once this Runner group ID for both Runner and the widget extension is added then we can move over to our home widget demo or the Swift application for the project after that import the widget get Swift UI add intents create one timeline provider so structures like class in flutter so you have to create a scrub provider it will have Place folder get snapshot and get timeline placeholder is like whenever you are creating whenever you are initializing it by default so what it will show so placeholder is like the initialization value the me value so here I pass no screenshot available any text you can pass as a file name so here we have a model simple entry simple entry is like a model which has date file name and display size this file name is important because this file name field will be having inside our a flutter code as well 5V name that is why and date is mandatory we have to add date to the model display size will help us to recognize how much size we have for the village if it is small medium or large so these three parameters I added based on that I am passing initializing it date as now date file name as an empty string display size at the context dot display size this display size is like MD over pin flutter then we have our get snapshot so this gets snapshot here what it is doing is basically whenever you are adding so for example if you go here and search for widget form widget demo you can see the widget this image that we are getting is nothing but a snapshot right so this snapshot it is so here sweet name you need to pass your group ID here for key now it is taking from the database file name if we have and then it is updating that entry so you can see that image we can see here as well okay so we have one entry simple entry date we are initializing as now file name and display size and then we are returning that entry completion is like return and Dot then get timeline we are passing context completion so here get the timeline we are simply calling our get snapshot only so here nothing we are doing get snapshot we are calling okay then we have our home widget demo so this is the widget which will be called next right the that is the iOS widget that we are passing in flutter also so kind you need to pass as string iOS widget name same widget name widget configuration now this home widget demo is nothing but the title that will come and description this is my home widget this is the description supported families right now I added system small you can make it multiple light system medium system large and based on that more home widgets will come okay now here what we are doing it is a static configuration and here we are calling the home video demo entry view so this is the entry View and we are passing the provider entry so we are getting the entry here and based on that we are calculating the Custom Image so entry dot file name UI image we are using and Custom Image will get inside the body it is like scaffold in that we are calling Custom Image dot scaled to fill padding zero so that whatever image that we will be getting it will be scaled to fit completely expanded it will be right and that is it we have don't have to do anything else inside our iOS configuration right so we can move over and this file name is nothing but here it is taking from the database this is the file name so that is it here we have talked about the Android configuration as well as iOS configuration what we have to do only thing that we need to change to update the UI is our views home widget and home widget dot dot image text text image text text that is nothing else so that's it for this video I hope you enjoyed it I personally did by making this video and I personally learned a lot if you do as well then make sure to give it a like subscribe my channel and share this videos with your friends as well if you have any doubts suggestions then comment them below as well and I'll be happy to read them out I'm smart and peace out

Channel: Yash Makan

Views: 7,373

Keywords: flutter, flutter tutorial, flutter tutorial for beginners, flutter ui, flutter tutorial 2023, flutter ui design, flutter ui tutorial, flutter ui design tutorial, home widget, apple home widget, flutter home widgets, flutter widgets, best flutter widgets, home widget flutter, flutter course, home_widget, home_widget tutorial, flutter home_widget, ios home widget, widgetkit, widgetkit tutorial, swiftui

Id: jcNonkHVLbA

Length: 25min 48sec (1548 seconds)

Published: Wed Sep 06 2023