alphabet_list_scroll_view
alphabet_list_scroll_view copied to clipboard
Side alphabet list shows nothing
Hi there,
When I call sort
function on the list I use with this library the side alphabet list shows only the search icon.
My code:
FutureBuilder<ClientResponse>(
future: Provider.of<ApiProvider>(context, listen: false).getClients(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
} else if (snapshot.data.error.isNotEmpty) {
return Center(child: Text("Error"));
}
List<Client> clientList;
if (_searchText.isEmpty) {
clientList = snapshot.data.results;
} else {
clientList = snapshot.data.results
.where((element) => element
.toMap()
.toString()
.toLowerCase()
.contains(_searchText.toLowerCase()))
.toList();
}
if (_clientSort == ClientSort.DATE) {
clientList.sort((a, b) => b.dateCreation.compareTo(a.dateCreation));
} else {
clientList.sort((a, b) => a.companyName.compareTo(b.companyName));
}
return AlphabetListScrollView(
itemBuilder: (context, index) {
final client = clientList[index];
return Center(
child: ListTile(
leading: Hero(
tag: "client_${client.id}",
transitionOnUserGestures: true,
child: CircleAvatar(
backgroundColor: PRIMARY_COLOR_EXTRA_LIGHT,
child:
Text(client.companyName.substring(0, 1).toUpperCase()),
radius: 32.0,
),
),
title: Text(
client.companyName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
subtitle: Text(
client.mobilePhone,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
onTap: () => Navigator.pushNamed(
context,
"/client_details",
arguments: {
"client": client,
},
),
),
);
},
strList: clientList
.map((e) => e.companyName.toUpperCase())
.toSet()
.toList(),
showPreview: true,
indexedHeight: (int) => 80,
highlightTextStyle: TextStyle(color: PRIMARY_COLOR),
keyboardUsage: true,
headerWidgetList: <AlphabetScrollListHeader>[
AlphabetScrollListHeader(widgetList: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: TextField(
controller: _searchController,
onChanged: (value) {
setState(() {
_searchText = value;
});
},
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: BorderSide(color: Colors.white),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: BorderSide(color: Colors.white),
),
filled: true,
fillColor: PRIMARY_COLOR_EXTRA_LIGHT,
prefixIcon: Icon(
Icons.search,
color: Colors.black54,
),
hintText: "Search client",
isDense: true,
hintStyle: TextStyle(color: Colors.black54),
),
style: TextStyle(color: Colors.black87),
),
)
], icon: Icon(Icons.search), indexedHeaderHeight: (index) => 70),
],
);
},
)
First load of the list - works fine:
After sorting the list:
Its because of the # Sign, not sure how to fix that... Once there is non-Alphabetic char as the first String then you have that error
@buzzicards , Yes now that I've filtered out non-alphabetic chars it works fine. Another thing, any idea on how to hide the side alphabet list?