[flutter] 플러터 Checkbox 자동완성 기능 추가하기

07 Dec 2023

flutter

플러터(Flutter)에서 체크박스를 사용할 때 사용자에게 편의를 제공하기 위해 자동완성 기능을 추가하는 방법에 대해 알아보겠습니다.

1. 패키지 추가하기

먼저, 프로젝트에 사용할 패키지를 추가해야 합니다. 이 예시에서는 autocomplete_textfield 패키지를 사용합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가해주세요.

dependencies:
  autocomplete_textfield: ^1.7.0

변경된 내용을 적용하기 위해 터미널에서 flutter packages get 명령을 실행해주세요.

2. 체크박스 자동완성 필드 생성하기

다음으로, 체크박스 자동완성 필드를 생성해야 합니다. 아래와 같이 코드를 작성해주세요.

import 'package:flutter/material.dart';
import 'package:autocomplete_textfield/autocomplete_textfield.dart';

class CheckboxAutocomplete extends StatefulWidget {
  @override
  _CheckboxAutocompleteState createState() => _CheckboxAutocompleteState();
}

class _CheckboxAutocompleteState extends State<CheckboxAutocomplete> {
  AutoCompleteTextField<String> textField;

  GlobalKey<AutoCompleteTextFieldState<String>> key = GlobalKey();

  List<String> options = [
    'Option 1',
    'Option 2',
    'Option 3',
    // 다른 옵션들 추가
  ];

  String selectedOption = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Checkbox Autocomplete'),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            children: [
              textField = AutoCompleteTextField<String>(
                key: key,
                decoration: InputDecoration(
                  hintText: 'Search',
                ),
                itemSubmitted: (item) {
                  setState(() => selectedOption = item);
                },
                itemBuilder: (context, item) {
                  return ListTile(
                    title: Text(item),
                  );
                },
                itemCount: options.length,
              ),
              SizedBox(height: 16),
              Text('Selected Option: $selectedOption'),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서는 autocomplete_textfield 패키지를 사용하여 자동완성 기능을 구현하였습니다. 필요한 경우 options 리스트에 다른 옵션들을 추가할 수 있습니다.

3. 체크박스 필터링 기능 추가하기

이제 체크박스를 필터링하는 기능을 추가해보겠습니다. 체크박스 전체 옵션과 사용자가 입력한 텍스트로 필터링된 옵션을 보여주도록 코드를 수정해주세요. 아래와 같이 코드를 변경해주세요.

String selectedOption = '';
List<String> filteredOptions = [];

@override
void initState() {
  super.initState();
  filteredOptions = options;
}

// ...

textField = AutoCompleteTextField<String>(
  // ...
  itemSubmitted: (item) {
    setState(() => selectedOption = item);
  },
  itemBuilder: (context, item) {
    return ListTile(
      title: Text(item),
    );
  },
  itemCount: filteredOptions.length,
  suggestions: filteredOptions,
);

아래와 같이 텍스트 필터링 기능을 추가할 수 있습니다.

textField.onTextChanged: (text) {
  setState(() {
    filteredOptions = options
        .where((option) =>
            option.toLowerCase().contains(text.toLowerCase()))
        .toList();
    // 필터링된 옵션 리스트를 업데이트합니다.
  });
},

결론

이제 플러터에서 Checkbox 자동완성 기능을 추가하는 방법에 대해 알아보았습니다. autocomplete_textfield 패키지를 사용하여 체크박스 필터링과 텍스트 자동완성을 구현할 수 있습니다. 자동완성 기능을 추가하여 사용자의 경험을 향상시켜보세요.