Flutter (14) Search Screen UI and Functionality

Huisu·2023년 3월 11일
0

Flutter

목록 보기
14/21
post-thumbnail
post-custom-banner

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),
              ),
            );
          }),
        );
      }
  • 잘 작동되는지 보기 위해 인스턴스 직접 추가 → 작동 확인

post-custom-banner

0개의 댓글