In Flutter, the where() method can be used on a list to filter its elements based on a specified condition. To demonstrate this let’s make a Flutter app that will contain a List of products having name, category and price. Then we create a TextView named a Filtered list by price when the user enters some price the app will fetch the product with the mentioned price from the List of available products. A sample video is attached below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
void main() {
runApp(MyApp());
} |
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ListFilter(),
theme: ThemeData(
// Set the app's primary theme color
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false ,
);
}
} |
Step 5: Creating an ListFilter Class
In this class we are going to create a list of product and impement a method using where() to filter the list based on the price entered by the user. Comments are added for better understanding.
Creating an list of product:
final List<Product> products = [
Product(name: 'Product 1', price: 10.0, category: 'Category A'),
Product(name: 'Product 2', price: 25.0, category: 'Category B'),
Product(name: 'Product 3', price: 15.0, category: 'Category A'),
Product(name: 'Product 4', price: 30.0, category: 'Category C'),
Product(name: 'Product 5', price: 20.0, category: 'Category A'),
];
Creating an method for filter the list based on the user entered price using where():
// Function to filter products by price
void filterProductsByPrice(String price) {
setState(() {
filterPrice = price;
// Use the 'where' method to filter products by price
filteredProducts = products
.where((product) =>
product.price.toStringAsFixed(2).contains(filterPrice))
.toList();
});
}
Funtion to build a product card for displaying it:
// Function to build a product card
Widget _buildProductCard(Product product, BuildContext context) {
return Card(
elevation: 5,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
product.name,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 5),
Text(
'Price: Rs.${product.price.toStringAsFixed(2)}',
style: TextStyle(fontSize: 16, color: Colors.green),
),
SizedBox(height: 5),
Text(
'Category: ${product.category}',
style: TextStyle(fontSize: 16, color: Colors.blue),
),
],
),
),
);
}
class ListFilter extends StatefulWidget {
@override
_ListFilterState createState() => _ListFilterState();
} class _ListFilterState extends State<ListFilter> {
final List<Product> products = [
Product(name: 'Product 1' , price: 10.0, category: 'Category A' ),
Product(name: 'Product 2' , price: 25.0, category: 'Category B' ),
Product(name: 'Product 3' , price: 15.0, category: 'Category A' ),
Product(name: 'Product 4' , price: 30.0, category: 'Category C' ),
Product(name: 'Product 5' , price: 20.0, category: 'Category A' ),
];
String filterPrice = '' ;
List<Product> filteredProducts = [];
@override
void initState() {
// Initialize the filtered
// list with all products
filteredProducts = products;
super.initState();
}
// Function to filter products by price
void filterProductsByPrice(String price) {
setState(() {
filterPrice = price;
// Use the 'where' method to
// filter products by price
filteredProducts = products
.where((product) =>
product.price.toStringAsFixed(2).contains(filterPrice))
.toList();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( 'Product Filter App' ),
),
body: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Text input field for price filtering
Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(labelText: 'Filter by Price' ),
// Call the filtering
// function on text change
onChanged: filterProductsByPrice,
),
),
Text(
'Filtered Products' ,
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
for (var product in filteredProducts)
_buildProductCard(product, context),
],
),
),
),
);
}
// Function to build a product card
Widget _buildProductCard(Product product, BuildContext context) {
return Card(
elevation: 5,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
product.name,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 5),
Text(
'Price: Rs.${product.price.toStringAsFixed(2)}' ,
style: TextStyle(fontSize: 16, color: Colors.green),
),
SizedBox(height: 5),
Text(
'Category: ${product.category}' ,
style: TextStyle(fontSize: 16, color: Colors.blue),
),
],
),
),
);
}
} |
Step 6: Creating an Product Class
This class contains 3 fields named as name(type-String ),price(type – double),category(type – String) and a constructor to intialize these fields.
class Product {
final String name;
final double price;
final String category;
Product({required this .name, required this .price, required this .category});
} |
Here is the full Code of main.dart file:
import 'package:flutter/material.dart' ;
void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ListFilter(),
theme: ThemeData(
// Set the app's primary theme color
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false ,
);
}
} class Product {
final String name;
final double price;
final String category;
Product({required this .name, required this .price, required this .category});
} class ListFilter extends StatefulWidget {
@override
_ListFilterState createState() => _ListFilterState();
} class _ListFilterState extends State<ListFilter> {
final List<Product> products = [
Product(name: 'Product 1' , price: 10.0, category: 'Category A' ),
Product(name: 'Product 2' , price: 25.0, category: 'Category B' ),
Product(name: 'Product 3' , price: 15.0, category: 'Category A' ),
Product(name: 'Product 4' , price: 30.0, category: 'Category C' ),
Product(name: 'Product 5' , price: 20.0, category: 'Category A' ),
];
String filterPrice = '' ;
List<Product> filteredProducts = [];
@override
void initState() {
// Initialize the filtered
// list with all products
filteredProducts = products;
super.initState();
}
// Function to filter products by price
void filterProductsByPrice(String price) {
setState(() {
filterPrice = price;
// Use the 'where' method to
// filter products by price
filteredProducts = products
.where((product) =>
product.price.toStringAsFixed(2).contains(filterPrice))
.toList();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( 'Product Filter App' ),
),
body: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Text input field for price filtering
Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(labelText: 'Filter by Price' ),
// Call the filtering function
// on text change
onChanged: filterProductsByPrice,
),
),
Text(
'Filtered Products' ,
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
for (var product in filteredProducts)
_buildProductCard(product, context),
],
),
),
),
);
}
// Function to build a product card
Widget _buildProductCard(Product product, BuildContext context) {
return Card(
elevation: 5,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
product.name,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 5),
Text(
'Price: Rs.${product.price.toStringAsFixed(2)}' ,
style: TextStyle(fontSize: 16, color: Colors.green),
),
SizedBox(height: 5),
Text(
'Category: ${product.category}' ,
style: TextStyle(fontSize: 16, color: Colors.blue),
),
],
),
),
);
}
} |