context :
I want to click on a particular services person/product and open a page where details can be shown more like a details page
Problem
I think that Gesture control should work but I'm not able to put it the right way in my code
How to change chip color on selection the data is getting filtered but i want to add 2 more things
- highlight the chip that is selected
- so a text message stating Not Available if there is nothing available, rather then leaving blank and
My Code
class _HomeScreenState extends State<HomeScreen> {
int _selectedIndex = 0;
int _selectedCategoryIndex = -1;
String _selectedUserType = "Maid";
PageController pageController = PageController();
List array = ["Maid", "Driver", "Engineer", "Gardener", "Pilot","carpainter", "guard", "plumber"];
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
},
{
"name": "Sachin Test",
"profilePic":
"https://lh3.googleusercontent.com/a-/AAuE7mCfQn-gP_FJZUUU4GC4aSU1km9t_e5PL6zsV-NwdA=k-s48",
"category": ["carpainter", "guard", "plumber"],
"rating": 5,
"bg": Colors.blue
}
];
List product_data = [
{
"name": "P1",
"profilePic":
"https://lh3.googleusercontent.com/a-/AAuE7mCfQn-gP_FJZUUU4GC4aSU1km9t_e5PL6zsV-NwdA=k-s48",
"category": ["Dusting"],
"rating": 5,
"bg": Colors.red
},
{
"name": "P2",
"profilePic":
"https://lh3.googleusercontent.com/a-/AAuE7mCfQn-gP_FJZUUU4GC4aSU1km9t_e5PL6zsV-NwdA=k-s48",
"category": ["Mopping"],
"rating": 5,
"bg": Colors.amberAccent
},
{
"name": "P3",
"profilePic":
"https://lh3.googleusercontent.com/a-/AAuE7mCfQn-gP_FJZUUU4GC4aSU1km9t_e5PL6zsV-NwdA=k-s48",
"category": ["cleaning"],
"rating": 5,
"bg": Colors.blue
}
];
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() {
print(_selectedUserType);
filteredData = data.where((element) => element["category"].contains(_selectedUserType)).toList();
print(filteredData);
setState(() {});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: pageController,
children: [
SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.symmetric(vertical: 5),
child: Container(
// color: Colors.purple,
// margin: const EdgeInsets.only(top: 45, bottom: 15),
padding: const EdgeInsets.only(left: 10, right: 10),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Bengaluru",
style: TextStyle(
color: APP_COLOR.mainColor,
),
),
Text("R.T Nagar")
]),
),
customContainer(iconData: Icons.search,),
SizedBox(width: 10,),
customContainer(iconData: Icons.notifications,),
])),
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
Padding(
padding: EdgeInsets.symmetric(vertical: 10,horizontal: 10),
child: Align(
alignment: Alignment.centerLeft,
child:
Text(
'Popular Services',
),
),
),
Container(
height: MediaQuery.of(context).size.height / 12,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
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(),
),
),
Container(
height: MediaQuery.of(context).size.height / 6,
child: ListView.builder(
scrollDirection: Axis.horizontal,
// physics: NeverScrollableScrollPhysics(),
itemCount: filteredData.length,
itemBuilder: (context, index) {
var item = filteredData[index];
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Container(
color: item['bg'],
child: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Text(item["name"].toString()),
),
),
),
);
},
// This next line does the trick.
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 10,horizontal: 10),
child: Row(
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: [
Text(
'Popular Products',
),
Align(
alignment: Alignment.centerRight,
child:
Text(
'View All',
),
),
],
),
),
Container(
height: MediaQuery.of(context).size.height / 6,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: product_data.length,
itemBuilder: (context, index) {
var item = product_data[index];
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Container(
color: item['bg'],
child: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 60),
child: Text(item["name"].toString()),
),
),
),
);
},
// This next line does the trick.
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 10,horizontal: 10),
child: Row(
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: [
Text(
'Our Products',
),
Align(
alignment: Alignment.centerRight,
child:
Text(
'View All',
),
),
],
),
),
Container(
height: MediaQuery.of(context).size.height / 6,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: product_data.length,
itemBuilder: (context, index) {
var item = product_data[index];
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Container(
color: item['bg'],
child: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 60),
child: Text(item["name"].toString()),
),
),
),
);
},
// This next line does the trick.
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 10,horizontal: 10),
child: Row(
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: [
Text(
'New Products',
),
Align(
alignment: Alignment.centerRight,
child:
Text(
'View All',
),
),
],
),
),
Container(
height: MediaQuery.of(context).size.height / 6,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: product_data.length,
itemBuilder: (context, index) {
var item = product_data[index];
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Container(
color: item['bg'],
child: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 60),
child: Text(item["name"].toString()),
),
),
),
);
},
),
),
],
),
),
)
]),
),
Container(color: Colors.blue,),
Container(color: Colors.white,),
Container(color: Colors.yellow,),
Container(color: Colors.blue,),
Container(color: Colors.white,),
Container(color: Colors.yellow,)
],
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(
icon: Icon(Icons.cleaning_services), label: 'Services'),
BottomNavigationBarItem(
icon: Icon(Icons.local_convenience_store), label: 'Store'),
BottomNavigationBarItem(
icon: Icon(Icons.account_balance_wallet), label: 'Wallet'),
BottomNavigationBarItem(
icon: Icon(Icons.bookmarks), label: 'Bookmarked'),
BottomNavigationBarItem(
icon: Icon(Icons.assessment), label: 'Current Orders'),
BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
],
currentIndex: _selectedIndex,
selectedItemColor: APP_COLOR.mainColor,
unselectedItemColor: Colors.grey,
onTap: onTapped,
));
}
Widget customContainer({required IconData iconData}){
return Container(
width: 45,
height: 45,
padding: const EdgeInsets.only(left: 0, right: 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: APP_COLOR.mainColor,),
child: Icon(
iconData,
color: Colors.white,
),
);
}
}
I've recently started the flutter journey so i might have asked a very basic question so it will be great if you can explain the changes as well taht you made so i can understand it better