Google celebrated Flutter day on June 25th, a day for encouraging developers to try out their UI toolkit. Flutter is one of the most widely used open source frameworks based on Dart for cross platform development using a single codebase. The highlight of this being that the applications are developed using native compiled and not a simple JS bridge or WebVIew as seen in many other cross platform development tools. When developing mobile applications, most commonly it is a major headache for most developers to render dynamic lists in mobile applications, as it may result in significant performance losses if not handled properly.<\/p>\n
<\/p>\n
Flutter already has provisions to manage large lists efficiently in memory by using the ListView widget. A straightforward approach would be to fetch all the data required to render the list and let the ListView handle the rest so that the resource utilization is kept in check. The lists still might be large when fetched from an external database and therefore result in large initial load times and excessive bandwidth utilization. So how should we tackle such an issue?<\/p>\n
Lazy loading has been around for almost all major web applications. Basically, we load a minimal set of data initially to an empty list and append the next set of data to the list when required. This can be easily implemented by identifying whether the user has reached the end of the list and then fetching the next set accordingly. To identify whether the user has scrolled to the end of the list, we can initialize a ScrollController _scrollController which can listen to the event when the user reaches the end of the list with comparing the current position _scrollController.position.pixels with that of maximum scroll extent\u00a0 _scrollController.position.maxScrollExtent.<\/p>\n
<\/p>\n
Do keep in mind that the ScrollController will work in the background even if the user navigates away from the page and hence there are possibilities of memory leak if they aren\u2019t cleared after use.<\/p>\n
The _fetchData() function will get the API response and push the results to the albums<\/p>\n
<\/p>\n
List. Each time a successful fetch occurs, we set the state using the setState() function, which in turn re-renders the list to show the newly fetched items. The API used here is a placeholder made available by jsonplaceholder.typicode.com.<\/p>\n
<\/p>\n
The setState() function is actually the same as that of React\/React Native. It simply notifies the widget that there are some changes in the variable states and hence UI needs to be re-rendered.<\/p>\n
<\/p>\n
<\/p>\n
String apiUrl = \"https:\/\/jsonplaceholder.typicode.com\/albums\/1\/photos\";\n int pageNo = 1;\n ScrollController _scrollController = ScrollController();\n bool isLoading = false;\n List albums = List();\n \n void _fetchData() async {\n if (!isLoading) {\n setState(() {\n isLoading = true;\n });\n try {\n final response = await http.get(apiUrl);\n if (response.statusCode == 200) {\n List albumList = List();\n var resultBody;\n pageNo =\n (pageNo > 100) ? 1 : pageNo++; \/\/ resetting and incrementing page\n apiUrl = \"https:\/\/jsonplaceholder.typicode.com\/albums\/$pageNo\/photos\";\n \n resultBody = jsonDecode(response.body);\n for (int i = 0; i < resultBody.length; i++) {\n albumList.add(resultBody[i]);\n }\n setState(() {\n isLoading = false;\n albums.addAll(albumList);\n });\n } else {\n setState(() {\n isLoading = false;\n });\n }\n } catch (_) {\n setState(() {\n isLoading = false;\n });\n }\n }\n<\/code><\/pre>\n
<\/p>\n
Using ListView.builder()<\/strong><\/p>\n
<\/p>\n
ListView.builder() is a named constructor which can be used to generate dynamic content. Instead of returning a static widget containing all the list items, the Listview.builder() function will create the ListView items as specified in the itemBuilder function and inflate them whenever they are required to be displayed on the screen. Thus the\u00a0 ListView.builder() effectively manages memory when the list gets large. Here the _buildProgressIndicator()is used to indicate that the app is making a network call.\u00a0<\/p>\n
The output for a list with progress widget will be as shown below.<\/p>\n
<\/p>\n
<\/p>\n
\n<\/figure>\n<\/div>\n
<\/p>\n
Conclusion<\/strong><\/p>\n
<\/p>\n
Flutter is an incredible framework with lots of options for customization. Understanding Flutter widgets properly will allow you to quickly prototype a beautiful user interface which greatly reduces time for development and allows developers to focus on more important aspects of the application. Most importantly, seasoned developers can adopt various approaches for managing complex states in a way that they would prefer rather than following a set standard.<\/p>\n
<\/p>\n
In the application built, it can be observed that most of the complexity involved in building a paginated list is easier to handle in Flutter. The implementation shown is a general one and can be modified to use for other use cases or real time databases like Firebase.\u00a0<\/p>\n
![\"\"](\"https:\/\/lh4.googleusercontent.com\/4GVr4zMTZnZEqDqnWr4IKzbFriSMYoLDxglUdmiFEgJtyh-AakPzt1JorRRjKRPxInLdsTcn39vnogiKPmchojfwJPmKjF4gBTGdja8wTE8l5lzAvi5xG-cWSbGsrEyB7JK4mf5vcckjvdsvXg\")
<\/figure>\n<\/div>\n