Flutter, Google's UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, offers a wide range of widgets for creating dynamic and interactive user interfaces. One such widget is the ListView, which is perfect for displaying scrollable lists. In this guide, we'll explore a practical example of building a list in Flutter using the ListView.builder method, which is an efficient way to create lists with a large (or infinite) number of items.
Before diving into the example, let's briefly understand why we might use ListView.builder instead of a regular ListView. ListView.builder is more efficient when dealing with a large number of items because it only builds the items that are currently visible on the screen, unlike ListView, which builds all items at once.
Setting Up the Project
To get started, make sure you have Flutter installed. If not, follow the official guide to install Flutter on your machine. Once Flutter is set up, create a new Flutter project using the following command in your terminal:
flutter create list_builder_example
Importing Necessary Packages
For this example, we'll use the 'http' package to fetch data from an API. Add the following dependency to your pubspec.yaml file:
dependencies: flutter: sdk: flutter http: ^0.13.3
Creating the ListView.builder
Now, let's create a simple ListView.builder that displays a list of items fetched from an API. In your main.dart file, import the necessary packages and wrap your MaterialApp with a Scaffold:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() async {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('ListView.builder Example')),
body: Center(
child: FutureBuilder(
future: fetchData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(snapshot.data[index]['title']),
subtitle: Text(snapshot.data[index]['body']),
);
},
);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return CircularProgressIndicator();
},
),
),
),
);
}
}
The FutureBuilder widget is used to manage the state of the future data. It checks if the data has been fetched, if there's an error, or if it's still loading. Once the data is fetched, it's passed to the ListView.builder, which builds the list of items.
Fetching Data from an API
In the example above, we're using the JSONPlaceholder API to fetch a list of posts. Let's create the fetchData function that makes the API call:
Future fetchData() async {
final response = await http.get('https://jsonplaceholder.typicode.com/posts');
if (response.statusCode == 200) {
final data = json.decode(response.body);
return data;
} else {
throw Exception('Failed to load data');
}
}
Displaying the List Items
The ListView.builder takes two main parameters: itemCount and itemBuilder. The itemCount parameter is the length of the list, and the itemBuilder is a callback function that builds each item in the list. In our example, we're using the fetched data to create a ListTile for each item in the list, displaying the title and body of each post.
With this, you now have a simple Flutter list builder example that fetches data from an API and displays it in a scrollable list. This example can be extended to include more features like pagination, infinite scrolling, or even filtering and sorting the list.
Happy coding! Remember, the best way to learn is by doing. So, experiment with this example, and don't hesitate to explore other Flutter widgets and features. Until next time!