CupertinoSearchTextField

CupertinoSearchTextField는 Flutter의 Cupertino 라이브러리에 포함된 위젯으로, iOS 스타일의 검색 텍스트 필드를 제공합니다. 이 위젯은 iOS 13 및 이후 버전의 디자인을 모방하며, 주로 Flutter를 사용하여 iOS 앱을 만들 때 사용됩니다.

CupertinoSearchTextField의 주요 속성 및 특징은 다음과 같습니다:

1. controller: TextEditingController를 사용하여 텍스트 필드의 현재 텍스트를 가져오거나 수정할 수 있습니다.

2. onChanged: 텍스트 필드의 내용이 변경될 때마다 호출되는 콜백입니다.

3. onSubmitted: 사용자가 키보드의 제출 버튼을 눌렀을 때 호출되는 콜백입니다.

4. placeholder: 텍스트 필드에 아무 텍스트도 입력되지 않았을 때 표시되는 힌트 텍스트입니다.

5. prefix: 텍스트 필드의 앞쪽에 위젯(예: 아이콘)을 배치할 수 있습니다.

6. suffix: 텍스트 필드의 뒷쪽에 위젯을 배치할 수 있습니다.

7. clearButtonMode: 텍스트 필드에 텍스트가 있을 때 'x' 버튼을 표시하여 텍스트를 지울 수 있는 기능을 제어합니다.

간단한 예제로, 아래 코드는 CupertinoSearchTextField를 사용하여 iOS 스타일의 검색 텍스트 필드를 만드는 방법을 보여줍니다:

CupertinoSearchTextField(
  placeholder: 'Search',
  onChanged: (value) {
    print('The text has changed to: $value');
  },
  onSubmitted: (value) {
    print('Submitted text: $value');
  },
)

이 위젯을 사용하면, 앱 사용자는 iOS의 기본 검색 텍스트 필드와 동일한 사용자 경험을 얻을 수 있습니다. Flutter 앱이 iOS 디바이스에서 실행되는 경우에 이러한 Cupertino 위젯을 사용하면 사용자에게 일관된 경험을 제공할 수 있습니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Cupertino Search Text Field'),
      ),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: CupertinoSearchTextField(
            controller: _controller,
            onChanged: (value) {
              print('The text has changed to: $value');
            },
            onSubmitted: (value) {
              print('Submitted text: $value');
            },
            placeholder: 'Search for something...',
            prefix: Icon(
              CupertinoIcons.search,
              color: CupertinoColors.inactiveGray,
              size: 28,
            ),
            suffix: Icon(
              CupertinoIcons.xmark_circle_fill,
              color: CupertinoColors.inactiveGray,
              size: 28,
            ),
            clearButtonMode: OverlayVisibilityMode.editing,
          ),
        ),
      ),
    );
  }
}

이 예제에서:

1. TextEditingController를 통해 텍스트 필드의 텍스트를 가져오거나 수정합니다.
2. onChanged 콜백을 사용하여 텍스트가 변경될 때마다 해당 텍스트를 출력합니다.
3. onSubmitted 콜백을 사용하여 텍스트 필드에 입력한 텍스트를 제출할 때 해당 텍스트를 출력합니다.
4. placeholder를 사용하여 텍스트 필드에 아무런 텍스트도 입력되지 않았을 때 'Search for something...'라는 텍스트를 표시합니다.
5. prefix를 사용하여 검색 아이콘을 텍스트 필드 앞에 추가합니다.
6. suffix를 사용하여 텍스트 필드 뒤에 'x' 아이콘을 추가합니다.
7. clearButtonMode를 사용하여 텍스트 필드를 편집하는 동안 'x' 버튼이 표시되도록 합니다. 이 버튼을 누르면 텍스트 필드의 모든 내용이 삭제됩니다.