Flutter Search bar filter issues - flutter

Question

I have a project that I have been working on and have been stumped on this for the last month and can't seem to figure out how to solve this. I have a screen that shows a list of contacts and a search bar that is used to show specific contacts. I have been trying to add a filter feature where the use clicks on filters and chooses a couple options that will show. The way the button widget works I couldn't get it to be in the same class so it's in another file and being used. Here is the code, I am still learning Flutter so if you have an recommendations to fix other bits of the code I would love to hear it.
Here is my first file with the screen that include the search bar and the the major chunk of code.
import 'package:myapp/widgets/cards.dart';
import 'package:flutter/material.dart';
import 'package:myapp/widgets/icon_buttons.dart';
class ResourceScreen extends StatefulWidget {
const ResourceScreen({Key? key}) : super(key: key);
#override
_ResourceScreen createState() => _ResourceScreen();
}
class _ResourceScreen extends State<ResourceScreen> {
bool filtered = false;
final TextEditingController _filter = TextEditingController();
String _searchText = "";
Widget customSearchBar = const Text('Resources');
Icon customIcon = const Icon(Icons.search);
List filterCardInformation = [],
tempList = [],
filterButtons = [],
cardInformation = phoneList;
void _getCards() async {
setState(() {
filterCardInformation = cardInformation;
});
}
//TODO There seems to be some lag when the list goes from nothing to the whole list. Not sure what is impacting this or how hard it could be on the users experience as list grows
_ResourceScreen() {
_filter.addListener(() {
filterCardInformation =
cardInformation; // Might need in every else statement, not sure if there is a memory leak with it being here
//Had "tempList = []" only here and caused the program to run out of memory. This is why I believe this could be an issue
if (_filter.text.isEmpty) {
if (filtered) {
setState(() {
_searchText = "";
tempList = [];
for (int i = 0; i < filterCardInformation.length; i++) {
if (filterPhrase.contains(filterCardInformation[i].metadata)) {
tempList.add(filterCardInformation[i]);
}
}
filterCardInformation = tempList;
});
} else {
setState(() {
_searchText = "";
});
}
} else {
if (filtered) {
setState(() {
_searchText = _filter.text;
tempList = [];
for (int i = 0; i < filterCardInformation.length; i++) {
if (filterPhrase.contains(filterCardInformation[i].metadata)) {
tempList.add(filterCardInformation[i]);
}
}
filterCardInformation = tempList;
});
} else {
setState(() {
_searchText = _filter.text;
});
}
}
});
}
//This is where the list is built as input comes in from the keyboard
Widget _buildList(context) {
if (_searchText.isNotEmpty && !filtered) {
tempList = [];
for (int i = 0; i < filterCardInformation.length; i++) {
if ((filterCardInformation[i].title.toString())
.toLowerCase()
.contains(_searchText.toLowerCase())) {
tempList.add(filterCardInformation[i]);
}
}
filterCardInformation = tempList;
} else if (_searchText.isNotEmpty && filtered) {
tempList = [];
for (int i = 0; i < filterCardInformation.length; i++) {
if ((filterCardInformation[i].title.toString())
.toLowerCase()
.contains(_searchText.toLowerCase()) &&
filterPhrase.contains(filterCardInformation[i].metadata)) {
tempList.add(filterCardInformation[i]);
}
}
filterCardInformation = tempList;
}
return ListView.builder(
physics: const ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: filterCardInformation.length,
itemBuilder: (BuildContext context, int index) {
return MyExpandingCard(
title: filterCardInformation[index].title,
information: filterCardInformation[index].information,
phoneList: filterCardInformation[index].phoneList,
website: filterCardInformation[index].website,
contactList: filterCardInformation[index].contactList,
);
},
);
}
#override
void initState() {
_getCards();
super.initState();
}
//Trigger filter list to show from the bottom
Widget filterButton(double height) {
return ElevatedButton.icon(
onPressed: () => {filterBottomSheet(height)},
//TODO Change out this icon for something different
icon: const Icon(Icons.filter),
label: const Text("Filter"),
);
}
//Row with buttons for bottomSheet
Widget doubleBottomButtonRow(String dataOne, dataTwo) {
Icon firstPersonalIcon = const Icon(Icons.add),
secondPersonalIcon = const Icon(Icons.add);
void _changeFirstIcon() {
setState(() {
if (firstPersonalIcon.icon == Icons.add) {
firstPersonalIcon = const Icon(Icons.check);
} else {
firstPersonalIcon = const Icon(Icons.add);
}
});
}
void _changeSecondIcon() {
setState(() {
if (secondPersonalIcon.icon == Icons.add) {
secondPersonalIcon = const Icon(Icons.check);
} else {
secondPersonalIcon = const Icon(Icons.add);
}
});
}
return Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton.icon(
//TODO issue here with icon not changing on click. I am not sure exactly why, I just need to figure out how to trigger feedback from when button in different file is used
onPressed: () {
_changeFirstIcon();
},
style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
label: Text(dataOne),
icon: firstPersonalIcon),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton.icon(
onPressed: () {
_changeSecondIcon();
},
style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
label: Text(dataTwo),
icon: secondPersonalIcon),
),
],
);
}
Widget singleBottomButtonRow(String dataOne) {
return Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: IButton(firstName: dataOne)),
],
);
}
//BottomSheet filter
Future filterBottomSheet(double height) {
return showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return SizedBox(
height: height,
child: SingleChildScrollView(
child: Column(
children: [
doubleBottomButtonRow(
"filter 1", "filter 2"),
],
),
));
});
}
//TODO Design this
//Widget that keeps track of how many visible options are shown
#override
Widget build(BuildContext context) {
//Grab size of screan for the bottom sheet
Size size = MediaQuery.of(context).size;
double height = size.height;
return Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xff1c1d4b),
title: customSearchBar,
automaticallyImplyLeading: true,
actions: [
IconButton(
onPressed: () {
setState(() {
if (customIcon.icon == Icons.search) {
customIcon = const Icon(Icons.cancel);
//search bar
customSearchBar = ListTile(
leading: const Icon(
Icons.search,
color: Colors.white,
size: 28,
),
title: TextField(
controller: _filter,
autofocus: true,
decoration: const InputDecoration(
hintText: 'Type in search...',
hintStyle:
TextStyle(color: Colors.white, fontSize: 18),
border: InputBorder.none,
),
style: const TextStyle(color: Colors.white),
),
);
//Reset the variables
} else {
customIcon = const Icon(Icons.search);
customSearchBar = const Text('Resources');
}
});
},
icon: customIcon)
],
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Row(
children: [
filterButton(height * .30),
],
),
Expanded(
child: SingleChildScrollView(
physics: const ScrollPhysics(),
child: _buildList(context),
),
),
],
),
),
);
}
}
//TODO This is not working but what I was thinking of how the function would look
List filterPhrase = [];
void _addPhrase(String phrase) {
filterPhrase.add(phrase);
}
void _deletePhrase(String phrase) {
filterPhrase.remove(phrase);
}
List phoneList = [
const MyExpandingCard(
title: 'example 1',
phoneList: ['123456789'],
metadata: "filter 1",
),
const MyExpandingCard(
title: 'example 2',
phoneList: ['123456789'],
metadata: "filter 2",
),
];
And here is the other file that I am using for the button in the filter
import 'package:flutter/material.dart';
import 'package:myapp/secondary_screens/resource_screen.dart';
class IButton extends StatefulWidget {
final String firstName;
const IButton({Key? key, required this.firstName}) : super(key: key);
#override
State<IButton> createState() => _IButtonState();
}
class _IButtonState extends State<IButton> {
Icon personalIcon = const Icon(Icons.add);
void _changeIcon() {
setState(() {
if (personalIcon.icon == Icons.add) {
personalIcon = const Icon(Icons.check);
//add to filter list
} else {
personalIcon = const Icon(Icons.add);
//remove from filter list
}
});
}
#override
Widget build(BuildContext context) {
return ElevatedButton.icon(
onPressed: _changeIcon,
icon: personalIcon,
style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
label: Text(widget.firstName),
);
}
}
If you have any resources to improve skills in flutter I would love to hear them. I am always looking to improve.
Thank you all