I’ve recently started doing research into the Flutter framework to learn mobile development. To give you a little background about myself, I’m a React Native developer for Tyrannosaurus Tech. I’m also a self taught developer with three kids and a wife. I have been developing in React Native for about two years now. Flutter developers may be asking why I decided to go React Native instead of Flutter and my answer is because I knew Javascript. I was more comfortable starting with something I knew. The fact that I had to learn Dart to start using Flutter deterred me at first, but I’ve learned that there’s more growth in struggle. So let me get to the subject at hand and build a list in React Native and Flutter.
I will try to break down what I’ve learned from the two languages the best I can. I’m hoping if you’re new to either framework that you can walk away effectively knowing how to display a list but keep in mind that I’m relatively new to Flutter myself. I’m also a firm believer in the value of time and will try my best to deliver as much value as possible to you in this post.
We will begin with the apps from scratch. Here’s a link to the Flutter repo and the React Native repo that you can clone so that you can have the finalized code. I want to start with the easiest way to implement a list in both. Then iterate to a more efficient way to do it.
Mapping A List In Flutter
You’re up first Flutter! I begin by creating a new Flutter project and remove all the boilerplate. Then add the code below.
As you can see I created a List of type strings of some very famous people in technology. If you’re unfamiliar with these people I’d encourage you to research them. To display this list in Flutter we are going to need a widget that can return multiple widgets. You can use the Column or Row widget but we are going to use Column so our list will flow vertically. The Column widget has a property called children that returns a list of widgets. There we will map through our list of people and return each person in a Text widget. Don’t forget the toList method on the end of the map function because without it the map function returns an Iterable and we need a List type. Once you run this code you will see our list but notice a problem with viewing all the items. This is because doing a list this way doesn’t come with the ability to scroll and Flutter gives a warning letting you know. We will fix this but now its React Native’s turn.
Mapping Array In React Native
If you look at the code in React Native we’re basically doing the same thing but in React Native we don’t need a certain widget or shall I say component (React slang) to return the array of people. We just map through the array and return each person in a Text component. Same way we would do it if this was a React web app but this is mobile and we have a scroll issue just like Flutter. I’ll go ahead and eliminate the SUSPENCE (inside React joke) and show you how to implement a list the right way.
React Native’s FlatList Component
After taking a good look at the code let me explain what’s going on. React Native has a component called FlatList to render a list. In React Native earlier days you would use a ListView but it’s deprecated now. As you can see with the FlatList we have some props. The first one is data and data is the prop that takes our people array. The data prop needs an array value. The next prop is renderItem that will return a function that returns our component. The last prop keyExtractor we need for setting a key on each component in the list. This helps React Native keep track of item reordering by setting a unique key on each item. Now if you run expo and you will see that your list is now scrollable, but before I move on to fixing the issue on Flutter let me say that the first way we displayed a list in React Native could have worked if we just changed the View component into a ScrollView component. But, what if we had thousands of items to be listed? This is why FlatList is better because it’s built for performance. Instead of rendering all one thousand items it renders the items viewable on the screen and dynamically renders items as you scroll. Now on to Flutter!!
Flutter’s Default ListView
With Flutter we have the ListView widget. The ListView is the default constructor and Flutter has three other constructors. The other three are builder, custom and separated. I’m only going to go over the default and builder constructors. Lets go over the code for the default ListView. The ListView has a children property that takes a list of widgets and there we will pass our list of people. That will return our Container widget with its Text widget. Keep in mind that the ListView should be used on a small list. Because just like React Native Flutter has the ListView.builder that is more performant.
Flutter’s ListView.builder
The ListView.builder syntax is different from the default ListView but notice how it reminds you of React Natives FlatList. We have an itemCount property and itemBuilder property. The itemCount takes the length of the list and itemBuilder is a function with a context and index parameters. We will no longer map through our people list and return our Container and Text widget. But, how does the Text widget know which item to display? Remember that we set the length of our itemCount and in the Text widget we set the position to the people list with the index. If we set the people list to index 0 (like so people[0]) we will still get a list of nine items but with Steve Jobs as the text. This shows that the index is cycling from 0 to 8 totaling nine items which is the length of the people list. I hope I’ve clarified how to implement a list on both platforms. If you are still not quite sure on the list implementation for React Native and Flutter I’ll link you to the docs (React Native Docs, Flutter Docs)