chips to filter the data - flutter

Question

I want to filter the data of people based on the jobs selected in chips
Let's say if the Maid chip is selected I should show some 5-6 maids and a see-all button
Similarly, if the Engineer chip is selected then only 5-6 engineers should be shown
These filtered data should also be horizontally scrollable.
I'm learning flutter so we can use any dummy data to achieve this and also I want it to be like a card so that I can show persons pic, and some related info and their ratings.
And also i would like to keep the chip size constant for all , basically it should take the chip size of the longest word if possible
My code Till now
import 'package:flutter/material.dart';
import 'package:mad_ezee_app/constants.dart';
import 'package:flutter/src/rendering/box.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _selectedIndex = 0;
PageController pageController = PageController();
List array =["Maid","Driver","Engineer","Gardener","Pilot"];
void onTapped(int index){
setState(() {
_selectedIndex = index;
});
pageController.jumpToPage(index);
}
void tappedCategory(int index){
setState(() {
_selectedIndex = index;
});
print(index);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
children:[
Container(
child: Container(
margin: EdgeInsets.only(top:45,bottom: 15),
padding: EdgeInsets.only(left: 20,right: 20),
child:Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children:[
Text("Bengaluru"),
Text("R.T Nagar")
]
),
Container(
width: 45,
height:45,
padding: EdgeInsets.only(left: 0,right: 0),
child: Icon(Icons.search,color: Colors.white,),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color:TimePassColor.APP_COLOR
),
),
Container(
width: 45,
height:45,
child: Icon(Icons.notifications,color: Colors.white,),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color:TimePassColor.APP_COLOR
),
),
]
)
)
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List<Widget>.generate(
array.length, // place the length of the array here
(int index) {
return Container(
margin: EdgeInsets.all(2.0),
child: GestureDetector(
onTap: (){
print(index);
},
child: Chip(
label: Text(array[index])
),
),
);
}
).toList(),
),
),
Expanded(
child:ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
color: Colors.red,
),
Container(
width: 160.0,
color: Colors.blue,
),
Container(
width: 160.0,
color: Colors.green,
),
Container(
width: 160.0,
color: Colors.yellow,
),
Container(
width: 160.0,
color: Colors.orange,
),
],
),
),
Expanded(
child: PageView(
controller: pageController,
children: [
Container(color: Colors.white,),
Container(color: Colors.white,),
Container(color: Colors.white,),
Container(color: Colors.white,),
Container(color: Colors.white,),
Container(color: Colors.white,),
Container(color: Colors.white,),
Container(color: Colors.white,),
],
),
),
]
),
bottomNavigationBar: BottomNavigationBar(items: const <BottomNavigationBarItem> [
BottomNavigationBarItem(icon: Icon(Icons.home),label:'Home'),
BottomNavigationBarItem(icon: Icon(Icons.cleaning_services),label:'House Keeping'),
BottomNavigationBarItem(icon: Icon(Icons.search),label:'Search'),
BottomNavigationBarItem(icon: Icon(Icons.account_balance_wallet),label:'Wallet'),
BottomNavigationBarItem(icon: Icon(Icons.bookmarks),label:'Bookmarked'),
BottomNavigationBarItem(icon: Icon(Icons.local_convenience_store),label:'Store'),
BottomNavigationBarItem(icon: Icon(Icons.notifications),label:'Notifications'),
BottomNavigationBarItem(icon: Icon(Icons.assessment),label:'Notifications'),
BottomNavigationBarItem(icon: Icon(Icons.person),label:'Profile'),
],currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.grey,
onTap: onTapped,
)
);
}
}
Sample Data could be like this:-
data =[
{
"name":"Sachin Rajput",
"profilePic":"https://lh3.googleusercontent.com/a-/AAuE7mCfQn-gP_FJZUUU4GC4aSU1km9t_e5PL6zsV-NwdA=k-s48",
"category":["cleaning","Mopping","Engineer"]
"rating":5
},
:
]
Note :- A person can have multiple profession
*Current Output

Answer 1

I guess this works for you.
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _selectedIndex = 0;
int _selectedCategoryIndex = -1;
String _selectedUserType = "Maid";
PageController pageController = PageController();
List array = ["Maid", "Driver", "Engineer", "Gardener", "Pilot"];
List data = [
{
"name": "Sachin Rajput",
"profilePic":
"https://lh3.googleusercontent.com/a-/AAuE7mCfQn-gP_FJZUUU4GC4aSU1km9t_e5PL6zsV-NwdA=k-s48",
"category": ["Maid", "Engineer"],
"rating": 5,
"bg": Colors.red
},
{
"name": "Sachin Tendulkar",
"profilePic":
"https://lh3.googleusercontent.com/a-/AAuE7mCfQn-gP_FJZUUU4GC4aSU1km9t_e5PL6zsV-NwdA=k-s48",
"category": ["Gardener", "Pilot", "Engineer"],
"rating": 5,
"bg": Colors.amberAccent
}
];
List filteredData = [];
void onTapped(int index) {
setState(() {
_selectedIndex = index;
});
pageController.jumpToPage(index);
}
void tappedCategory(int index) {
_selectedCategoryIndex = index;
_selectedUserType = array[index];
_filterData();
}
#override
void initState() {
super.initState();
_filterData();
}
_filterData() {
filteredData = _selectedCategoryIndex >= 0 ? data.where((element) => element["category"].contains(_selectedUserType)).toList() : data;
setState(() {});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
margin: const EdgeInsets.only(top: 45, bottom: 15),
padding: const EdgeInsets.only(left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(children: const [
Text("Bengaluru"),
Text("R.T Nagar")
]),
Container(
width: 45,
height: 45,
padding: const EdgeInsets.only(left: 0, right: 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.red),
child: const Icon(
Icons.search,
color: Colors.white,
),
),
Container(
width: 45,
height: 45,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.red),
child: const Icon(
Icons.notifications,
color: Colors.white,
),
),
])),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List<Widget>.generate(
array.length, // place the length of the array here
(int index) {
return Container(
margin: const EdgeInsets.all(2.0),
child: GestureDetector(
onTap: () {
tappedCategory(index);
},
child: Chip(label: Text(array[index])),
),
);
}).toList(),
),
),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: filteredData.length,
itemBuilder: (context, index) {
var item = filteredData[index];
return Container(
width: 160.0,
color: item['bg'],
child: Center(
child: Text(item["name"].toString()),
),
);
},
// This next line does the trick.
),
),
]),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(
icon: Icon(Icons.cleaning_services), label: 'House Keeping'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
BottomNavigationBarItem(
icon: Icon(Icons.account_balance_wallet), label: 'Wallet'),
BottomNavigationBarItem(
icon: Icon(Icons.bookmarks), label: 'Bookmarked'),
BottomNavigationBarItem(
icon: Icon(Icons.local_convenience_store), label: 'Store'),
BottomNavigationBarItem(
icon: Icon(Icons.notifications), label: 'Notifications'),
BottomNavigationBarItem(
icon: Icon(Icons.assessment), label: 'Notifications'),
BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.grey,
onTap: onTapped,
));
}
}
A suggestion is to reduce the number of items in the bottom nav bar. 4 to 5 is optimum, and 6 is a worst-case scenario. But you have 9 items, which will be difficult to access on smaller devices, and especially fat finger problems will easily frustrate the end-user.