Aditya Singh

Yes. So hi. My name is Aditya Singh, and I have 5 years of experience in the industry. Over the past 5 years, I have extensively worked with Slutter. I have been a senior software engineer in my previous company. I have led a team of junior developers. Over the past 5 years, in Flutter, I have extensively used Bloc and provider as state management tools. I have expertise in API integration using both REST APIs and GraphQL APIs. Although I very much prefer using GraphQL APIs. Then I have experience in using CodeMagic for CICD pipelines. I have experience in using Hive for offline storage and data storage in the applications. I know GitHub and GitLab for version control. And I have extensively used Firebase for both analytics and graph analytics of the mobile applications.

I would use the Chrome DevTools for debugging performance issues in the setup. So, in my previous projects, I am familiar with using the Chrome DevTools, which gives all the insights on the processes of the application. For example, if there are any leakages, memory leakages, or any kind of issues, I have used the Chrome DevTools. It also provides an inspector using which we can actually look at all the wizardry in front of us. It also gives a timeline view on what was happening in the application at what time. So, yeah, I have extensively used the Chrome DevTools. The second one I would mention is Firebase. In my previous company, we have extensively used Firebase for both Crashlytics and analytics. It has helped us in analyzing if the user is using our application, how often they are using it, and which pages they are visiting. So, that has been really helpful using Firebase. And, apart from that, the same thing in Firebase, I would say mention Crashlytics. Crashlytics was really helpful in analyzing if a page was breaking, if some events were happening. We were able to identify the events by which we were able to solve the problems. It gave us real-time crash reports and insights into non-fatal errors as well. So, yeah, all in all, I would say I have extensively used the Chrome DevTools and Firebase for improving the debugging performance issues in my Flutter applications. Thank you.

Architecture. Okay. So in my case, what I did was we implemented our own architecture, and that was in the first project, the settling consumer app. And the other one was the settling partner app where we used the feature-first architecture, where we specifically focused on the feature and separated the whole module under the library. And inside that library, we had the whole feature, its UIs. We separated the states, the services, and the API calls required for that. Now for implementing my strategy, it was first discussing it with the team. If there was a new feature coming, we would first discuss it with the team. We would discuss the requirements. We would understand the requirements. We would identify what the user might require. And then after that, we would go with the design and architecture. So I think separating the concerns is the most important part, where we have to describe to the UI/UX as well upon our requirements on what the user might expect and might not expect. So that would be the other step. And then as programmers, we would define the interfaces and the classes that we need for that particular feature. Now, in the architectures, services, and network layers are very much important. So we could implement the APIs. We could call the data on the back end for that particular feature. So that would also be included in that particular folder for that feature. And the presentation layer comes up under the UI. So we would definitely use Sigma, given by our UI/UX, and we would implement that using Flutter. And I have also used several state management, such as BLoC and Provider, and integrated BLoC with the UI. So it would give the resultant or the required state on a particular event. And most importantly, I would suggest testing. So in my case, if I talk about clean architecture as well, so we had separate unit tests for each feature. For example, we had a filter page where we used to ask the user what features or what kind of properties the user would like to see. So we would pick that particular filter page as a feature, and we would test it under the unit testing. And we would test it manually as well. So that is all in all the implementation and my strategy that I had used in my company and under my team. And the last one would be reviewing the tests and then finally releasing it to production. Thank you.

When integrating with third-party libraries, my method for ensuring data security involves several key steps. To begin with, I ensure that I do not directly use the package with the UI, but instead add layers of security. If I discuss security layers, we would have, for instance, secure communication with HTTPS while fetching REST APIs. We would also give limited permission to the package if it asks for many permissions. Furthermore, we would add exception handling. If the package breaks or is upgraded and features are not working, exception handling would be implemented. Another step would be to use GraphQL. We had specific API keys stored in a separate folder under environment variables that users could not read. We would then use regular updates. If the package was being updated, we would update our code as well to ensure we were secure from vulnerabilities. Finally, we would use secure storage, such as Flutter's secure storage package, which ensures sensitive data is stored on the device and encrypted. This helps protect it from customers or any kind of threats.

How do we approach and solve a Flutter layout challenge where you adapt multiple screen sizes? Okay. So, in my experience, we have used Flutter layout challenges for multiple screen sizes and orientations. Okay. So first of all, I would talk about the responsive design. Now Flutter has this thing called responsive design under which it provides certain widgets or features. First, the number one would be media query. Media query allows us to visit so that on the screen size changes, the visit would automatically adapt as per the screen sizes. Then the second one would be, in case, for example, let's say we used media query. Now what happens is sometimes there is a text, there is a particular text which, if the screen shrinks and the text starts to overflow. Now to counter that or to solve that problem, we used flexible and expanded features. These both are widgets responsible for controlling overflows, and they are usually wrapped under row and column visits. And apart from that, I have specifically in my projects previously in my past projects, have used Flutter screen utility, which gave us parameters like height and width and radius and so many other parameters. So, what it did was, it helped in the widgets to adapt with the screen sizes along with font sizes. So, what we did was, this is the package that we actually used more than media query or any other widget. This was really helpful because in our product was released both on iOS, Android, as well as desktop. So, we required multiple tests. And, also, I would mention for the tests, we had, before releasing the application, we would always test our new feature and the whole application manually by using it on multiple devices. Although we did not have physical multiple devices, what we did was, there is a package called device preview. It's a Flutter package that enables us to run our application. We can select the application, and using that, we can run the code and see what output it is giving. It works kind of as an emulator. So, that helped us a lot in understanding how the output will be shown to the user. And I think the main important layout challenges that I have faced and resolved by using these three would be the first one, Flutter screen utility, the number one. And the other one would be the responsive design under which Flutter has its own widgets like media query. And then there is a device, and then there is a device preview package that we used. So, all in all, that was it.

How do you refactor a Flutter application to improve performance and rentability using the FlutterBlox package? Okay. So if we are refactoring our application with block, so we are assuming that the application, or the code base that we have right now, is not using block at all. So what block first of all does is it separates the UI components and the business logic. That is the main task of Flutter block. Now to use that to refactor our application, what we would do is we would first separate our concerns. So for that, we discuss with the team. For example, in my team, I used to discuss it with my team upon what requirements do we have, what will be the events, and what would be the states? Now first, after separating all of it, we would start creating we would first import the Flutter block into our project. Then we defined the events and the respective states which were required for that particular feature or the whole project. We then created the block classes which actually hold all the business logic. So on some particular event, the block would apply the block logic and then it will show the resulting state on the output. Now, we would optimize the performance. So after implementing the whole block, we would then integrate it with our UI as well with data. That is how we integrate the Flutter block package in our existing project and refactoring. Now there are some features that block provides, which are the block builder and block provider. Block provider basically provides the particular block to its descendants, and the block builder is usually responsible for rebuilding the UI on a particular state change. Now, in order to improve further performance, what we could also do is we could make some services. We could add some services. For example, in my company, in my project, we used the network service, which would constantly listen to the device on which the application was being used. It would listen to what is the Internet status right now. If somehow the Internet connection was lost, we would show a snack bar showing that the Internet is not working. And if it comes back, then we would use the service to again show a green snack box telling the user that the Internet is back. We can also use GraphQL instead of REST APIs, which I have used in my previous company because GraphQL has particular fields that we can use. Instead of making a REST API call for one feature, we have to make a call, and it might be a heavy call. But in GraphQL, we can particularly and specifically pick what we need to add, what fields in the API do we need. Apart from that, I would mention caching. Caching is also very important for improving the performance for which we actually used Hype, which was very helpful for us. Once the application was loaded and the user logs in, we would use it to maintain our cache. And even if the Internet was lost, we would show the local data to the user.

I'd like to ensure that the load data event triggers in the correct state change. So, I would suggest the following strategy. We would number 1, use debuggers on the models through which the data is coming. Using those debuggers, we would analyze if the correct data is coming on each and every step in the block. We would make sure that the events we have written are correct, if the states we are throwing are correct, and if the exception is being handled or not. We would use breakpoints while developing the application in the dev environment. We would particularly look into all the states, the events, and the block logic that we have used. After completing everything, after creating blocks as well, we would use staging data to manually check and test if the data is coming correctly or not, and if the block is working correctly or not. In this case, when we're using the load data event, I would ensure its success and make sure it's working properly by using the aforementioned, including the debuggers that we use the most. Then we would use unit tests, and finally, the staging tests in which we did all the manual testings and everything.

How do you handle asynchronous data flow in a Flutter application with Flutter block? Okay. So, in Flutter block, what we used to do was mostly use asynchronous data only. So, I would go through the steps 1 by 1. Now, first of all, we would import the Flutter block in our application. After that, what we would do is create the models. Under block, we would first discuss with the team what kind of model do we need, what kind of data are we expecting from the backend, and what is required in the application in that particular feature. Once we do this, we make the models, we would then define a method for API calls, which would either call the REST API or the graph. Then we would discuss and create states and events. We would define those for what events are we going to show what steps. For example, if the user presses on login after entering his or her details, we would then trigger those states. And if the request is successful, it will successfully log in. If not, it would show an exception, and the user would have to re-log in again. That is 1 step. And then we would create the block which would contain all the logic. And using that logic, it would show that particular state that is required for the application to show. Now we would create the block class for the block implementation, which takes both block event and the block state that we have created. And it would then use both of them to create the work on that particular logic and show the expected output. Once that was done, we would connect our block to the UI. So the whole cycle would be completed from starting from importing block to making models to integrating the API with the application or with the fee with the API with the application. And after that was done, we would create events and states, and then we would make the block. And finally, we would integrate that block to the UI. So and to mention that data that we were getting would be asynchronous, and the method that I discussed about creating after creating the models would be an async function. So that async function would be responsible for getting all the asynchronous data. If there is some exception, we would handle it there only, and we would tackle it there. So that is how I would handle the asynchronous data flow in our Flutter application using the plan.

What are some of the approaches you use to minimize the app size and improve the launch time of your application? Okay. So, it's an interesting question. So, there are many approaches. One of them which I mentioned in one of the previous questions is, first of all, I would move from REST APIs to GraphQL because what GraphQL does is, it reduces the request time. So when we are using REST APIs for a particular call, let's say, what happens is the REST API will get all the fields for that particular feature. But in case of GraphQL, if we want to remove some particular fields and if we want to add some particular fields, it gives us the flexibility to do that. So, number one, I would say I would switch from REST APIs to GraphQL. That is number one. The other approach I would suggest would be using persistent storage, by which I mean Hive, which I have extensively used in that previous job. In Hive, what we do is we first initialize Hive. We then create the Hive models for which the data we need to store in our local storage. We would then run the build runner script, which generates the files and the adapters, which are required for Hive. What Hive does is it registers those adapters, and then it saves the models that we created in the boxes. So, there is a concept of boxes in Hive. What it does is it saves for a particular model. What it does is it saves that particular model in one of its boxes. So, how do we achieve it? We achieve it by opening boxes or by opening the boxes. So, once we open that box, the data will start getting loaded in that, and we would be able to use that for our local storage. And, finally, we can delete the data from disk, delete the boxes, and close the boxes from our application. That depends on user to user. For example, in our application, we wanted to remove the local data once the user logs out of the application. So, that was all about the persistent storage. Number one was caching. Number two was persistent storage. And number three, I would suggest, would be using services. And by that, I mean custom services. We extensively used a lot of custom services in our projects. For example, I myself implemented network cubit, which would closely monitor if the state of the Internet state of the device is there or not. So, let's say if the Internet was disconnected, we would directly show the snack bar that we lost the Internet connection. And using Hive from the previous step, and the caching would be achieved. So, even if we lose the Internet, the Hive will directly show the data rather than making calls again and again. So, caching is very important if you want to minimize the app size and improve the launch time. We would use solid principles and object-oriented principles a lot. We should avoid dry, which means do not repeat yourself. So, a coder should always avoid using boilerplate code. So, these are all the approaches that we have used, and I would personally use to achieve this. Thank you.

Could you suggest a strategy to enhance Flutter app, CICD pipeline, team, and Colette? Yes. Since I was the only senior Flutter developer in my previous company and I had a team under me, I had full control of the CICD pipeline. Coming to how we implemented it, we used the 3rd party application called CodeMagic. I would like to name it. It's CodeMagic. What CodeMagic does is it makes it so easy for us developers to release the CICD pipeline as it automates the whole process. The user, the developer, actually has to give the input only once about all the required fields that it would ask. So, we would give it all the inputs once, and we would give it two environments: one is for staging, and one is for production. For the CICD pipeline, what we did was we first created a staging environment. A staging environment is nothing but the API that we use for production. The staging environment did the same, except it had dummy data. We would first release our application on staging through the CodeMagic CICD pipeline. Once the application was released, we would then do manual testing of the application before actually making it to prod. So, which includes manual testing by the whole team as well as unit testing for a particular feature that we have created and released. When it comes to integration and widget testing, we actually haven't used it extensively in our projects. We were mostly dependent on unit testing as well as manual testing. After achieving all of that, code reviews as well, I was responsible for reviewing the code of my juniors, and then we would go ahead with the staging release of the CICD pipeline. Once we ensured that the application is working, the caching wasn't working properly, if no feature is breaking, if the new feature is working properly, and the previous ones are not affected by it, we would then go for the production deployment. And there is an interesting thing that we have. We had a feature flag as a service in my application where if I had to discontinue a feature for a particular while, let's say something breaks in the production. If something was breaking, what I did was I simply set the feature flag as false. What it would do is, and it was a provider by the way, which was wrapped above all the blocks that we had created. So, if I wanted to discontinue a particular feature, I would simply set that provider to false, and the whole feature would be disabled for that particular time. For example, we created a situation where we released our application in prod and something breaks. So, we would set the flag to false, and then we would fix that bug and re-release the application so the user does not have to face the breaking of the application and for that feature. Thank you.