Flutter (14) Search Screen UI and Functionality

SearchScreen

• Search Screen 파일 생성 후 stateful widget 생성
  

• main 파일에 새로운 라우트 생성
  

• pageviews 폴더 안에 chat_list_screen 파일 안에 이동하는 네비게이터 생성
  

• screen search file 생성 후 레이아웃 잡는 코드 작성
  

• puspec.yaml 파일에 앱 바 디자인을 위한 종속성 추가
  

• gradient app bar 짜는 코드 작성
  

  

  searchAppBar(BuildContext context) {
      return GradientAppBar(
        gradient: LinearGradient(colors: [UniversalVariables.gradientColorStart, UniversalVariables.gradientColorEnd]),
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.pop(context),
        ),
        elevation: 0,
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(kToolbarHeight + 20),
          child: Padding(
            padding: EdgeInsets.only(left: 20),
            child: TextField(
              controller: searchController,
              onChanged: (val) {
                setState(() {
                  query = val;
                });
              },
              cursorColor: UniversalVariables.blackColor,
              autofocus: true,
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
                fontSize: 35,
              ),
              decoration: InputDecoration(
                suffixIcon: IconButton(
                  icon: Icon(Icons.close, color: Colors.white),
                  onPressed: () {
                    WidgetsBinding.instance
                        .addPostFrameCallback((_) => searchController.clear());
                  },
                ),
                border: InputBorder.none,
                hintText: "Search",
                hintStyle: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 35,
                  color: Color(0x88ffffff),
                ),
              ),
            ),
          ),
        ),
      );
    }

• firebase_repository 에 함수 선언 추가
  

• firebase_method 에 함수 작성하기
  

• 검색 기록 추천하는 위젯 생성
  

  

  buildSuggestion(String query) {
      final List<UserClass> suggestionList = query.isEmpty
          ? []
          : userList.where((UserClass user) {
        String? _getUsername = user.username?.toLowerCase();
        String _query = query.toLowerCase();
        String? _getName = user.name?.toLowerCase();
        bool? matchesUsername = _getUsername?.contains(_query);
        bool? matchesName = _getName?.contains(_query);
  
        return (matchesUsername! || matchesName!);
  
        // (User user) => (user.username.toLowerCase().contains(query.toLowerCase()) ||
        //     (user.name.toLowerCase().contains(query.toLowerCase()))),
      }).toList();
  
      return ListView.builder(
        itemCount: suggestionList.length,
        itemBuilder: ((context, index) {
          UserClass searchedUser = UserClass(
              uid: suggestionList[index].uid,
              profilePhoto: suggestionList[index].profilePhoto,
              name: suggestionList[index].name,
              username: suggestionList[index].username);
  
          return CustomTile(
            mini: false,
            onTap: () {},
            leading: CircleAvatar(
              backgroundImage: NetworkImage(searchedUser.profilePhoto!),
              backgroundColor: Colors.grey,
            ),
            title: Text(
              searchedUser.username!,
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
            subtitle: Text(
              searchedUser.name!,
              style: TextStyle(color: UniversalVariables.greyColor),
            ),
          );
        }),
      );
    }

• 잘 작동되는지 보기 위해 인스턴스 직접 추가 → 작동 확인