Nitanshu Kumar

Hello, everyone. So this side, I'm from here. So, yeah, let's just start with my carrier introduction. So I am working, I've been working for 5 years in this corporate one. So, basically, I'm working in a brand enterprises private limited as a senior developer. So here, I'm responsible for working on integrating new features, solving bugs, and stabilizing apps. So, basically, I have worked on stabilizing the apps on Windows, macOS, iOS, and Android as well. So we support multiple platforms across various local platforms. Then, I do a lot of R and D here. Like, I had to integrate this live location tracking feature. So, I did R and D and implemented that. Then, I did R and D on offline execution of transactions. So, basically, I used a hybrid database, and I was just loading whatever the user was in transaction in our local database. And whenever they checked connectivity, I was making sure that whatever the data I just stored, it should go back to the API and complete the transaction. So it takes a lot of R and D and everything, which I completed. Then, I implemented many other features, like chatbot integration, and many places I have implemented the statement admin tool. Then I used to solve bugs and stabilize the app and everything. So yeah. Then, it's about this current organization. Yeah. Before this organization, I was working in TCS as a system engineer. So there, I was basically working on web applications using classic ASP, HTML, CSS, and JavaScript. So I was deployed to a client site under Punjab National Bank where I was directly reporting to the client, and then I was working for them, generating reports, and creating features for the pension scheme. And then I got the chance to lead a team of core members also. So, yeah, that's all from my side.

Yeah. Whenever we are working on any project, the documentation plays a very important role because it's not you who will be using the app. Let's say you have developed the app and in the next few months or next few years, some other developers come in. They want to check the code or there is some bug, and they want to. So they need to know what is happening. They can't just know by looking into the folder. It's like it's a hectic task if you are just looking at a code. So documentation plays a very important role where everything is mentioned, like what API is doing, what how we are integrating that API and everything. So, whenever we integrate the API, we maintain that. Like basically, what we actually do, we write the comments on the API on the top of the API. So what it looks like if any user in the future is coming to check what API to use, he can read the comments and can know easily, yeah, this API is working, these things, and maybe this can solve my problem. And then we have this HTTP package and then d package, which we use to integrate the rest API into that. And then with the API, we have models elsewhere where, like, whatever the API is returning, we have to store it somewhere in model end of which we can't directly use the API result. We have to store it in model and then use it in the UX file. So that model should also be documented like what this model is storing, what that model is storing. Like there can be a nested model. You can check if there is a user model, since the user model will have this personal information model, education model, experience model. So we have to create, let's say, if I am creating 5 models for 1 API, so everything should be documented and like what this thing is doing, what that thing is doing, and how we are fetching that data from that API and where we are restoring and how we are using. So in this way, we integrate the API, and we document each and everything so that user whenever the user comes, yeah, they can know what they can know what is this, what is the functionality, and they can go in. Thank you.

Yeah. This letter, like, when it came to this market, it has its large community support. So the large community support means there are many developers also which are developing some libraries for us either in input link or in Flutter itself, which will work in Flutter. So it plays a very important role in integrating those. So let's say you want to integrate the biometric support in Flutter. So you can't just go to the native code implementation and check each and everything, how everything is working, then you have to override the functionality as well because the native code works for the biometric support. So you have to override the dependency and everything, and then you have to use it for biometric support. But this package is about to let you provide the local or package for the biometric support. So, basically, with this local auth package, you can directly use that package and implement the biometric support for the app. So whenever the app launches, you can let's say you want the user to verify the biometric. So it's just a package which you will be implementing and then, yeah, it will work. So it makes a lot of it easy for us to implement that. Then, again, if you come to drafting, let's say, you have to display some sort of graph, paragraph, or pie chart or everything. So if you go with custom code implementation, so you have to take care of each and everything. You have to create some container, and then you have to maintain a state and you have to make sure what data is passing and how you are maintaining that custom container, which is showing some bar graph or by pie chart anything. But with the Flutter third-party library, which is supporting, let's say, with this is supporting that bar graph. So you just have to import that package. It has its own constructor. You have to pass the value in that constructor, and, yeah, it will work in a very simple way. So, actually, the third-party library makes it much more easier in Flutter. Like, you don't have to write custom code for each and everything. And I also think we also don't need to write custom code for each and every condition. Like, unless there is an extraordinary requirement, which requires some input to be handled by a standard. In those scenarios, we need to write a custom code for us. Otherwise, like, there are a vast number of third-party libraries present in the market. So we can easily utilize them, and, we just need to import and use that, and it will work. So yeah.

Whenever we are doing a network request, like with an API call, or a post call, or anything, the main thing is you have to make it asynchronous. You don't want the user to wait for something or it should block their task or anything. You want the key to do some network request and give us the data whenever it's ready. In the meantime, I can do other things. So that can only be possible with the asynchronous way of dealing with network requests. Let's say if you have a smaller payload where the API is taking a very small fraction of time, you won't get the difference. You just call the call the API and it gives the result immediately, and it doesn't feel like you've called any API. But there is when the network is dealing with a large payload. It obviously will take some time to call the API and give us some data. So in those scenarios, you have to not block the current execution. This one key, this API also runs in the background, and in the meantime, I can do other things. And whenever the data is ready, it should reflect in the UX accordingly. So asynchronous programming is used in those scenarios, which obviously optimizes the app and gives a smoother user experience to the user. Then, when you're dealing with a large payload, you have to create a DTO file for all of them. Creating a DTO file for a larger payload means it will have different models inside that. Let's say, for example, the user below. This user information will have personal, education, professional, something like that, information. So we need to create a model for each of them. We don't want to complicate the app by passing data and not knowing what we should pass. This will not happen. You should be knowing the different professional and personal models, which will handle only professional data and personal data only. And we are restoring all those data in the user model at one place. And in the API, we are passing that user payload in the network gateway. So, yeah, modularizing the model also works in optimizing the app, making the code more reusable and more readable. So these two things are there: one is asynchronous, and the other is this model. Thank you.

Yeah. So this Flutter bloc package. So what actually Flutter bloc is like, it's a state management tool. So what do we get by state management is, when an app is smaller, it's like you can create 1 or 2 pages and you can use the state and everything. You can do with those tasks. So that will be easy. But what if our app is larger where there are lots of functionality? So how we are going we can't use the state everywhere in a single UX file and maintain, and we have to call that API also and everything. So are these, like, we have this concept, like model view model, we already know in other languages. So why teach model view controller? Like, we have this model, which is not but a repository, which is giving data. This repository is getting data from some API call, and it's sorting that data in the model. Then we have this view. View is nothing but the UX that is getting shown to the user. Then we have this controller. So controller acts like a middleware between the view and the model. So what is happening, like, the controller, it's getting data from the model, sending it to the view. View is utilizing the data and showing it to the user. And let's say user is performing some actions. So what is happening? A controller is getting that event from the user, from the view, calling some API something, and then getting again the model. Like, whatever the API call feeds, it stores data in some model. So, again, getting that model and sending it to the view. So this is a concept of MVM or MVC. So, similarly, this bloc works in this way only. We have this state. A state is nothing but what UX do we want the user to be shown. Whether you want user information, personal information, we can categorize it as a state. And then we have this event. Event is what user wants to do. Like, user is clicking on some delete list item. So that we can consider as event. So that delete, we can create event and call it in the bloc. Then we have this bloc. So bloc acts like a controller here. So a bloc is maintaining the event, checking which event is getting called, performing some actions like calling API, getting data from the model, or doing some other logical operations, and then emitting state. Then whatever the state being emitted by bloc, that decides what UX we want to show, what view we want user to be shown. So that is controlled by bloc. And, yeah, it actually improves performance and maintainability. Like, in the UX file, you don't want lots of logical operations to be done. You don't want complex operations to be done in one place. You should perform some complex operation and then give the data. So that we leave it on the bloc. So the bloc performs all those operations and emits the state. So, yeah, it actually improves the code, also improves the performance, also maintains the readability of the code. Yeah. Thank you.

So, letter B, usually, what we do is we are heavily dependent on this third-party library. So everything we want to do, any feature we want to implement, we check if the library is present. Or, let's say, we are using this database, Hive or ISRA, so we are using the third-party library for that. When we are dealing with that too, so obviously, these things came to my mind: is the user's data secured or not? Like, is it not getting breached or something. So for that, one thing is, if we are restoring, if there is an API call where we are getting data from the API, then it's not a big problem. We are not storing any sort of data. So we are getting from the API and displaying, but when we are restoring in the local cache like Hive or shared buildings, it becomes necessary. Whatever the data we are storing, like a user photo or user login credentials, we need to encrypt that data. So it becomes very essential. We should be encrypting whatever the user is entering, then it should get stored somewhere in the application in some cache, like wherever the cache is getting stored. So if we are maintaining data, we make sure the data is not getting placed and some other library can't access that data.

I'm not working on this widget testing part, so I'm not sure how we're going to do that.

So whatever, like, the app we are creating, it should be responsive. Like, if we are creating, whoever the UI developer is. That's the main problem of every UI developer in this field. We have to make the UX responsive, like, whatever the screen size it suits for, whether in the web application or in the mobile application, which has different screen sizes and tabs also. And when we talk about it's also for macOS and Windows. So, this responsive design is a major concern for any UX developer. So, to adapt multiple screen sizes, we use media queries first. So what media queries do? They get context or height context key, whatever the level's height per screen for that context. And we have to use media queries to determine the height and width. What height should we take according to a ratio, let's say? We are taking the ratio of that height and width. If the screen size, like, we want to take 90%, we are not defining key. We have to take, be it equal to 90% or something. So we want 90% of the width to be taken by this container. So what we do, we create a media container, media query. It determines the size. And then, it gives us 90%. So whatever the screen, it gets displayed. So accordingly, it takes the 90% of space of that container. Then we have this flexible and expanded widget as well. So what's the difference between flexible and expanded is, like, flexible takes a minimum space. So it will expand if the data will expand. Otherwise, it will take the maximum minimum space. At expanded, whatever the app layout is, space is present, it will take those space and try to wrap all the data in that. Then we have this wrap widget also which tries to wrap the containers. So we want according to the container, we want 3 containers to be in a row, 4 or 10 or something. So they will be in a row. So these are the basics where we are taking care of the responsiveness on the UX and that is playing it to the UI.

So, yeah, minimizing the app size is key. It should, like, if the app is smaller, it will take less time to launch, and it will be faster. So, what we can do for minimizing the app size is we're making sure key data in ad sets or data files aren't stored. We're not storing many data, like images or everything. We try to get those data in from network requests. Then, we're trying to be an author using local cache, very much like a local cache. So, we use it for minimal tasks. Like, a splash screen getting started. The screen is shown to the user, but it's not shown every time. So, we store it in the local cache. So, like, very small attacks, we have to make sure key data. This should only be stored in the local cache, and not many files should be stored in the assets folder. And then, data summarizes the approach to minimize.

So, in a CICD pipeline, when we are pushing code, it should be key. It should not break the other functionality. So, integrating the Flutter CICD pipeline in source, we are not pushing some unexpected changes, or we can be more in sort of key. Best practice would be followed. So, what is happening? We have this semantics. Semantics have this level. In the CICD pipeline, we implement the testing of widgets using the semantics. It checks for the semantic level for each widget. And if any semantic level is absent, it will give some error before pushing the code to the main branch. It will give, it's not getting passed because of this reason. And with the semantics, it will also check the label. It checks whatever the widget is getting from that label is presenting that UX or not. If the label is not present, it will again create data. Then, we can integrate this. So, we can integrate some quality code also. We are not using some if a container; we are using and keeping only size and width. Flutter says, use side box instead of that. So, that improves the performance of the app as well. Then, for improving the performance also, if we are using const variable, Flutter says, make it a const variable. In this kind of quality check, we can add in the CICD pipeline. So, whenever we check, any constant value is there and constant keyword is not used or any letter warning is there which is not being addressed or any container is used where size box can be used. So, we can add those quality checks also and integrate it to the CICD pipeline. So, it will ensure that a good quality code with all the test cases is getting passed, and it is not breaking anywhere in the screen, and it works good. So, in this way, we can with the CICD pipeline, we can ensure. Thank you.

Yeah. Actually, I have not seen any open source Flutter projector. But what I like about the medium articles and other articles is that I used to read blogs. So I used to read about the best practice of letter. So this const keyword, I used to know from the medium articles. Whenever we use the const keyword, it's a constant, and it will not be recalculated at runtime. It directly uses it, which improves the performance of the app. Then, this state management, I got to learn about it when we are using, what is the benefit of using a bloc over a state. But a state reveals all the widgets at once in the widget tree. But what blocs do is, whenever a widget is getting revealed or changed, we are rebuilding that and just displaying it. So these things, I'm getting to know from the articles, or some blocs or other packages as well. I got to know that Flutter supports, like, they are supporting iOS native UX in the Flutter latest version. So this I got to know from the Flutter documentation itself. They are working on this adaptive feature scheme, like, for the dialogue box or date time picker. It looks different on Android than on iOS. They have given this adaptive approach to implement the UX. So I used to read articles like what are the best practices, how we can create a good letter project, and what's the benefit of using a library. And everything, like, many other libraries, how like, what are the other libraries also which we can use? So we use those in our app. So these things I get to know and apply it in our code. Yeah. Thank you.