Member-only story

Mastering Flutter Filter Chip: A Complete Guide with Multi-Select Example

Understanding the Flutter Code: Filter Chip with Data Fetching Example

Raviya Technical
Flutter Framework
3 min readDec 25, 2024

Mastering Flutter Filter Chip: A Complete Guide with Multi-Select Example

In this article, we’ll explore a practical example of implementing Filter Chips in Flutter using data fetched from an API. This example leverages the power of FutureBuilder and dynamic chip creation to give you an interactive and visually appealing UI.

Creating Album

class Album {
final int userId;
final int id;
final String title;

Album({
required this.userId,
required this.id,
required this.title,
});

factory Album.fromJson(Map<String, dynamic> json) {
return Album(
userId: json['userId'],
id: json['id'],
title: json['title'],
);
}
}

And Creating function for _fetchAlbums from sample api test link url https://jsonplaceholder.typicode.com/albums

Future<List<Album>>? _fetchAlbums() async {
final response = await http
.get(Uri.parse('https://jsonplaceholder.typicode.com/albums/'));

if (response.statusCode == 200) {
var json = jsonDecode(response.body);
var albums = List<Album>.from(json.map((i) => Album.fromJson(i)));
return albums;
} else {
throw Exception('Failed to get albums');
}
}

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Responses (1)

Write a response