[flutter] 플러터 Wrap을 사용하여 앱의 자동 완성 기능을 구현하는 방법

07 Dec 2023

flutter

앱에 자동 완성 기능을 구현하려면 사용자가 입력한 텍스트를 기반으로 가능한 옵션을 표시하고 선택할 수 있어야 합니다. Flutter에서 Wrap 위젯은 이러한 기능을 구현하는 데 매우 효과적인 방법입니다.

Wrap 위젯 소개

Wrap은 자식 위젯을 줄 바꿈하여 배치하는데 사용되는 플러터의 유용한 위젯입니다. 자식 위젯들을 가로로 배열하다가 화면 가로 길이를 초과하게 되면 자동으로 다음 줄로 넘어가게 됩니다.

자동 완성 기능 구현하기

자동 완성 기능을 구현하려면 다음 단계를 따라 진행할 수 있습니다.

사용자 입력을 받을 텍스트 필드 위젯을 생성합니다.
입력된 텍스트를 기반으로 가능한 옵션들을 필터링하여 리스트를 생성합니다.
Wrap 위젯을 사용하여 옵션들을 표시합니다.
옵션을 선택할 수 있는 버튼들을 생성하고, 버튼을 누를 때마다 선택된 옵션을 출력합니다.

예제 코드

import 'package:flutter/material.dart';

class AutoCompleteApp extends StatefulWidget {
  @override
  _AutoCompleteAppState createState() => _AutoCompleteAppState();
}

class _AutoCompleteAppState extends State<AutoCompleteApp> {
  List<String> options = [
    'Apple',
    'Banana',
    'Orange',
    'Pineapple',
    'Strawberry',
  ];

  String selectedOption = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AutoComplete App'),
      ),
      body: Column(
        children: [
          TextField(
            onChanged: (value) {
              // 입력된 텍스트를 기반으로 옵션들을 필터링
              List<String> filteredOptions = options
                  .where((option) =>
                      option.toLowerCase().contains(value.toLowerCase()))
                  .toList();

              setState(() {
                selectedOption = '';
              });

              if (filteredOptions.isNotEmpty) {
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: Text('Options'),
                    content: Wrap(
                      spacing: 8.0,
                      children: filteredOptions
                          .map(
                            (option) => ElevatedButton(
                              onPressed: () {
                                setState(() {
                                  selectedOption = option;
                                });
                                Navigator.of(context).pop();
                              },
                              child: Text(option),
                            ),
                          )
                          .toList(),
                    ),
                  ),
                );
              }
            },
          ),
          SizedBox(height: 16.0),
          Text('Selected Option: $selectedOption'),
        ],
      ),
    );
  }
}

void main() {
  runApp(AutoCompleteApp());
}

코드 설명

options 리스트에 가능한 옵션들을 설정합니다.
TextField 위젯을 사용하여 사용자의 입력을 받습니다. onChanged 콜백을 사용하여 입력이 변경될 때마다 실행되는 로직을 구현합니다.
입력된 텍스트와 일치하는 옵션들을 필터링하여 filteredOptions 리스트를 생성합니다.
옵션이 존재할 경우 showDialog 메소드를 사용하여 AlertDialog를 표시합니다.
Wrap 위젯을 사용하여 filteredOptions의 각 옵션들을 버튼으로 표시합니다.
버튼을 누를 때마다 selectedOption을 업데이트하고, AlertDialog를 닫습니다.
선택된 옵션을 출력하기 위해 Text 위젯을 사용합니다.

위의 예제 코드를 실행하면 앱의 화면 상단에 TextField가 나타나며, 사용자가 입력을 할 때마다 해당하는 옵션들이 아래에 표시됩니다. 사용자는 원하는 옵션을 선택할 수 있고, 선택한 옵션은 상단에 출력됩니다.

이와 같은 방식으로 Wrap 위젯을 사용하여 플러터 앱에서 자동 완성 기능을 구현할 수 있습니다.

결론

Wrap 위젯은 자동 완성 기능과 같이 유동적인 화면에 최적화된 위젯으로, 플러터 앱에서 다양한 사용자 인터페이스 기능을 구현하는 데 유용합니다. 자동 완성 기능을 구현하려면 Wrap 위젯을 적절하게 활용하여 옵션을 표시하고 선택할 수 있는 버튼들을 생성하면 됩니다.