flutter_form_builder 패키지 사용법

flutter에서는 TextFormField를 제공하여 Form 제공에 다양한 기능을 제공하고 있다

그러나 TextFormField에 비해 좀 더 편리한 것 같아 내용을 정리한다.

각자 사용에서 좋아하는 패턴이 있으니, 선택은 본인이 하는 것이다.

 

1. pubspec.yaml 파일의

  dependencies:

    ....

    flutter_form_builder:^3.14.0

을 추가한다. (버전은 여기서 확인한다. pub.dev/packages/flutter_form_builder)

 

2. AutoComplete 기능을 사용한다면 데이터를 선언한다.

예) const regions = [

      {

         "_id": "123445676",

        "dong": "2323",

        "name": "seoul",

     },

    {

        ....

    }

 

3.  FormBuilder에 사용할 글로벌 키를 만든다

    Globalkey<FormBuildState> _fbkey = Globalkey<FormBuildState>( );

    bool autovalidate = false  <- FormBuilder에서 자동으로 validate를 실행하도록 하기 위한 변수

 

4. FormBuilder(

    key: _fbkey  <- 3번에서 선언된 Global key

    child: Column(

      children:

         FormBuilderDateTimePicker(     <- 날자 출력 부분을 클릭하면 날자 선택할 수 있는 달력 창이 자동 생성

           attribute: 'data',       <- 필수: 입력되는 값들의 map을 만드는데, map에 사용되는 key 값으로 사용

           autovalidate: autovalidate,  <- true/false에 따라 validate를 자동으로 할지를 선택한다

           ....

           validators: [       <- 다수의 validator를 사용할 수 있는 복수를 제공한다.

             FormBuilderValidators.required(errorText: AAA,

             ),               <- 입력된 값이 없으면 AAA를 출력한다.

             (val) {       <- 입력된 값이 전달된다

               print( val is DateTime);   <- true 가 출력되어 val은 DateTime type이다

               final sd = _fbkey.currentState.fields['data'].currentState.value;  <- attribute 값을 참조로 sd에 값을 가져옴

               if(sd.isAfter(val)) {

                 return '에러입니다';   <- '에러입니다' 라는 메시지 출력 

               }

               return null;        <- validator 통과..에러 없음

           ]

 

5. validation 실행

void _submit( ) {

  setState(( ) {

    autovalidate = true;   <- 한번 sumit 키를 누른 후에 자동 validate가 적용된다

  }

  if(!_fbkey.currentState.validate( )) {    <- 3번에 선언된 validators 함수들을 수행

    return;

  }

  _fbkey.currentState.save( )   <- validator를 통과했음으로 값들을 저장

  final inputvalues= _fbkey.currentState.value;

 

  print( _fbkey.currentState.value );

   -> { data: 2020-10-12, aaa: 2020-10-13 }  <- map 형태의 데이타 출력. 즉 { attribute, data } 형태로 저장됨

 

 }

 

6. FormBuilderDropdown(

    attribute: 'cropid',        <- 필수 요소임

    items: crops.map<DropdownMenuItem<String>> ((crop) {

      return DropdownMenuItem<String>(value: crop['id'], 

      child: Text(crop['cropName]));

    }).toList( ),     <- map 함수는 list 타입으로 반환해야 한다.

    hint: Text('품종을 선택'),

    decoration: InputDecoration(

      filled: true,

      labelText: '품종',

      border: OutlineInputBorder( ),

    ),

    validators: [      <- 필수 요소임

      FormBuilderValidators.required( errorText: 'AAA'),

    ]

 

7. 6. 자동 완성 폼빌더

 List<String> getSuggestion(String query) {

  if(query.isEmpty) {

    return [ ];

  }

  List<String> matches = [ ];

  final regionNames = regions.map((region) {

    return region['regionName'];

  }).toList( );

 

  matches.addAll(regionNames);   

  matches.retainWhere((s) => s.contains(query));

)

 

bool _checkRegionName(String regionName ) {

  final foundRegion = regions.firstWhere((region) => {

    return region['regionName'] == regionName;

  }, orElse: ( ) => null);      <- regionName이 없다면 

 

  return foundRegion == null ? false: true;

}

 

 

  FormBuilderTypeAhead(

    attribute: 'regionName',        <- 필수 요소임

    hint: Text('시군구를 입력하면 자동 완성됩니다.'),

    decoration: InputDecoration(

      filled: true,

      labelText: '시군구',

      border: OutlineInputBorder( ),

    ),

    validators: [      <- 필수 요소임

      FormBuilderValidators.required( errorText: 'AAA'),    <- 입력이 없으면 AAA가 출력

      (val) {      <- val에는 regionName이 넘어옴

        if( !_checkRegionName ) {

          return '잘못된 지역 이름'

        }

        return null;

    ],

    suggestionsCallback: (pattern) {    <- pattern은 사용자 입력 스트링

      return getSuggestion(pattern);    <- 사용자가 만들어 주어야 함

    },

    itemBuilder: (context, suggestion) {    <- suggestion은 getSuggestion( )에서 리턴된 String 들

     return ListTile(

       title: Text(suggestion),

     );

 

 

 

 

 

 

참고영상: www.youtube.com/watch?v=M_0CE-IgurY