#Flutter_Journey: Porting from Maui to Flutter - Part 1

array so what are we going to do in this video series in this video series I am going to walk you through or in fact build a full-fledged real life application in flutter from scratch this is the application which I also built using dotnet Maui a few months back and I posted the full source code of the application.net mavi application and a YouTube tutorial series on the same on my YouTube channel now for some of you who know me I am not a hello world kind of a person I do not want to start coding with basic projects or hello world or showing dialogues or transitioning these between pages that is not me in fact you would be surprised when I tell you that the very first project I ever created in flutter after following these installation instructions is the application which I am going to show you just now so let me first of all show you the application which we are going to build so this is a tube player application which I built in dotnet Maui a couple of months back two or three months back so if I launch this application basically it's an application where you can explore videos in YouTube so I can go through list of by default it is showing me some iPhone 14 videos I can keep scrolling at the moment I'm only showing 10 videos at a time but the moment I move to the bottom I tap into the infinite scrolling capability and then I show the next 10 videos and so on similarly if you want to search for something I can go back to the search bar and I can search for a specific video let me try say my name and see how it works so you can search for something specific and then the videos come up I can click on a particular video it will show you the details about that video let this load up it has some animations in the app it shows you the title the number of views how many days ago it was posted the channel name number of subscribers the tags which are there for this application or this video similar videos related to this some information you can read comments which have been posted for this video so you can see there are 36 comments for this video you can play the video I'll just start playing and then pause hello everyone and welcome back this is first of the mid right so you can start playing the videos you can even download the video if you want let me just show it to you so this is the video if you want you can just click on the download button over here the dialog icon and it will start downloading the video for you so this is all the capabilities which you can do with this application now this is the same application that we will now build using flutter so for those of you who are coming from xamarin or dotnet Maui background background you can find the full source code the the Maui 2 player on my GitHub page I will also provide a link to this GitHub repo in in my uh in the description of this video so here are some screenshots some functionality in the application and then finally a running video of the application in action and if you want to learn step by step how we build this dotnet mobile application you can go and check out my 10 part series Beyond monkeys where I am building this real world two player application using dotnet Maui from scratch so I have named it start to finish the same thing I'm also going to do with clutter so the same application I'm going to take and I'm going to start building on or using flutter so once you have installed all the dependencies all the prerequisites which by the way are very few very simple you have a couple of options to develop flutter applications you can either use Android Studio or you can use Visual Studio code the choice is totally up to you I tried both of them both of them work flawlessly the only thing I would say I prefer Visual Studio code because it is very very lightweight and better performing than Android Studio so I'm more comfortable with Visual Studio code or vs code but you can decide to go ahead with whichever ID of your choice that you want to develop flutter applications so with this in mind the first thing we need to do is we need to create a new flutter application so I'm just going to launch my visual studio code at the moment there is nothing I am going to go to my command palette you can do it by uh I think it is Ctrl shift p on Windows or command shift p on Mac and then you can just type slutter and choose new project and then it will ask you what do you want to do of course we are going to build a flutter application so I'm going to choose application where I'm going to store this I'm going to store this on my desktop so select this folder to create this project in and then let us give it a name let me call it Cube underscore clear so this is the name of the application or the name of the project that I want to give and then I'm going to press enter it is going to go and you can see at the bottom it is running the flutter create command to create an application for me let me close this main dot dot file so as not to confuse you and show you the very very basic structure of this project so we have got some folders over here let me go through these folders the Android iOS Linux or Linux Mac OS web and windows these are your platform specific folders if you want to write platform specific code for any of these uh platforms or operating systems just like in dotted Maui under the platforms you have tizen you have Android you have mac you have IOS you have Windows similarly you have all of these different targets that you can write platform specific code in but for our purpose we are only going to be working with this one folder which is called the lib folder at the moment the lip folder only has one file which is main.dot but we are going to add more folders and more files into this as in when we move forward the test folder you can ignore for now if you want to write unit tests or integration tests for your application you can write them under this folder and then the other important file that we will come back to and we will look into and we'll keep on modifying is the pub spec dot yaml file consider the pubspec.aml file as the Cs proj file in your.net mavi or xamarin project and the main dot dot you can consider this as your a combination of your app.xaml.cs file and the main page dot xaml.cs file so before going any further let me just run this application on iOS simulator and let us see this in action so here you can see the application is launched this application blank template is very much similar to what you see in a.net Mobi application when you first create an empty project so you have a button at the bottom which is called plus if you click on it it just tells you you have pressed a button this many times so you keep on pushing it it keeps on incrementing exactly the same concept as you can see in a dotnet mavi project application so let me just stop this for now and let us go back to our project and then let's see what do we have in the pub spec Dot yaml and this is an important file and one of the things that we will also be doing we will be doing some Cleanup in this file as well there are a lot of comments over here at the moment just to keep it simple I'm going to remove them so that it is easy to read but of course if you want you can leave them in you can read it on your in your own spare time okay so let's clean up a bit and then I I'll explain what do we have over here all right so this is nothing but the name of your project some description of your project and then this is the current version automatically it will be implemented it will be incremented the publish to right now is defaulted to none if you change it to publish then it is going to publish it to pub.dev which is an equivalent or a new nuget equivalent in flutter world so you can build a library and you can publish it to pub.dev so that other people can also benefit from what you have done these are the dependencies and this is the place where we are going to add additional packages if you want to utilize them for example in dotnet or mavi or xamarin world you go to nuget and you add package so this is where we are going to add packages over here so one of the package the SDK package which is the flutter package which is added by default similarly they have added the Cupertino icon icons which you can use in your applications and as we progress you will see we'll be adding more and more packages for example one package to fetch data from the internet we will use one package to use or or provide cased images in our application and so on and these are some similar things these are some packages which are used only during the development purposes so you saw there is a test folder so you can create tests and you can execute tests while in the development environment using this flutter test package and then we have something called flutter lens these are your code analysis rules you will see when I start coding as in when you type it will automatically fix the indentation formatting and if there are any violations in code for example you are assuming you are saying that you should always be using camel casing and then suddenly you start using Pascal casing which is the uppercase lowercase combinations or maybe uppercase as the first character of your variable name it will warn you so these are all the different rules which are defined in flutter Lanes using the frontal lens package and the options what all you want to enable or disable are defined in the analysis options Dot yaml and then below that right now I'm just going to leave this as such commented out but this is where you can specify in the mavi world you have the mavi images you have the mavi fonts so this is where exactly you can specify where my fonts and my images are going to come from in fact let us do something I can simply go and I can create a new folder and this time I'm going to create this outside of outside of my lip folder so I'm going to call it assets so under assets I am going to create a new folder no click on asset something is wrong move to trash it is not allowing me to create a new folder so assets slash fonts let me delete yeah okay maybe I pressed the wrong file earlier wrong wrong icon so you go you go and review player and you create a new folder called assets under that I'm going to create a folder called fonts and under that I'm going to create a folder called images so you can see over here I have got two folders assets and fonts now in order for me to make use of these fonts or these images all I need to do I just need to come over here and I need to uncomment these lines so let me uncomment this so I'm going to say my assets and my images are coming from the folder which is assets slash images I can provide a specific file that I want to work with or I can just leave it like this asset slash images so this is going to take all the images and and convert them into assets or mavi images equivalent which I can use in my application so let me actually go ahead and add some let me copy paste some images so I have got these three images the error image and play image and YouTube placeholder image I'm going to just copy it or I can in fact drag and drop okay drag and drop is not working copy images okay my OS is not behaving well for me so let me do it this way and then for the fonts I am using two fonts fira Sans light and fira Sans medium so I can bring it under the fonts folder so these are some fonts and images that I have included in my project the moment I have set this which is assets and I have uncommented this line and said asset slash images or now I can simply go and use this error.png or if I open this up this is the error.png if I open the YouTube placeholder this is the icon I can use all of these icons or all of these images in my application now to use a font all I need to do is let me just go ahead and let me uncomment one of the sets and the other one I can remove so here I need to give it a name I need to provide a name maybe I can give it a name regular font and what is the file that we are going to use for the regular font rename let me copy paste so I'm going to say the S the font is in assets slash fonts and the name of the font is Sands light I can remove this one and then I need to add the second font as well so let me copy the same thing and let me paste it over here again and I can call it a medium font and this time around I will change it from light to medium so automatically now I have access to these two fonts and this first font I will refer with the name regular font and this second font I will refer with the name medium font very similar to what you are doing in your mobile program.cs file where you register your fonts so the moment you save this now it is going to run the flutter Pub get command and it is going to make all of these available for you in your application okay now the other thing that we are going to do I actually come from a very strong mvvm background and also regardless of mevm I also want to to make my application or my project in well-maintained and easy to read and easy to understand format so I always rely on uh you know proper structuring in my applications and projects so here what I'm going to do I'm going to create some folders over here so I come from the mvvm background so I'm going to create new folder I'm going to call it models so there is one folder I'm going to create as models there is another folder I'm going to create view models another one which is of course views I will also create one folder for view controls so view controls are usually the ones that you that that I use for putting reusable controls or components within the application and maybe another one I can create is let's say services this is where we will write all our services one of the important things to note over here though it is not absolutely mandatory flutter relies on Dart as the programming language Dart is very very similar to C sharp both in nature as well as in syntax I found it to be 90 percent similar to C sharp in most of the cases of course being a different language there are minor you know small differences here or there but that is fine that is to be expected but majority of the cases you will find it will be a 90 95 percent match to your C sharp the way you are doing things in C sharp the same code actually you can copy paste and you can you can run it in in that with or without any minor modifications so one of the things that Dart I believe has some roots or some background with Java I assume so so they are using camel casing that is what you will see so the camel casing I mean if you want to declare a variable so rather than saying or if you want to declare a property let's say in in dotnet world you will say pub public int student age right so this is how you will write a property in here you will write the property with camel casing so it will be student H so the first letter is or the first character is small again this is not compulsory it is totally up to you but if you are writing flutter application eventually what is going to happen you will maybe need some help from some other flutter developers you may post your code publicly on the internet for others to see and if you are breaking the patterns or if you are uh doing things in a totally different way which people do not understand it is going to make it difficult for them to to understand or learn from your code so whichever programming language you are using best way is to follow the instructions in or or the the nomenclature of that platform or framework or SDK or programming language so I'm also going to rely on the same camel casing everywhere that's why you see I named my folders as models with a small M services with a small S View controls with small and so on now the other important thing that we have is we have got this main dot dot file again do not be overwhelmed right now we are going to make it very very simple for you for the time being let me just remove all these unnecessary comments for you so that it makes it easier for you to read I'm just going to remove everything yes there are a lot of comments basically these are instructions to help you get started very quickly Okay so just have a look at this simple main dot dot file as I said in the beginning this main dot dot file is your combination of app.zaml.cs as well as the main page.xaml.cs file or app shell dot CS file if you prefer to use uh app shell in Maui or xamarin applications so what do we have over here so at the very top we have simply something called a main function this is your I think there's the startup or the app or app.zml.cs the application Constructor where you are just saying run an application which is called my app and this my app application is defined over here so this is the my app application and what it is doing it is simply returning a material application this is as good as saying that it is extending from Material application with the title flutter demo and the theme is primary primary color is blue color and it is returning a home page or my home page class or a page or a widget with the title flutter demo home page and this my home page is again another widget I will explain what widgets are where where we are simply you know same thing increment counter we are incrementing the counter we Define the initial counter as zero we keep on incrementing it whenever a button is pressed so we are using a scaffold for the page where we have an application bar with the title which is defined over here when we pass this home page we passed it the title so this is the title which is displayed and then we are using a column I'll explain all of those in a bit and inside this column or a sequence or sequence of rows let me call it call it that way we are displaying a text and with a with a static text saying you have pushed the button this many times and then it is displaying the number of the the counter clicks and then we have a floating action bar action button when when you click it is going to call this increment counter function which we have defined over here so this is all there is right now as I said do not worry we are going to simplify this a lot but before I start doing that I am going to do some further housekeeping in my application so for those of you who have who have watched my mavi 2 player video series or or even inspected the code you would realize that the majority of the code that I have written over there at least on the backend size side or the C sharp side exactly translates one to one maybe with a small or or minor variations here or there so the very first thing I need to do is if you remember or if you recall from that video series I created a Constance class where I declared some variables that I want to use throughout my application so so that I don't have to declare them in multiple places so for that under the lip folder I am going to create a new file and this file I'm going to call it app underscore constants dot dot so this is a language or a DOT language file so I'm going to create a class called constants so one thing that you will notice there is no public or private over here there is no concept of that the the way you declare something as public is or rather you declare something as private as if you just put an underscore before the start of the name the moment you say underscore before any class or any variable name that becomes private by default anything without which is not starting with an underscore that is public in nature so this is a constants class I'm going to create and here what I'm going to do I am going to do the same thing which I did in which I did in my DOT and mavi version wherein I have so there is a static constants this is giving me an error yeah okay so I have a constant string called application name constant string email address constant string API service URL and when I go to the the YouTube version 3 data apis you will see that this is the end point that we should be calling every time with some specific resources such as video details or channels or search Etc but this is the common URL for all of them and then you will also need us an API key so I'm not going to provide or type in my API key over here unfortunately last time I use my API key in the video series and then I think everyone was using the same API key and then that that API key got locked and the account was disabled so this time around I will do it in the background once I close this file I will go and I'll update the value in this API key variable so this is the app constants that we are going to create the other file which I'm going to create is my application Styles now this application styles are your is your basically coming from the app dot xaml file so if you remember in xamarin or Maui applications you have that you have app.zaml file wherein you can Define your colors your fonts your grid view or or collection view Styles your you know button Styles all of these things now flutter is not markup based language it is not xaml or HTML or XML based language it is purely a programming based language based on dot so the whole UI you have to create using dot language itself this is very similar to creating a xamarin or a dotted Maui application using C sharp only no xaml so they are using the same concept as that of mvu which is a model view update concept so the same thing applies in flutter as well so to Define application Styles you also have to create the application Styles in code so I'm going to go and add a new file over here and I'm going to call it app Styles dot dot file so F trials or Dot and this is where I'm going to Define say my colors or my textiles Etc so let me start with some colors I'll say constant color and let me bring in okay the namespace is already added that's fine uh let's call it uh page background color and this is going to be a color uh I can say 0x FF for full opacity and I can give it a back page background color of two six two six two six RGB so let me do a control dot on this and then import my material dot packet so that it resolves all the dependencies so this is the page background color in in app.xaml you would have written it something like this color uh X key equals to uh page background color and then inside you would have said something like this hash two six two six two six so the same thing that you are doing in in xaml or Dot and Bobby I'm doing it over here like this so I'm just declaring a color and for Styles uh flutter or Dart recommends that you use K for for these so that it is easy to distinguish now I'm I'm not going to write down everything I'm just going to copy paste some of the colors that I'm going to use in my application so I'm going to use page background color which is hash262626 dark color which is 2f2f2f and light color which is F5 F5 F5 dot text color light text color light border color and card fill color these are the different colors that I am going to use all right so let's save this one in fact one of the things that we will also do over here is we will also Define some textiles so these are the styles that usually these are the label styles that you will apply or you will Define in your app.xaml file so and and then you can you can use it for example I can say I can declare const textile and I can call it k regular light text yeah light text say size 12 and this is a new textile by the way the way you define you can even earlier dot also used the new keyword but now they are saying that this is deprecated so you do not need to specify new the moment you refer to a class with the brackets the new is automatically employed so I'm going to declare a textile and then this textile I'm going to say that my font family is let's say my regular font all right what else do we have maybe we want to give it a color so the color I want to give is K light text color all right and maybe a font size I want to give I want to specify a font size of C12 so this is how I am defining my style I'm calling it K regular light text 12 and this is using regular font light text color as a text color and the font size of 12. now with this let us go and create our first proper page so let me go into the views folder and I'm going to create a new file and I'm going to create a start page so let me create a start page dot dot file so this is where I'm going to have the starting page which when the application runs is going to be displayed so to create this I can use a stateless widget I can use some shortcuts I'm going to call this as my start page uh on this note since I am using vs code one of the things that you will also need to do if you click on the extensions there are a few extensions that you would need to install one for sure you need to install is flutter the moment you install the flutter application it is also going to install Dart extension for you so flutter plugin is going to install the dot plugin and then I'm using this awesome flutter Snippets I highly recommend that you install these because what they do they allow you to they are basically shortcuts which allow you to do lot of these things automatically for you so you don't have to type just like in C sharp if you type ctor and Tab out it will automatically create a Constructor similarly over here you saw the moment I wrote St less it automatically created a stateless widget class for me all I need to do is I need to define the name of this class so this is a simple class and it it also added all the this correct this to material it also it will add all the Imports or the using statements so these Imports are nothing but the using statements that you see in your C sharp so what is this widget basically flutter just remember one thing flutter is all about widgets everything is a widget your application itself is a widget your page is a widget your custom control is a widget your third party component UI component that you bring in that is a widget everything in flutter is a widget and there are just two types of widgets in flutter one is a stateless widget and the other is a state full Widget the difference between the two is in the stateless widget you cannot update the state once you have defined something once you have put something let's say you have a label and you have said that your label value is XYZ you cannot change that label value on certain event as an example you saw in in when we ran this application every time we were clicking clicking on that plus icon in fact let me go back over here see every time I'm clicking it is updating this label over here with a new value in a stateless widget you cannot do that you can only do that in state full widget where you can manipulate the state of the widget itself so the widget is the the basic building block in flutter everything is a widget so right now you can see this is a widget it has a Constructor you can leave this Constructor or you can remove it it's up to you because right now we are not doing anything with this Constructor in fact Let me let me remove this all together and what it is doing it is simply it has just one function inside which is an override of build which returns a widget and it takes a context and currently it is just returning a container which is an empty box it is not doing anything let me change that so what I'm going to do instead of returning a container let me just say that I am going to return a scaffold okay and you can see scaffold basically is a layout for a page which can have multiple items the two most important things which are of importance to us is this app bar the application bar at the top and the body the actual body of the of the page of course then you have lot of other things for example you can add floating Floating Action button or you can also specify the location of that you can have the drawer you can have the bottom navigation bar background color and and so on there are a lot of other properties which are available for us so for me right now what I am interested in to start with is just my background color and this background color I want to give it K page background color the one that I defined okay and you can see at the moment it is complaining that it is sorry the moment I did it automatically imported this and it is let me save this so this is where this is where the rules or the editor comes in you see I have just written written scaffold background color colon K page background color and then after that I have put a column let me just simply go ahead press Ctrl s or command s save it and you will see it will automatically ah indent out everything properly for me so I'm going to give it a background color I'm going to Define an application bar so again the way you define an application bar is an application bar in the application bar I am going to say my background color is say colors.transparent I want my application bar to be transparent I want to Center the title I want to Center the title I want to have no elevation for my for my app bar and my title is going to be a text and this text is going to be tube player and the style of this so the style that I'm going to use for this is some style that I have defined over here so let me actually bring in some Styles and then we can make use of those so I'm going to replace this textile with a few textiles which I have defined so I have the K regular light text 12 using the regular font size then I have medium light text again where I'm using medium font but light text color and then I have okay right now I only have light and then I have the K page header textile so this is the one we are going to use for our page header so I can say k page header textile okay so this is our app bar and then the next thing I'm going to do in addition to the app bar we are going to have a body of course and this is where we are going to show something maybe I want to put in a text called say start page content will go here blah blah blah and maybe I want to give it a style so let's give it K medium light 18 textile so right now it is complaining that since I'm using a constant text over here ideally I should be using the cost modifier over here so I should be defining it with const so I can add the const so that this error goes away if you want this to be ignored all together there is a simple way you can go to your project file and in your analysis options.yaml you can include this option and then it will not complain about this at all so the way you do this is oops sorry let me undo this no so I'm going to undo this and if I go over here Quick Fix it's going to tell me that I can ignore this file so ignore for file I can add this construct add this line over here and then it is not going to complain at all or if I go to my analysis options I can specify it over here and then it is going to ignore as well so yeah coming back to our start page so this is a simple page that we have created so far it is a page we just have just has an application bar and it has a body with text in it that's it in fact I can also in my application bar I can also add an icon let me add an icon so I can say leading and I can specify to be um icon and icons dot say menu yeah so I can I can Define it with icons dot menu a simple page a simple start page that I have created now with this let us go back to our main dot dot and let's clean up something first of all we do not need this main home page at all I can get rid of the main home page and I am simply left with this main function where I am running the application my app and this is my app and in this all I need to do is I need to maybe change this title to tube player let's put tube player this is the application title and the theme I'm going to use let's simplify this I'm going to use dark theme so I'll say theme data dot dark and then the home page that we have is is our start page so this is our start page that we created and you notice the moment I I add start page it imported this file start page from here so now it is looking much much simpler for me so let me actually go ahead and run this now so let me run this in iOS simulator let's make it smaller so you can see it is launching it is actually compiling this doing an xcode build in the background and it is going to launch the application yeah so now the application is running it is launching and here you go you can see the theme or the the layout the fonts Everything Has Changed we defined an app bar with a menu icon if I go back to my start page you can see this was the app bar that we defined with the title tube player and the style is kph header style let me actually do something and and show you because flutter has True Hot reload and hot restart something that dotted Maui is still struggling with so and this is where I can make changes so instead of saying tube player let me just type S at the end and let me save it you see immediately it gets reflected over here I can save this maybe this text I think kale medium light medium is too much perhaps I should use a k regular light text with the size 16 save this and you can see it is coming over here uh one of and okay I'll come to this one of the things you will notice it is showing you this debug flag that currently I'm running this application in debug mode so let me go back to my main dot dot and what I am going to do in my material app the very first thing I am going to say is disable debug debug show rainbow mode Banner is false so let me save this and now at least this one is this annoying debug flag is gone so right now you can see the start page content will come here is showing up at the top left obviously this is how it is so what I can do is I can actually go ahead and I can make it centered so let me just say wrap with center and all it is doing so this is as good as saying in dotnet Maui that in your text you are saying horizontal options is Center and vertical options is Center all I have done is I've just wrapped it with center and let me just save it and see what happens the moment I save it goes over here in the center so that this is how easy it is to build this application now one of the things that you might be doing uh though I'm running this on iOS so it is not it does not matter over here because in iOS the the application sorry the status bar in iOS is always transparent but in Android if some of you decide to run this in Android you will notice that the status bar at the top is going to come with the slightly different accent color to fix that all you need to do in your main dot dot file you just need to add let me bring in the server libraries all you need to do is just say system Chrome dot set system UI overlay style and then give it a style where you say that my status bar color is transparent and my status bar icon brightness is dark so on iO on Android it will also look exactly the same and it will this status bar will become transparent so let me stop this for now okay so let us do or let us start doing something practical for now let me start building this start page dot xaml dot dot file definitely we have got a text over here which is simply displaying start page content will show here let me actually run this so while it is running we can make life changes to this now one of the things you will notice I created a folder over here called view controls this is where I said I'll be putting some reusable controls if you follow this particular tutorial in Dot and Maui or if you follow look at the code you will notice every time when I'm loading a page I'm showing a nice indicator a UI indicator a spinning spinning arrow that something is loading up or if there is an error it will show up with an error image and the actual description of the error so let's actually go ahead and let's start building that let me close some of the unnecessary files even main dot dot we do not need we only need to work with start page dot dot file so let us build let us try to build that reusable control which is for the error indicator but before I build it as a reusable control let me do it over here and show you how it looks like so a set of text I'm not going to have a text over here instead I am going to build a column so column is you can consider column as a top-down uh set of rows so one row on top of the other so you have a column and this column actually has a property called children so you can Define different children for this column so I have a column called you know I have multiple children and what am I going to put as my children in this column so I can put it let us say I put in an image so I can say image dot asset so the image is going to come from my assets and what is the image you remember we put it over here assets slash Images slash error.png so I'm going to specify this over here asset slash Images slash error Dot PNG so let me save this and you see automatically this image has started appearing over here okay what if I want to give it uh different size what if what if I want to make it bigger or smaller I can actually wrap this this sorry this image I can wrap this in a sized box so it is put over here and then I can specify let me put the width and height of say 64. so I'll give it a width of 64 and a height of 64. let me save it is the same as of now let's try to make it 128 [Music] apparently I think I may need to to hot restart it so I'm giving it an image what is the second thing I want to put so the second thing I want to put is is a text so maybe I want to put oh right and I'm going to use the style for this as K medium light text 18 so you can see it is now showing over here but they are very very close I want to give some spacing in between so I can simply do another sized box over here and this time around I can say the height is maybe 32. I want to separate it by 32 pixels so you can see it is separated by 30 32 pixels now after this I can add another text box and here I can say some text which is some error message will appear here please contact support team and some other long text message right so you see over here so this text is displayed over here excuse me the very first thing I want to do is I want to style it so I want to give it a style of sorry after this and my style is equal to K light or k regular light text 14 save this and again I need to put in some space in between so I can put in a size box and put a height off 12 pixels over here sorry Ctrl s save so it is displaying this over here but one of the things you notice that it is not first of all it is going to the edges I want it to be Within uh within the bounds within certain bounds maybe I want to apply some padding to this so the way we can apply the padding is on my uh this whole body itself let's say in the center I can go ahead and I can say wrap with the padding widget and then I can specify the padding so I'm I can say pad it with maybe 36 pixels on all all sides so you can see right now it is padded with 36 pixels one thing that you notice this text is not centered so we can Center this text over here as well we can say we can come to this and we can say text align is equal to texture line Dot Center and let me save this and now everything is looking centered over here now one of the things you will notice it is not itself coming in Center because by default column takes up the the whole width the the whole height of the screen so the reason it is happening is because the column is taking up the whole height of the screen so to fix this the way we should do this is in the column I need to specify that the main axis size is the minimum size that it needs so if I just say that it needs the minimum size required to fit this area or this content now if I save now it is going to be centered on the screen properly maybe this 32 is a lot perhaps we can reduce it to 24. yes 24 looks a bit better so this is how we have declared or we have defined this control or the body of this page but I want this to be a reusable control so this whole thing I want it to be reusable this error indicator so for that let me do something I can go over here click on this balloon and I can say extract it as a widget so the moment I say extract it as a widget I can give it a name I can call it error indicator so you can see now what it has done in in the body it has just created a new instance of this error indicator widget which is nothing but another stateless widget which it has created remember I was telling you everything is a widget in flutter world so this it has created and it has put it at the bottom ideally it should be going into its own class so let me actually cut it out so we can remove this and we can go to view controls and we can create a new file I can call it error underscore indicator dot dot file and this is where I can go ahead and I can put it and of course it is complaining that it does not have the references so let me bring in material light it is complaining that it does not know about this so I'm going to import my app styles anything else no that is good and now this is complaining this start page is complaining that I do not know where error indicator is so I can press on control Dot and I can say you know what it is defined in this so import that library now once I run this once I even if I restart the whole application you see it is coming in properly if I replace this error indicator with something else that will appear now one of the issues that we see over here at the moment is that this text that you see is hard coded this is not the text that you that should be defined ideally that text should be coming from the calling pages so what we can do for that we can go over here and we can declare it over here so I can go ahead in fact I can remove this Constructor I do not need this Constructor I can go and I can say final so final is another a keyword in in that which specifies that once a value has been assigned to this variable it cannot be changed at all so you can see I am declaring final string error text and final means that once I have declared I have defined some value I cannot change it for example the moment I say error text is equal to 1 to 3 I cannot go and change it to three four five if I want to keep changing it then I should remove this word final but in our case we will not be changing will not be mutating that's why we will specify it as final so it it cannot be changed now one thing it is still complaining over here is since it is final and another issue final is once it is defined it cannot be changed so it is complaining that it does not have a well value it must be initialized why it is complaining it must be initialized that is a null safe language I like C sharp where you declare a string and that string can be null or or can have a value you can declare a class variable a certain class variable let's say you have a class employee and then you can say employee amp that's it and you don't declare anything and then you can simply check if it is null or not in that it is a null safe language which means you have to specify whether you want to allow nulls or you don't want to allow nulls so in this particular case since we are not allowing nulls you cannot assign a null value to this you cannot say that string error text is equal to null that is not allowed if you want it to be nullable then you have to add a question mark and now you can say that my error error text is null or you can even leave it empty but this other thing it is complaining is that it must be initialized so initialized so how can we initialize so there is there are different ways either I can go and I can initialize it with something let's say is equal to some value okay either I can do it this way but we do not know what this value is that ideally should be coming in from the Constructor so I can go and I can create a Constructor for this so I can say uh error indicator create a Constructor and I can ignore this and I'm saying this is a required field error dot text and once I have this error.txt instead of hard coded value over here let me actually cut this thing out and I am going to just say error text I can just replace it with this variable over here let me save this now if I go back you will notice this thing is complaining that it is expecting error text which is required so I can pass in the error text and this is where I can put in my message and I can save this and it is running if I change it to another important error message let's say if I save this you see it is dynamically changing so now I have made this error indicator fully Dynamic so whatever is coming from our view model in future once we are doing a search or we are loading videos If there is an error we are going to tap into that error and that error we are going to pass in which this control will be responsible for showing so basically it is very so what I'm trying to say I have I've made it fully modular now the same thing I'm going to do is I'm going to create a loading indicator in a very very similar fashion so let's create a loading indicator so same concept I can do let me actually stop this and I will do it in a different way this time so okay this is complaining that is fine let's leave it over here let's come over here in the view controls let me create a new file called loading underscore indicator and and the way the reason I'm doing it just to show you the different ways it can be done one way I created it over there extracted it put it into a new file this time around I'm creating it afresh and then I'm going to use that in that particular page so let me create a stateless widget so the stateless widget is going to be called loading indicator so loading indicator I do not need The Constructor so what are we going to have so maybe one of the things is we want to show some text or or the action which we are doing let's say if you are reading or you are searching for YouTube videos on the internet you know it is going to take times you know two two seconds three seconds five seconds depending on your internet connection so you may want to put in a message saying hey wait we are loading uh you know or we are searching for your favorite videos or maybe you are going and checking the weather so maybe you want to show a spinning bar and display a text below that saying uh you know we are we are getting the weather near you something like that so in this particular case I am going to call it loading text same concept and since it is a final string it must be initialized I am going to create a Constructor for this I do not need the super dot key I can ignore this so now this error is gone and now what I'm going to do I am going to create again Center column so I'm going to create a center and inside the center I am going to create a column and in the column I'm going to have my children foreign Center child is column okay let's say let's start with column and the column will have some children okay and I'm going to wrap this in Center save this so I have within Center and same thing I will do maybe I will do a padding for this I will go ahead and I will add this with maybe 36 pixels is what we did in the previous one and for my column I am going to specify that my exercise main exercise is minimum so that it can take up all the space it needs and then what do we have in The Columns so maybe the first thing that I need to do is I need to put in let's do something uh sized box with a width of I don't know 34 or 30 two and the width of 32 and the child we are going to put for this is a circular progress indicator okay so let me save this and I'm going to go over there and I should have called this loading indicator I'm going to go to my start page and here I'm going to call my loading indicator and since it does not know what is my loading indicator I am going to include this and now let me run the application there are errors loading text is required so it is it is expecting a loading text that's why it's giving an error so this loading text can be hello we are getting weather for you so let me run this now so here you go you can see it is now showing you a nice spinning indicator so let us go back to our loading indicator and let's add some more content content to it so perhaps the next thing I need to do is after this I need to put in a text so I can say text and this time around the text will be my loading text and the style will be uh K regular light text 14 we can use so here you go hello we are getting weather for you and perhaps I can give it some space in between so I can use size box and the height I can give it 32 perhaps so now save so now there is some space over here which is which is coming up if this is too small we can make it perhaps bigger yeah this 16 seems good and same thing we can do if I go back over here this will take a time or sometime let me show it to you if I save this you see it is again not centered so I can do the same thing I can specify my text alignment to be text alignment Dot Center now this is looking good now something additional I want to show you over here is currently we are using the built-in widget in flutter to show this progress indicator this is equivalent to your activity indicator on uh on on Maui we can use a circular progress indicator or we can use a corporate Cupertino progress indicator which is the iOS version of it so Cupertino activity indicator this is this is the the iOS version again depending on the platform that we are running on we can specify because this is all dart code equivalent to C sharp you can use the ternary operator saying if the platform is IOS then show Cupertino activity indicator otherwise show uh circular progress indicator we can do whatever we want another thing I want to do just to show you the power of widgets because we are not just tied up to the widgets which are provided out of the box in flutter and by the way we have lot of them we have around if I recall correctly either I don't know 300 plus or 600 plus widgets out of the box in flutter that's a lot but still you can go and you can bring in additional uh components as well or additional widgets so you can navigate to pub.dev pub.dev is like your nuget.org where you can search for any any uh packages in this particular case I'm going to look for a package called spin kit it's a flutter spin kit package and it has a popularity of 100 percent if I go inside it will tell me you can you can see how you can add it how you can import it you know how to use some examples and then these are the different kind of animations you can see we can have different kind of animations whichever one that you like for your project you can use that I think I like this Cube grid so I'm going to I'm going to use this Cube grid so how do we make use of this so we can come over here and we can just next to this name either we can click on this copy or we can go to the installing and we can copy this code over here by the way when we hover over it and when we click it is copying the same thing for us so once this is done I can go back to my Pub spec dot yaml this is the manual way of adding any dependencies so under the dependencies I can go and I can add flutter spin kit and then I can save it and you can see it is getting the package for me and now it has extracted the package let me put everything in one line this is one way or another way to add a package is if you go to the extensions you notice that I added a new extension called Pub spec assist the advantage with Pub spec assist is I don't need to all do all of this manually I can actually do a command shift p to bring in the the vs code palette and I can say Pub spec and then it can say add update dependencies so I can type and then I can search for something so I can say spin kit press enter and then it is going to search and you see it is going to add this automatically for you for me if I go back to my not the log file if I go back to my Pub spec dot yaml since it was already there it it did not do anything if it was a newer version it would have updated the version over here so by the way what this version is saying is that use current current version is 5.1.0 so use any version as long as this first character is five the moment it becomes version 6. don't do so basically it will go it will automatically keep on upgrading from 5.9.9 but it will never upgrade to 6.0.0 and what I have understood of flutter so far is that there is some sort of assurance from the community or some guidelines from flutter itself that you whenever there is a breaking change you have to update the major version or if even if within within minor versions if you are making changes then when you when you specify the the the procedure or you you you put this where is my hat file copy this so I can put this over here so in this case it will go from Five Point one point zero one point one one point two one point three up to 1.9 it will never go to 5.2 so this is some sort of understanding that they have so this is one way you can add packages I I prefer to do it manually because it is not too much of of a hassle so once I have done this instead of this uh spin kit sorry as the circular progress I can actually remove this whole thing and now I can say I can bring in spin kit Cube grid I want it and this would automatically add this spin kit flutter for me these are unused packages we can remove them and what do we specify in this pin kit we can specify the color that we want for this maybe light color for this and we want uh the size to be 32 now if I run the run the project again let me minimize this yeah so now you can see it is showing a much nicer animated icon or a loading indicator rather than a spinning bar a spinning Circle that we saw earlier so that's it for part one stay tuned in part two we will start developing on the YouTube apis we will fetch the data using YouTube apis and display it on our screens by the way if you like this video and you want to see more and more please consider subscribing to this channel I'll be posting videos on flutter building practical applications on regular basis see you all

Channel: Naweed Akram

Views: 2,030

Keywords: Flutter, Dart, #BeyondMonkeys, Youtube Clone, Mobile Application Development, Flutter Tutorial, Flutter App, Real-world Flutter app, Flutter MVVM, MVVM with Flutter, #FlutterJourney, Flutter Journey, #Flutter_Journey

Id: KerOXftN1f8

Length: 76min 9sec (4569 seconds)

Published: Mon Dec 26 2022