pub에 발표된 진동 필터 목록 패키지 v.0.05.개발

16126 단어 widgetpackageflutter
FilterList는 문자열 목록의 데이터를 쉽게 필터링하기 위한 flatter 플러그인입니다.

변경 로그

  • FilterListWidget 위젯을 추가합니다.
  • 필터 목록입니다.showFilterList에서 FilterListDialog로 이름을 바꿉니다.모니터
  • 응용 프로그램 추가 단추를 누르면 FilterListDialog에서 선택한 텍스트 목록으로 돌아갑니다.진열하다
  • 패키지 링크: - https://pub.dev/packages/filter_list
    데모 응용 프로그램 링크: - https://github.com/TheAlphamerc/flutter_plugin_filter_list/releases/download/v0.0.5/app-release.apk
    소스 코드: - https://github.com/TheAlphamerc/flutter_plugin_filter_list

    데이터 흐름

  • 문자열 목록을 FilterListDialog.display() 에 전달합니다.
  • 미리 선택한 텍스트를 표시하기 위해 선택한 문자열 목록을 전달합니다. 그렇지 않으면 무시합니다.
  • 필터 대화상자를 표시하기 위해 방법 FilterListDialog.display 을 호출합니다.
  • 목록에서 선택합니다.
  • 단추를 클릭하여 목록에서 모든 텍스트를 선택합니다.
  • 단추를 클릭하여 모든 텍스트 선택을 취소합니다.
  • 버튼을 클릭하여 선택한 문자열 목록으로 돌아갑니다.
  • 아이콘을 클릭하여 대화 상자를 닫고 빈 값으로 돌아갑니다.
  • 아무 선택도 하지 않음 All 단추가 누르면 빈 문자열 목록을 되돌려줍니다.
  • 입문


    1.pubspec에 라이브러리를 추가합니다.아마르


    dependencies:
      filter_list: ^0.0.5
    

    2.dart 파일의 가져오기 라이브러리


    import package:filter_list/filter_list.dart';
    

    3. FilterList 사용 방법


    문자열 목록 만들기


      List<String> countList = [
        "One",
        "Two",
        "Three",
        "Four",
        "Five",
        "Six",
        "Seven",
        "Eight",
        "Nine",
        "Ten",
        "Eleven",
        "Tweleve",
        "Thirteen",
        "Fourteen",
        "Fifteen",
        "Sixteen",
        "Seventeen",
        "Eighteen",
        "Nineteen",
        "Twenty"
      ];
      List<String> selectedCountList = [];
    

    함수를 만들고 단추를 눌렀을 때 리셋을 호출합니다


      void _openFilterDialog() async {
        await FilterListDialog.display(
          context,
          allTextList: countList,
          height: 480,
          borderRadius: 20,
          headlineText: "Select Count",
          searchFieldHintText: "Search Here",
          selectedTextList: selectedCountList,
          onApplyButtonClick: (list) {
            if (list != null) {
              setState(() {
                selectedCountList = List.from(list);
              });
            }
            Navigator.pop(context);
          });
      }
    

    닫기 단추를 눌렀을 때 필터 대화상자를 표시하기 위해 응용 기능을 호출합니다


      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: _openFilterDialog,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
            /// check for empty or null value selctedCountList
            body: selectedCountList == null || selectedCountList.length == 0
                ? Center(
                    child: Text('No text selected'),
                  )
                : ListView.separated(
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text(selectedCountList[index]),
                      );
                    },
                    separatorBuilder: (context, index) => Divider(),
                    itemCount: selectedCountList.length));
      }
    

    필터 작은 위젯을 표시하려면 를 사용하여 문자열 목록을 적용하고 전달합니다.


    class FilterPage extends StatelessWidget {
      const FilterPage({Key key, this.allTextList}) : super(key: key);
      final List<String> allTextList;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Filter list Page"),
          ),
          body: SafeArea(
            child: FilterListWidget(
              allTextList: allTextList,
              height: MediaQuery.of(context).size.height,
              hideheaderText: true,
              onApplyButtonClick: (list) {
                if(list != null){
                  print("selected list length: ${list.length}");
                }
              },
            ),
          ),
        );
      }
    }
    

    화면 캡처


    목록에서 텍스트를 선택하지 않았습니다.
    FilterList 위젯
    선택
    목록에서 선택한 텍스트




    닫기 아이콘 숨기기
    숨겨진 텍스트 필드
    숨겨진 제목 텍스트
    전체 제목 숨기기




    사용자 정의 제어 버튼
    선택한 텍스트 사용자 정의
    선택되지 않은 텍스트 사용자 정의
    텍스트 필드 배경색 사용자 정의




    FilterListWidget
    해당되지 않음
    해당되지 않음
    해당되지 않음




    매개변수 및 값

    FilterListDialog.display() 유형: 이중
  • 필터 대화 상자의 높이를 설정합니다.
  • _openFilterDialog 유형: 이중
  • 필터 대화 상자의 폭을 설정합니다.
  • floatingActionButton 유형: 이중
  • 필터 대화상자의 경계 반지름을 설정합니다.
  • FilterListWidget 유형: List()
  • 필터 대화상자를 텍스트 목록으로 채웁니다.
  • height 유형: List()
  • 필터 대화 상자에 선택한 텍스트를 표시합니다.
  • width 유형: 문자열
  • 필터 대화 상자의 제목 텍스트를 설정합니다.
  • borderRadius 유형: 문자열
  • 검색 필드에 프롬프트 텍스트를 설정합니다.
  • allTextList 유형: bool
  • 선택한 텍스트 수를 숨깁니다.
  • selectedTextList 유형: bool
  • 검색 텍스트 필드를 숨깁니다.
  • headlineText 유형: bool
  • 닫기 아이콘을 숨깁니다.
  • searchFieldHintText 유형: bool
  • 필터 대화상자에서 전체 제목 부분을 숨깁니다.
  • hideSelectedTextCount 유형: 컬러
  • 닫기 아이콘의 색상을 설정합니다.
  • hideSearchField 유형: 컬러
  • 머리글 텍스트의 색상을 설정합니다.
  • hidecloseIcon 유형: 컬러
  • 적용 버튼의 텍스트 색상을 설정합니다.
  • hideheader 유형: 컬러
  • 적용 버튼의 배경색을 설정합니다.
  • closeIconColor 유형: 컬러
  • 모든 및 재설정 버튼의 텍스트 색상을 설정합니다.
  • headerTextColor 유형: 컬러
  • 필터 대화상자에서 선택한 텍스트의 색상을 설정합니다.
  • applyButonTextColor 유형: 컬러
  • 선택한 텍스트 필드의 배경색을 설정합니다.
  • applyButonTextBackgroundColor 유형: 컬러
  • 선택되지 않은 텍스트 필드의 배경색을 설정합니다.
  • allResetButonColor 유형: 컬러
  • 필터 대화상자
  • 에서 선택되지 않은 텍스트의 텍스트 색상 설정selectedTextColor 유형: 컬러
  • 검색 필드의 배경색을 설정합니다.
  • selectedTextBackgroundColor 유형: 컬러
  • 필터 색상의 배경색을 설정합니다.
  • unselectedTextbackGroundColor 유형 함수(목록)
  • 적용 버튼을 클릭하면 문자열 목록으로 돌아갑니다
  • 공헌


    기존 기능을 변경하거나 본 재구매 계약에 새 기능을 추가하려는 경우
    저희contribution guide를 보십시오.
    및 발송pull request.나는 모든pull 요청을 환영하고 격려한다.나는 보통 24-48시간 내에 어떤 질문이나 요청에 회답할 것이다.

    프로젝트 작성 및 관리자


    Sonu Sharma ( ) ( ) ( )

    좋은 웹페이지 즐겨찾기