Flutter - Difference Between ListView and List
Last Updated :
30 Jul, 2024
Flutter is Google’s Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter everything is towards Widgets – the blocks with which the flutter apps are built. They are structural elements that ship with a bunch of material design-specific functionalities and new widgets can be composed out of existing ones too.
ListView in Flutter
It is a type of widget used in Flutter to create a large number of items displayed on the screen one by one by making the screen scrollable. It provides various types of inbuilt methods such as BouncingscrollPhysics, and Scroll Direction. For example, when we have to display the weather of the desired location after a particular interval of time.
ListViewExample code of the above image in dart:
Dart
ListView.builder(
physics: BouncingScrollPhysics(), // Add bouncing scroll effect
scrollDirection: Axis.horizontal, // Horizontal scrolling
shrinkWrap: true, // Shrink to fit content
itemCount: hourlyData.list!.length > 6 ? 6 : hourlyData.list!.length, // Limit items to 6
itemBuilder: (BuildContext context, int index) {
var time = DateFormat.jm().format(
DateTime.fromMillisecondsSinceEpoch(
hourlyData.list![index].dt!.toInt() * 1000));
return Container(
padding: EdgeInsets.all(8),
margin: EdgeInsets.only(right: 4),
decoration: BoxDecoration(
color: theme.primaryColor,
borderRadius: BorderRadius.circular(10),
),
child: Column(children: [
"$time ".text.color(Vx.gray400).make(), // Display time
Image.asset(
"assets/weather/${hourlyData.list![index].weather![0].icon}.png"), // Display icon
"${hourlyData.list![index].main!.temp}$degree"
.text
.color(Vx.gray400)
.make(), // Display temperature
]),
);
},
)
This code starts with creating ListView and then we have defined the size of ListView, and we have itembuilder to show the time which is being shown above of every image and then another container displaying the box with padding, borderRadius, and color. The next Container we have used to display the type of image according to weather conditions.
List in Flutter
It is used for displaying static and a limited amount of content on the screen. It is a very simple and the most frequent type of widget used during Application Creation. It does not provide various methods like ListView. For example:
In this image, we have used the simple list to display only 3 things on the screen clouds, humidity, and windspeed. From the above image, it can be depicted as the screen is static and displays only limited things.
The code for the List (image) in dart is:
Dart
List.generate(3, (index) {
// List of icons corresponding to clouds, humidity, and windspeed
var iconsList = [clouds, humidity, windspeed];
// List of values for clouds, humidity, and windspeed respectively
var values = [
"${data.clouds!.all}",
"${data.main!.humidity}",
"${data.wind!.speed} Km/h"
];
// Return a Column widget for each index in the List.generate
return Column(
children: [
// Display an image asset with padding, color, and rounded corners
Image.asset(
iconsList[index],
height: 60,
width: 60,
)
.box
.color(theme.primaryColor)
.padding(EdgeInsets.all(5))
.roundedSM
.make(),
// Add a vertical space of 10 pixels
10.heightBox,
// Display the corresponding value with primary color text
values[index].text.color(theme.primaryColor).make()
],
);
}),
Difference Between ListView and List
| ListView | List |
Usage | ListView is used when there is a need to display a large number of items that can be scrolled through. It is commonly used in applications where the data is dynamic and needs to be fetched from an API or database. | List is used when there is a need to display a limited number of static items on the screen, such as a list of features or benefits of a product. It is commonly used in applications where the data is static and predefined, such as displaying some statistics or weather information on the screen. |
Methods | ListView provides various inbuilt methods such as BouncingScrollPhysics, and ScrollDirection. These methods make the ListView more interactive and dynamic. | ListView provides various inbuilt methods such as BouncingScrollPhysics, and ScrollDirection. These methods make the ListView more interactive and dynamic. |
Performance | ListView is more efficient in terms of performance as it can display a large number of items without affecting the app's performance. | List is less efficient in terms of performance as it can only display a limited number of items, and displaying more items can affect the app's performance. |
Scrollable | ListView is scrollable which means it can display a large number of items and users can scroll through them. | List is not scrollable which means it can only display a limited number of items and users cannot scroll through them. |
Conclusion
So in conclusion both list and ListView have different advantages and disadvantages. However, it depends on the UI and the user needs that either List or ListView is needed for that particular workflow.
Similar Reads
Difference Between Flutter and Kotlin
Before, for cross-platform development Flutter and React Native were the go-to programming solutions and these languages were highly used by the developers. But today Kotlin has also become very popular and it has managed to enter the competition. So, the debate started that who will rule the market
5 min read
Difference between React Native and Flutter
In this article, we will discuss two frameworks that have exquisitely maintained and transcended into the top ranks for quite some time now, namely React Native and Flutter. Considering the huge amount of skill, time and money invested in mobile app development, nowadays companies need a faster way
5 min read
Difference Between Isolates and Compute in Flutter
When developing mobile applications with Flutter, it's important to consider performance and responsiveness to ensure a smooth user experience. Two tools that can be used to achieve this are Flutter Isolates and Flutter Compute. Both tools allow for parallel processing, but they have some difference
4 min read
Differences between Flutter and Xamarin
1. Flutter : This toolkit is a cross-platform technology from Google, an effective language that can be used in both iOS and Android applications. It permits developing software applications for mobile, desktop, and internet use and makes use of the Dart programming language, which is an OOP languag
2 min read
Flutter - Add Divider Between Each List Item
In Flutter, using the Divider widget, you can implement a divider between items or sections in a list. The Divider widget provides a horizontal line that visually separates content. In this article, we are going to use the Divider Widget to separate each item of a ListView. A sample Image is given b
4 min read
Difference Between Stateless and Stateful Widget in Flutter
As we all know the flutter app consists of widgets only, these are broadly classified into two types:Â Stateless WidgetStateful WidgetState: Before knowing the difference between the stateless and stateful widget we should take a look at the definition of State of a widget. The State is information
3 min read
Difference between Flutter and Angular
Flutter: Flutter is Googleâs Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), Web apps from a single codebase. It is an open-source framework created in May 2017. When building applications with Flutter everything towards Widgets â the blocks with which the flutter apps a
5 min read
Android - Difference Between RecyclerView and ListView
In Android View is a basic building block of UI (User Interface). A view is a small rectangular box that responds to user inputs. RecyclerView and ListView are the two major Views in Android. So in this article, we are going to see the major differences between these two views. RecyclerView Recycler
3 min read
Difference between List and Array in Python
In Python, lists and arrays are the data structures that are used to store multiple items. They both support the indexing of elements to access them, slicing, and iterating over the elements. In this article, we will see the difference between the two.Operations Difference in Lists and ArraysAccessi
6 min read
Difference Between Rows and Columns vs Container in Flutter
In this article, we'll learn about the key differences between Container and Row/Column widgets. Row and Column widgets both belong to a similar category and have identical uses. These are the basic widgets that you would use in almost every Flutter app. We will discuss them briefly.ContainerThis is
3 min read