Flutter – Difference Between ListView and List

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 ScrollDirection. For example when we have to display the weather of the desired location after a particular interval of time. 

ListView

Example code of the above image in dart:

Dart

ListView.builder(
                 physics: BouncingScrollPhysics(),
                 scrollDirection: Axis.horizontal,
                 shrinkWrap: true,
                 itemCount: hourlyData.list!.length > 6
                                 ? 6
                                 : hourlyData.list!.length,
                             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(),
                                   Image.asset(
                                       "assets/weather/${hourlyData.list![index].weather![0].icon}.png"),
                                   "${hourlyData.list![index].main!.temp}$degree"
                                       .text
                                       .color(Vx.gray400)
                                       .make(),
                  ]),
         );
   },
)

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) {
                       var iconsList = [clouds, humidity, windspeed];
                       var values = [
                         "${data.clouds!.all}",
                         "${data.main!.humidity}",
                         "${data.wind!.speed} Km/h"
                       ];
                       return Column(
                         children: [
                           Image.asset(
                             iconsList[index],
                             height: 60,
                             width: 60,
                           )
                               .box
                               .color(theme.primaryColor)
                               .padding(EdgeInsets.all(5))
                               .roundedSM
                               .make(),
                           10.heightBox,
                           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.