MikiMeow_
MikiMeow_

Reputation: 51

How to get matched user list show in search result [Flutter]

I'm using package search_page

I want to show user name when searching their name like this exampleexample

Here is my Firestore, I have user named Test User One and Test User Two firestore Here is my code for FloatingActionButton( )

FloatingActionButton(
      onPressed: () => showSearch(
        context: context,
        delegate: ChatSearch(),
      ),
      child: Icon(Icons.chat),
    ),

Here is my code for ChatSearch( )

class ChatSearch extends SearchDelegate {

FirebaseFirestore _fires = FirebaseFirestore.instance;

Future<QuerySnapshot> getUserInfo() async {
return await _fires.collection("Students").where("displayName", isEqualTo: query).get();
}
   ...

@override
Widget buildResults(BuildContext context) {
  return Column(
  children: [
    FutureBuilder(
        future: getUserInfo(),
        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) {
            return Text('No user found.');
          }
          else if (snapshot.connectionState == ConnectionState.waiting) {
            return Text('Loading ...');
          }
          return ListView.builder(
            shrinkWrap: true,
            itemCount: snapshot.data.docs.length,
            itemBuilder: (BuildContext context, int index) {
              var result = snapshot.data.docs[index];
              return ListTile(
                title: Text(result["displayName"]),
                subtitle: Text(result["society"]),
                leading: CircleAvatar(backgroundImage: NetworkImage(result["photoUrl"]),),
              );
            },
          );
        }),
    ],
  );
}
}

Here is my screenshot screenshot

How can I get the query (all user name matched with search) instead of isEqualTo? For example, when I search Test User, it will appear Test User One and Test User Two

Really appreciate if anyone can help me or provide me some direction. Thanks.

Upvotes: 2

Views: 758

Answers (1)

Yashir khan
Yashir khan

Reputation: 486

It's easy no need to use the plugin here is the code

//it's the code to search for user for name
static Future<QuerySnapshot> getUserInfo(String name) {
Future<QuerySnapshot> users =
    usersRef.where('name', isGreaterThanOrEqualTo: name).getDocuments();
return users;
}

and this are some values

TextEditingController _searchController = TextEditingController();
Future<QuerySnapshot> _users;
String _searchText = '';

and it's the search ui code

@override
Widget build(BuildContext context) {
String _currentUserId = Provider.of<UserData>(context).currentUserId;
void _clearSearch() {
  WidgetsBinding.instance
      .addPostFrameCallback((_) => _searchController.clear());
  setState(() {
    _users = null;
    _searchText = '';
  });
}

return Scaffold(
  appBar: AppBar(
    title: TextField(
      controller: _searchController,
      decoration: InputDecoration(
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        contentPadding: const EdgeInsets.symmetric(vertical: 15.0),
        border: InputBorder.none,
        hintText: 'Search for a user...',
        prefixIcon: Icon(
          Icons.search,
          color: Theme.of(context).accentColor.withOpacity(0.6),
          size: 30.0,
        ),
        suffixIcon: _searchText.trim().isEmpty
            ? null
            : IconButton(
                color: Theme.of(context).accentColor.withOpacity(0.6),
                icon: Icon(Icons.clear),
                onPressed: _clearSearch,
              ),
        // filled: true,
      ),
      onChanged: (value) {
        setState(() {
          _searchText = value;
        });
      },
      onSubmitted: (input) {
        if (input.trim().isNotEmpty) {
          setState(() {
            _users = DatabaseService.searchUsers(input);
          });
        }
      },
    ),
  ),
  body: _users == null
      ? Center(child: Text('Search for users'))
      : FutureBuilder(
          future: _users,
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
            if (snapshot.data.documents.length == 0) {
              return Center(
                child: Text('No Users found! Please try again.'),
              );
            }
            return ListView.builder(
                itemCount: snapshot.data.documents.length,
                itemBuilder: (BuildContext context, int index) {
                  //User user = User.fromDoc(snapshot.data.documents[index]);
                  // Prevent current user to send messages to himself
                  return null;
                  // (widget.searchFrom != SearchFrom.homeScreen &&
                  //         user.id == _currentUserId)
                  //     ? SizedBox.shrink()
                  //     : _buildUserTile(user);
                });
          },
        ),
);
}

and this is the user tile

ListTile _buildUserTile(User user) {
return ListTile(
  leading: CircleAvatar(
    backgroundColor: Colors.grey,
    radius: 20.0,
    backgroundImage: user.profileImageUrl.isEmpty
        ? AssetImage(placeHolderImageRef)
        : CachedNetworkImageProvider(user.profileImageUrl),
  ),
  title: Row(
    children: [Text(user.name)],
  ),
  onTap: () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (_) => ProfileScreen()
            ),
          )
);
}

Hope it works, if something is missing then tell me.

Upvotes: 3

Related Questions