LiewJunTung / alphabet_list_scroll_view

MIT License
78 stars 41 forks source link

Side alphabet list shows nothing #12

Open CripyIce opened 4 years ago

CripyIce commented 4 years ago

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: Simulator Screen Shot - iPhone 11 Pro Max - 2020-03-11 at 12 57 49

After sorting the list: Simulator Screen Shot - iPhone 11 Pro Max - 2020-03-11 at 12 57 51

buzzicards commented 4 years ago

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

CripyIce commented 4 years ago

@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?