Creating ListViews in Flutter
In this tutorial, we will cover the basics of creating and using ListView in Flutter.
What we will learn:
How to create an app using Flutter
How to scaffold a new Flutter project
How to create and render ListView in Flutter
What is Flutter?
Flutter is a mobile UI toolkit and open-source SDK by Google. It is written in Dart, a programming language also developed by Google.
Flutter is used to develop mobile web apps, like native apps for iOS and Android or desktop apps for Linux, macOS, Windows, and ChromeOS. It is a complete SDK, meaning it provides devs everything they need to build applications: a rendering engine, UI components, testing frameworks, tooling, a router, and more.
What makes Flutter special is the ability to “write once, deploy anywhere.” It is also very easy to get acquainted with, regardless of your background in mobile, desktop, or web development.
Flutter also has tons of control and flexibility. For example, an Android app written in Flutter can be compiled to build a desktop or an iOS app; you don’t have to write a new project from scratch when you want to build your app for different devices. This functionality helps companies as well, because there is no need for separate teams (e.g., web, iOS, Android) on a single project because one project will compile across any major device.
I love using Flutter and can personally tell you the framework is awesome. A lot can be accomplished with just a few lines of code, and the routing system, security, tooling, and testing have been abstracted away by the framework, making my work very easy.
What is ListView?
ListView is used to group several items in an array and display them in a scrollable list. The list can be scrolled vertically, horizontally, or displayed in a grid:
ListView Example
ListViews are common in UI frameworks, and are one of the most popular UI widgets in the world. In fact, any mobile app or project must use ListView in some capacity. ListViews are used in Android, iOS, web apps, Django, and other frameworks, where they perform the same work but sometimes under a different name.
ListView has recently become very sophisticated. For example, Android has RecyclerView that extends from the basic ListView widget with more complex and powerful controls and features.
ListView can be optimized using many different tricks, and customized to suit your project’s specific needs. We will walk through these options in the sections below.
Scaffolding a Flutter project
To begin, we need to scaffold a Flutter app. These are the initial steps on how to set up flutter and get it working on macOS. You can follow Flutter’s installation guide for other systems here.
The first step is to install Android Studio or Xcode for the platform for which you want to develop. In this tutorial, I will be developing for Android. Then, follow these steps:
Download the installation bundle by clicking this link
Unzip and cd into the desired folder:
$ cd ~/desiredfolder
$ unzip ~/Downloads/fluttermacos2.0.2-stable.zip
Add flutter to your path:
$ export PATH="$PATH:DIRTOYOUR_FLUTTER/flutter/bin"
Run flutter doctor in your terminal
This command will download the Flutter SDK and run diagnostics to determine if everything is good to go. At the end of the run, you may have this result:
[!] Android Studio (version 4.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
! No devices available
! Doctor found issues in 4 categories.
If you don’t have Flutter and Dart plugins in your Android Studio, all you need to do is:
Open Android Studio
Go to Android Studio > Preferences…
Click on Plugins
On the right pane, search for Flutter
In the results, select Flutter and install it
There will be an option to install Dart plugin too – make sure you accept it
Now, we need to run the Android Virtual Manager. To do that click on the AVD Manager icon in the top-right section of Android Studio. A dialog will appear with a default AVD device. On the Actions tab, click on the run icon.
Now, go back to your terminal, and scaffold a Flutter project:
flutter create myapp
This will create a Flutter project with folder name myapp. I suggest you open the folder with VS Code (as long as you install Dart and Flutter plugins as well) so developing in it becomes easier.
Run the Flutter project:
flutter run
You will see the Flutter being run on the AVD:
Screenshot of flutter on ADV
We will work on the main.dart file in lib folder:
Screenshot of main.dart file in ADV
In our main.dart, we see this:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
The main function is the entry point of our app. Note that it calls the runApp passing in the MyApp instance, which is a widget.
Looking at MyApp, you can see it’s a stateless widget (meaning it holds no local state). Everything in Flutter is a widget, and all widgets must extend the StatelessWidget or StatefulWidget, and must override or implement the build method. The build method must return a widget, which is what will be displayed on the screen.
Now, any widget being passed in the runApp call becomes the root widget.
Here, the MyApp widget returns a MaterialApp widget, which wraps your app to pass Material-Design-specific functionality to all the widgets in the app. The MaterialApp has configurations to be passed in. The title sets the title in the app bar, the theme sets the theme of the display, and the home sets the widget that will be rendered on screen.
We will remove the MyHomePage(...) and replace it with the ListView widget that we will be creating:
class ListViewHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Text('List 1'),
Text('List 2'),
Text('List 3'),
],
);
}
}
Here, we have a ListViewHome widget. Note that in the build method we return a ListView widget; this widget is built-in in Flutter, and will render the array data passed to it serially.
Looking at ListView, see that we called it with padding and children props. The padding sets the padding of the element on its container. children is an array, which contains widgets that will be rendered by ListView.
Here, we are rendering texts. We created Text widgets to pass text we want rendered to them. So, the ListView will render three Text widgets with following text: “List 1,””List 2,” and “List 3.”
Now, we will remove MyHomePage(title: 'Flutter Demo Home Page') from MyApp and add ListViewHome():
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ListViewHome()
);
}
}
Save your file, and the Flutter server will reload. Go to your AVD to see the outcome:
Demonstration of basic list on smartphone
Note how our list of text is rendered. But this is not very appealing, let’s make it more stylish:
class ListViewHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
ListTile( title: Text('List 1')),
ListTile( title: Text('List 2')),
ListTile( title: Text('List 3')),
],
);
}
}
Here, we used ListTile widget from Flutter. Let’s see the outcome:
Screenshot of list on smartphone with list tile, which shows more space between each list item than previous screenshot
The ListTile widget makes the rendering more pronounced and padded. The text is separated from itself to be more readable and stylish. ListTile is useful for making something like a settings menu page, or for text lists that do not change.
We can also render icons, cards, images, and custom widgets with ListView.
Icons in ListView
To use icons in ListView we can use the Icon widget by replacing the Text widget:
class ListViewHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
ListTile( title: Icon(Icons.battery_full)),
ListTile( title: Icon(Icons.anchor)),
ListTile( title: Icon(Icons.access_alarm)),
ListTile(title: Icon(Icons.ballot))
],
);
}
}
The Icon widget renders icons from the Material UI. The Icons class is used to select icons by their name:
Screenshot of various icons in a list on a smartphone
Note how the icons are rendered on the ListView. Let’s display text alongside icons:
class ListViewHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
ListTile( titl