Flutter Dimple

Yes. Hello. So I'm a Flutter engineer with having more than 6 years of experience in overall. I started my journey with Android development as a native developer. I was using Kotlik back then. And my first application was, uh, developing a hospital management system. And then as my company acquired, I had shifted to Flutter development. And, uh, since Flutter, I have worked there for, like, more than four and a half years. I worked with medium medium scale applications to higher level complicated applications as well. Uh, some of the domains I can mention is, like, social media domain, lifestyle, and, uh, home care domain and all. I have worked with b to b and b to c applications as well and have, uh, perform cycles on features like billing, uh, notifying, and purchasing, etcetera. My recent project was a stock marketing application for US Securities. Uh, uh, if you do some stock exchange mediums, uh, for India. So we have developed an application for them. And, uh, yes, it has the technical features like having more than 1,000 screens in that. We have, uh, 4 or 5 back end, uh, major things to implement that are coming from different different domains and APIs so that we have managed, uh, in application as a state management with the TDD architecture very well. And we can say that it is performing, uh, well in the market. And, uh, its its user base is coming, like, more than 1 likes, uh, users. So, yeah, it can be, uh, with the great level of complexity and good scalable application as well. Uh, Yeah. So that was about me. And, uh, other than that, uh, my hobbies are, like, traveling and, uh, walking on beach and, uh, visiting, uh, hidden gems often. So that's about me. Thanks.

Yes. So I can follow some things. We can, uh, mainly focus on network calls, like, uh, caching the data wherever is required, pagination, chunking, and, uh, data compression. And, uh, more than that, we can utilize data format. And optimizing image loading is, uh, mandatory when we are loading the list that is having image operations and all. Uh, so let's focus on the first module. Uh, like, there is a cash management. For that, uh, implementation, uh, mechanism to store frequently, uh, like, uh, to use frequently accessed data locally on the device. And, uh, so we can reduce the redundant network request. And that way, we can improve responsiveness of, uh, the features that, uh, user is, uh, like, cannot totally reliable on the connection, um, that can be loaded with cache and all. So we are having this package in, uh, plugin library, Flutter cache manager. I have used it later. I will go with that for this particular process as well. So I can send the cash in case, expiry time, and the strategies for handling state data. Uh, next, uh, major thing I need to focus on there is pagination and chunking. So if you are dealing with very large database, then we can have collaboration with the API developer, and we can get data by pages. So that can be, uh, useful while reducing initial page loading time and where our performance is improved and lazy loading lazy loading is possible as well. So, yeah, that can be, uh, helpful for handling this large payload payload. Next can be data compression. So we can use the compression techniques available for Flutter. So we can reduce the payload size that we are transmitting over the network. So I can think of, uh, 1 or 2 libraries are there, like, uh, HTTP auth and HTTP interceptor that it can, uh, help us to compress the data. And, uh, we can have a good trade off between the API and our user interface. Um, other than that, we are, like, uh, we need to optimize the large images. For that, I know this library that is called the cache network image so that we can compress the images and the image as well by using other techniques. So that way, we can be we can optimize our data, and, uh, we can, uh, reduce the network request as well. So, yeah, this is my overall approach for optimizing Flutter app's, uh, network request when dealing with the large payload payload in complex level of application. Yeah.

Mhmm. Yeah. Uh, let's see that having, uh, this experience by by building in many applications, I have, uh, I have observed these things that can cause bottlenecks in flutter application. Like, it may crash the application or reduce the performance or user gets stuck on a screen or something. Uh, and, uh, these bottlenecks are unnecessary widget rebates. Uh, while we are designing the Flutter applications UI, we can see that the the build method of the Flutter is running, uh, 60 frames per second. So if we are not using constant keywords or some proper inherited widgets provider. And, uh, there is 1, uh, property that should rebuild method is there. So if we are not utilizing these properly, then, uh, we can see unnecessary widget rebuilds in our code, and it may affect the performance. If there is some infinite list also, then it may get stuck and code can be done in infinite state. So that way user is getting stuck on some screen, and it may also like, sometimes it is crashing the application as well, uh, like, for building the UI wrong way. Other than that, let's come to network part. If we are not, uh, calling the network calls if it in like, efficiently, then we may face some problem when we are fetching some large amount of data. So for that, we can use Flutter cache manager. That is some third party API, and we can, uh, install it in our popsicle uh, of our pubspec file. And other than that, we can, uh, use the HD, uh, like, uh, network management strategies for with using HTTP auth and HTTP interceptor. Other than that, we can use the profiling, uh, tab that is in Flutter Dev Tools, and that is giving us the janks that are happening are in our UI while scrolling through the list or some big complex screen or some some complex need network calls are happening, like, subsequently towards the network calls. Or, uh, there is some big complex mathematical equation to be calculated. So that way, uh, there's there could be some bottlenecks. Yeah. But those all are preventable if we are following all the good practices of data development, and we are following the principles. Yeah. So it's about, uh, resolving bottlenecks and preventing them.

Yes. Uh, so there can be some cases when we need to, uh, handle our synchronous data flow, and, uh, we need to call the APIs in asynchronous manner. So as we know that the cutting block is as excelling at managing asynchronous data, And, uh, it provides the clear separation of concerns between UI, like, uh, we have this presentation layer in TVD architecture, and we have this business logic layer in block. Uh, that block layer in business logic is there. So, uh, how can we do it? Like, we can follow some typical steps that are given in the documentation of block. Uh, let's, uh, say that we are having this event that is calling us in Jonas operation. So we can put, uh, on tap in the widgets, and, uh, that event can be dispatched from that events step, and we can call the relevant block. Like, the relevant block is matching that event to the state. Uh, Yeah. So second step can be block is processing the events. Uh, we are triggering this event of asynchronous call, and it will be, uh, mapping this that event to the state. Now we have to perform some operation that we need to do, and that and then we can, uh, emit the state that is relevant. Like, some, uh, if it is not successful, then we can, uh, emit the error state. Or else, if it is successful, then we can give the relevant data that has been requested. Uh, and, uh, after that, we are, like, using the which is given by block package that are block consumer, block provider. And that way, we are updating our UI based on the state that we have received from the, uh, block itself while we were, uh, emit emitting the state and triggering the events. So these are the key concepts to be used in our block applications, our synchronous data flow. So, uh, let me provide it, like, we can use events. Events can be triggered by widget, and then it is going to block block is mapping the event. Next, we are emitting some state that is relevant failure or success, and then we are listening that, uh, state and updating our UI as our our user's request or widget click. Yeah. So that was about handling asynchronous data flow in Flutter application with Flutterblock.

Yeah. So Flutter is, uh, giving us this opportunity, uh, like, this facility to adapt on multiple screens. As we know that Flutter is, uh, uh, supporting multiple platforms like, uh, uh, Google Chrome, like web development, both mobile platforms, iOS and Android, uh, as well as Ubuntu, uh, Linux, and, uh, Windows application, Mac Mac application as well. So it is mandatory that our UI adapts to the screen. As we know that all the different let's take an example that Android and, uh, iOS. Both platforms has the fab button, uh, floating action button. In both, they have different properties as iOS is following their own, um, uh, design facilities and all. And, uh, our Android is following its material design. So that way, we need to adapt to the screen and design as well. Whenever we are listing some, uh, using some UI widgets that are tile or something, then it should follow the design, uh, the material strategies of that specific platforms. Uh, so for that, we are having this, uh, property. Like, we are using list tile. Then we can build it with the constructor that is list tile dot adaptive, and then we can, uh, move it further. Other than that, we can, uh, leverage the facility of responsive widgets. Uh, we are having row, column, stack, uh, and other than that flex, red, grid view, uh, all things are there. Flexible widget, expandable widget is there. And, uh, if we need to check the size of the screen and all, then we can use media query, uh, that is inherited widget given by Flutter itself. We can determine the screen's width, height, and that way we can move further with our designs. Uh, and, uh, we can use expanded flexible. We can give flex property to them. And that way, our UI can be, uh, adapted to, like, responsive to different sizes of screens. I we are building, uh, forcing single code base. We are building for web and mobile as well. Then we can, uh, use breakpoints that are specific to screen width or the sizes. So that way, if we can see that, uh, if you're having menu in web application, it is laid out in a horizontal manner as per the web applications requirement. And when we are coming to the mobile application, then we are having this hamburger menu with 3 lines, and then we can click on it. So for adapting this design, we can use a big point. If screen is getting lesser than 4 20 pixels, then let's say that we are showing b design. It is bigger than that we are showing a design. So that way, Other than that, like, uh, we are having relatively out in Android system. We have a layout builder and dynamic, uh, for creating dynamic layouts in our flutter application. Uh, so it is, uh, providing us constraints, uh, like available space and size, uh, height with constraint dot, uh, max width we can get and all. And with that, we can build our UI. So, yeah, these are the widgets given by Flutter only. And, uh, if we are not going with these native widgets from Flutter, we can go with the package that is Flutter's screen utility. It is giving us some, uh, easy things to do. Yeah. So that was about, uh, having, uh, multiples, screen sizes and orientation adapting to them.

Yes. Uh, sure. So there are different approaches. Uh, we can use provider that is used with change notifier or report that is also approachable. Benefits of using provider is, like, uh, it is, uh, well documented and easy to learn for the developers. And it is offering us simplicity and, uh, like, good balance of flexibility as well. And, uh, change the notifier. I can see this. That can be the straightforward way forward way to manage, uh, state and notifying the changes to the widgets and all. And the is also there. It is inspired by provider only, and it is also offering us some more concise and streamlined syntax for the state management. And, uh, like, if you need to integrate local, uh, persistence, uh, solutions like shared reference or high, that can also be, like, done with the Riverport and provider. Uh, disadvantages of using this approach, I can tell that, uh, it can become very complex or hard to handle for large level of application if it is the complex it is having complex level state management on. And, also, we need to implement a lot of boilerplate code. So it takes a little more time at the development side. Uh, my favorite one, it is block. Uh, I can say block is my favorite approach for, like, using this interaction of data patching and local file systems. If we are having block, then this will be the advantages. Like, it is having one directional data flow. Uh, so we can say that it is the predictable and testable code. Uh, if we are using some complex level of state management, then it is really well suited. And, uh, as you can, uh, like, as we know, it is having asynchronous operating operations and all. And, uh, it can handle integration, uh, easily. Uh, and, uh, we can say that it's having a, uh, let's say that, uh, disadvantage is having a steeper learning curve compressed to compared to provider. You will have to get, uh, like, fond of that, and then it can be easier. And, uh, if we are using this approach for, like, large very small level of application, then it can be a overkill for that. So we can go for medium scale and large scale level application. And if, let's say, uh, and if we need to choose the right approach, then we have to focus on these core modules of the, uh, application. That is if we are having complex level of module or not, uh, application or not, if our team is knowing you that or not, or more than that, when our application is going on a bigger level, it can be scalable and it can go, uh, globe stage or not. So that we can do. And, uh, these local persistence and testing can be done. Uh, and this is way this is the way we can we can evaluate projects, the specific needs and team's preference, and then we can select the better and best way.

Yes. So I can see that here there is a possibility that there can be 3 states for general applications. 1st, when we are loading data, whether it is in lower initial state or not, then there there will be a state record like a state loading or something that we can mark it as well. Uh, if we are then we need to check whether it is successful or some error. Uh, so 3 states are there. Uh, loading state is a loading state. Another will be is successful state. And then also we can check whether there is some failure or not. So these can be some, uh, states that can be emitted in order.

Yeah. So while we are integrating third party libraries, uh, that are available on PubDev package, Then, uh, these are the things that I, uh, keep in mind and also, uh, like, instruct my teammates to keep in mind and check. Like, having these check will be beneficial. So first, uh, we need to evaluate the library's reputation. And, uh, we can also for that, we can check where it is being originated, who is the writer or developer for that. And, also, we can check, uh, whether this is having, like, a good documentation and code also. It should be if it is open source, then we can check the code, uh, by going from checking one method if it's, uh, working well or not, uh, so that we can do. And, also, one thing is, uh, good to check that it is having a good version history. Most libraries, uh, like, some libraries are available on available on update that are, uh, not updated since 2 or 3 years. So if you are using that sort of library, then, eventually, we'll get in trouble because Flutter is keeping, uh, the key Flutter keeps releasing the updates. And if it is getting, uh, deprecated, some methods used by loads for party library are getting deprecated, and we can get into trouble in our released application as well. And, uh, if we can, uh, also, there should be data exposure from our side should be really minimized. So if we can see that, uh, we are using Flutter Secure Storage to store sensitive data, like accessing token and encryptions keys and all. So these should be platform specific, uh, storage mechanism. Like, in ours, it should be keychain, key store, uh, or and in Android, it should be key store. So our data is not going anywhere I outside, and we are, like, uh, having good trust on that. Other than that, it we should scrutinize the network request and data transition. So if it is having, uh, all h t b methods, uh, h t b s methods are should be there. So it can be more secure some secure and trustable. And, also, we can inspect the format that of the data that is being sent for sent or received in as well. Uh, so that way we can check, uh, another other than that, if it is having proper permission handling, if it if there is some third party library that is using camera and not asking for its some permission, then we, as a developer, need to handle it so that we can see. And, also, uh, as I said, most, uh, important thing is that it is staying updated with the Flutter, all the Flutter updates. And if it is having some vulnerabilities, then they they are being monitored by the writer of the, uh, plugin, and that can be done properly. So we don't get into any trouble while our application is ready to release or has to release. So thanks.

Yeah. So when we are building the application for release final release, it is known that app size should be very less, and our launch time should be, like, uh, less. Uh, it should be reduced, and we can improve that by using these approaches. Uh, 1st, we can do while building the application, we should do code optimization. So when we are having some unused code that that we should remove that, we should remove that. And, uh, for that, we are having this command in Flutter Flutter analyze so that way we can, uh, check whether this code is, uh, not in use so we can remove it. Also, when, uh, having to find the project in our hand, we should refactor the refactor the code so we can, uh, remove the redundancies, and we can use the efficient data structure as well. In Flutter, it is important to use constant and final keywords that are required. So we are reducing the build, uh, rebuilding the widget, uh, so many times so that can be written. Important, uh, another important thing is to, uh, manage the assets properly. For images, we should optimize them. Uh, we can, uh, do it at the end time by using that command that is having Flutter image compress. So that way, we can do it at once, or else, uh, it is, uh, mandatory to keep in mind since the start of the project project and using mostly SVGs and web p files for our icons and vectors. So it is really helpful for reducing our, uh, application size and launch time improvement. We can, uh, use compressed image and good resolution image, but not having the additional data. Uh, we can break down our code base into smaller modules, like, uh, breaking into small parts and, uh, using the splitting of the Flutter application. And, uh, also, we can use that, uh, Flutter modular package that is, uh, used for Flutter's, uh, code splitting functionalities. Other than that, uh, we can reduce the, uh, use of dependencies. If we are having some feature that can be developed, uh, natively or can be having a smaller code base, then we cannot use the 3rd party application. Go ahead with that. Other than that, we can check if it is if our application size is too big, then, uh, we can use this specific additional argument in our build apk command. Uh, we can use split per DBI, so that can be done. When we are build building the app bundle, then we can use, uh, Flutter build app bundle for iOS, and that does split per API that can be done with Android. And, uh, other than that, we can test on different devices whether it is running, uh, proper or not. And also, we can implement the CICD pipeline with and other tools, so our launch time of application can be improved.

Yeah. So I probably cannot remember the name of that application, but this particular application was built, uh, for the global Flutter Development Summit. And, uh, they have created this application that was having some registration of the coming candidate and, uh, further things that, uh, all things that we need for managing the event of clutters that are happening eventually. So they were having really good, uh, animations. They were, uh, coded by really at simplest level. There was no such complexity. And, uh, if, uh, I was to develop that application by myself, then I was on, like, uh, my mid level of career, then there could be some things that I didn't know. And I have learned tools from them, like, beliefs, interests, and animations, working in the flow, and having very good architecture there. If you are if you do need some complex level of architecture like TDD and all, if you are having mid scale application, then all we can always go with very good architecture. The state management of that application was beautiful that I have learned. And, also, at that time, they implemented, uh, some, uh, little game like feature there so that I have learned that, uh, there, uh, there should be something that is entertaining the user. And the intuitive user flow was the best. So at development side, I learned the state management and data management. And, uh, at the user side, I learned some intuitive flows that user can go with. It doesn't, uh, user doesn't need to think a lot about, like, what should I do and all. It, uh, feels like, uh, let me go there and check this feature and all. So that was, uh, pretty impressive. And animations were pretty impressive that I have learned. And, uh, other than that, I also keep checking other open source projects that are available on kit, and I keep learning from them, uh, whenever I need to require some, uh, develop some, uh, feature or not. So there I see, and I, uh, don't remember particular names or authors of them. But, yeah, I know the code and flows so that I, uh, like to implement in my application. So that was all. Thanks.

Yeah. Sure. So for the performance optimization, first thing is to use suitable architecture, and that should be very proper. And it should be done from the scratch. Like, since the first time we are building the application, it should be done properly. And after analyzing the requirement of our project, we should choose a very, uh, appropriate architecture that is optimized. We should go with the perfect state management technique that can be block or provided depending on the, uh, complexity of our application. Other than that, we should, uh, like, not reveal the widgets that are not required. And if we are having some complex level of UI to develop, then, uh, then we can, like, uh, use the proper widgets. Like, where row is required, use row, and, uh, use stack as the, like, as the less time as possible and all. And, uh, also, uh, it is important to use stateless widgets over stateful widget. Uh, we know that we will often require stateful widget, uh, in the application. But if it is, like, avoidable, then avoid it and use the state stateless widget. And, uh, do not call, uh, set state method, uh, a lot. Uh, only when it is required, we should call it. Uh, this was the UI part, but we should also focus on, uh, data handling by using busy loading, caching, and, uh, the data structures should be efficient so our code can be optimized and all. Uh, when we are using list views and grid views, it can give us a really good performance other than while or overusing column and rows and, uh, like, scrollable items and all. Uh, other than that, uh, there's there are some things that we need to reduce, like opacity and clipping that as these are expensive operations. So we should use them mindfully. And, uh, also, when, uh, we are releasing the application, profile screening that that is available in the dental of of Shutter. So that way we can, uh, like, identify the bottlenecks of our application. Also, we should use the latest version, so we don't we are not using any replicated, uh, methods or properties of the projects. And, uh, when we are, uh, having this, uh, launch, uh, application in, uh, less size, then it will be running faster. So that, uh, we should keep in mind. Yeah. So there is about performance optimizing optimization techniques in our application.