Flutter에서 Cupertino 검색 TextField를 만드는 방법은 무엇입니까?

Flutter의 Cupertino 검색 텍스트 필드는 iOS의 searchTextfield와 유사합니다. cupertinoSearchTextField 위젯을 사용하여 iOS 방식으로 searchTextField를 개발할 수 있습니다. 그 목적은 사용자가 검색어를 입력할 수 있는 텍스트 상자를 표시하는 것입니다. 시스템은 문의가 제출되면 사용자의 쿼리를 기반으로 결과를 반환합니다.

Cupertino는 iOS 디자인 패턴을 따르는 Flutter Widgets 세트입니다. 이러한 위젯의 목적은 iOS 기능을 iOS platform용으로 생성된 Flutter 앱에 통합하는 것입니다.

[caption id="attachment_19617"align="alignnone"width="750"]

이 튜토리얼에서는 예제를 통해 flutter에서 cupertino 검색 텍스트 필드를 사용하는 방법을 배웁니다. 또한 experienced Flutter developer 을 지원하는 다양한 속성을 사용하여 CupertinoSearchTextField 위젯을 사용자 정의하는 방법을 배웁니다.

Cupertino 검색을 생성하려면 CupertinoSearchTextField 클래스의 생성자를 호출하고 필요한 속성을 전달해야 합니다textfield in Flutter. Cupertino 검색 텍스트 필드에는 속성이 필요하지 않습니다. 생성자를 호출하기만 하면 만들 수 있습니다. 생성자에는 검색 텍스트 필드를 쉽게 수정할 수 있는 많은 요소가 있습니다.

Cupertino 검색 필드의 생성자를 살펴보겠습니다.

CupertinoSearchTextField(
{Key? key,
TextEditingController? controller,
ValueChanged<String>? onChanged,
ValueChanged<String>? onSubmitted,
TextStyle? style,
String? placeholder,
TextStyle? placeholderStyle,
BoxDecoration? decoration,
Color? backgroundColor,
BorderRadius? borderRadius,
EdgeInsetsGeometry padding = const EdgeInsetsDirectional.fromSTEB(3.8, 8, 5, 8),
Color itemColor = CupertinoColors.secondaryLabel,
double itemSize = 20.0,
EdgeInsetsGeometry prefixInsets = const EdgeInsetsDirectional.fromSTEB(6, 0, 0, 4),
Widget prefixIcon = const Icon(CupertinoIcons.search),
EdgeInsetsGeometry suffixInsets = const EdgeInsetsDirectional.fromSTEB(0, 0, 5, 2),
Icon suffixIcon = const Icon(CupertinoIcons.xmark_circle_fill),
OverlayVisibilityMode suffixMode = OverlayVisibilityMode.editing,
VoidCallback? onSuffixTap,
String? restorationId,
FocusNode? focusNode,
bool autofocus = false,
VoidCallback? onTap,
bool autocorrect = true,
bool? enabled}
)

CupertinoSearchTextField()의 몇 가지 중요한 속성을 살펴보겠습니다.

1. onChanged:

콜백 함수는 이 속성에 의해 허용될 수 있으며 텍스트 필드의 텍스트가 변경될 때마다 호출됩니다. 이 함수 내에서 수정된 텍스트를 검색하고 필요에 따라 사용할 수 있습니다. 예를 들어 쿼리와 관련이 있거나 쿼리와 일치하는 정보를 표시합니다.

2. 제출시:

사용자는 보내기 버튼을 클릭하거나 양식을 제출할 때 호출할 콜백 함수를 지정할 수 있습니다. 이 기능 내에서 제출된 텍스트를 검색하고 필요에 따라 사용할 수 있습니다.

3. 컨트롤러:

TextEditingController 컨트롤러 = new TextEditingController(text: '기본 텍스트');

CupertinoSearchTextField()의 스니펫을 살펴보겠습니다.

CupertinoSearchTextField(
          onChanged: (value){},
          onSubmitted: (value){},
          controller: controller,
        ),

전체 예:

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main()
{
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState()
  {
    return _MyHomePageState();
  }
}
class _MyHomePageState extends State<MyHomePage> {
  TextEditingController controller = new  TextEditingController(text:"Settings");
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("CupertinoSearchTextField"),
        ),
        body: CupertinoPageScaffold(
          child: Center(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: CupertinoSearchTextField(
                controller: controller,
                onChanged: (value) {},
                onSubmitted: (value) {},
                autocorrect: true,
              ),
            ),
          ),
        ),
      );
  }
}

산출

결론

그래서 이번 글에서는 쿠퍼티노 검색 텍스트필드에 대해 알아보았습니다. Flutter에서 Cupertino 검색 텍스트 필드를 사용 및 생성하는 방법에 대한 지침이 명확했으면 합니다. Flutter Agency는 잘 알려진 회사Flutter development company in the USA로 기업용 맞춤형 모바일 애플리케이션 솔루션을 제공합니다. CupertinoSearchTextField 위젯은 Cupertino 검색 텍스트 필드를 표시하는 예제에서도 사용되었습니다.