Flutter2 위젯 - 링크 | RawAutoComplete | CupertinoFormSection

도움이 되었다면 :)


웹사이트: https://web.flatteredwithflutter.com/#/



대해 간략하게 다룰 예정입니다.

Link

CupertinoSearchTextField

CupertinoFormSection

CupertinoFormRow

CupertinoTextFormFieldRow

ScaffoldMessenger

RawAutoComplete

링크

Flutter의 제품 관리자인 Chris Sells가 인용한 내용

Flutter는 풍부한 대화형 웹 애플리케이션을 구축하기 위한 기반을 구축했습니다. 우리는 주로 성능과 렌더링 충실도 개선에 중점을 두었습니다.

이러한 웹 관련 기능 중 하나는 Link widget입니다.

Link(
   uri: Uri.parse('https://flatteredwithflutter.com'),
   builder: (_, followLink) {
     return ElevatedButton(
        onPressed: followLink,
        child: Text('Click me!!'),
     );
   },
);

참고: 이 위젯은 url_launcher package 안에 있습니다.

Cupertino검색텍스트필드

Cupertino 디자인 언어 구현에 iOS 위젯이 거의 추가되지 않았습니다.

그 중 하나는 CupertinoSearchTextField

Flutter2 Widgets - Link | RawAutoComplete | CupertinoFormSection

CupertinoSearchTextField(
  onChanged: (value) {
    print('Search text: ' + value);
  },
  onSubmitted: (value) {
    print('Search Submitted text: ' + value);
  },
  suffixIcon: const Icon(Icons.search),
);

사용자가 입력을 시작하면 onChanged가 호출됨

사용자가 완료 버튼(키보드)을 누르면 onSubmitted가 호출됩니다.

CupertinoFormSection 및 CupertinoFormRow

iOS 스타일 양식 섹션.

문서에 따라:

CupertinoFormSection의 기본 생성자는 iOS 스타일 헤더, 행, 행 사이의 구분선, 행의 상단과 하단에 있는 테두리를 포함하는 edge-to-edge 스타일 섹션을 구성합니다.

Flutter2 Widgets - Link | RawAutoComplete | CupertinoFormSection

CupertinoFormSection(
   header: Text('CupertinoFormRow'),
   children: <Widget>[
      CupertinoFormRow(
         child: CupertinoSwitch(
            value: toggleValue,
            onChanged: (value) {
              setState(() => toggleValue = value); 
            ),
            prefix: Text('Toggle'),
            helper: Text('Slide me'),
            error: toggleValue ? null : Text('Not slided'),
      ),
   ],
),

필수 하위 매개변수가 있는 CupertinoFormSection을 초기화합니다

.

양식에 머리글 및 바닥글 속성이 있습니다.

CupertinoFormRow

표준 접두사 및 하위 위젯이 있는 iOS 스타일 분할 양식 행을 생성합니다.

양식 아래에 표시되는 오류 및 도우미 위젯을 위한 공간을 제공합니다.

CupertinoTextFormFieldRow

문서에 따라

CupertinoFormRow을 래핑하는 FormField을 포함하는 CupertinoTextField을 생성합니다.

CupertinoFormSection(
   header: Text('CupertinoTextFormFieldRow '),
   children: <Widget>[
     CupertinoTextFormFieldRow(
       controller: _textController,
       onChanged: (value) {
          print('TextFormField text: ' + value);
       },
       onFieldSubmitted: (value) {
          print('TextFormField Submitted text: ' + value);
       },
     ),
   ],
),

TextEditingController 인스턴스를 전달합니다.

사용자가 입력을 시작하면 onChanged가 호출됨

사용자가 완료 버튼(키보드)을 누르면 onFieldSubmitted가 호출됩니다.

발판메신저

자손 SnackBar 에 대한 Scaffold 을 관리하는 데 사용됩니다. 이 클래스는 스낵바를 표시하기 위한 API를 제공합니다.



ScaffoldMessenger를 만든 이유:



The ScaffoldMessenger는 SnackBar와 관련된 여러 가지 문제를 해결하기 위해 만들어졌으며,

AppBar 작업에 대한 응답으로 SnackBar를 쉽게 생성하는 기능,

Scaffold 전환 간에 지속되는 SnackBars 만들기,

사용자가 다른 Scaffold가 있는 페이지로 이동한 경우에도 비동기 작업 완료 시 SnackBar를 표시할 수 있습니다.

Flutter2 Widgets - Link | RawAutoComplete | CupertinoFormSection

FloatingActionButton(
  child: const Icon(Icons.add_alert),
  onPressed: () {
    final messenger = ScaffoldMessenger.of(context);

    messenger.showSnackBar(
      SnackBar(content: Text('Hey Snackbar!')),
    );
  },
);

• We obtain the ScaffoldMessengerState for the current BuildContext via ScaffoldMessenger.of.

• For showing the snackbar, we use the ScaffoldMessengerState.showSnackBar function.

RawAutocomplete

A widget for helping the user make a selection by entering some text and choosing from among a list of options.

// RawAutocomplete<T>
RawAutocomplete<String>(
   optionsBuilder: (TextEditingValue textEditingValue) {
      // YOUR LOGIC
   },
   onSelected: (String selection) {
     // YOUR LOGIC 
   },
   fieldViewBuilder: (_,
        TextEditingController textEditingController,
        FocusNode focusNode,
        VoidCallback onFieldSubmitted) {
     // YOUR LOGIC
   },
   optionsViewBuilder: (_,
         AutocompleteOnSelected<String> onSelected,
         Iterable<String> options) {
     // YOUR LOGIC  
   ),
)

유형 매개변수 T는 옵션의 유형을 나타냅니다. 우리의 경우 이것은 문자열입니다.

사용자의 텍스트 입력은 fieldViewBuilder 매개변수로 작성된 필드에서 수신됩니다.

표시할 옵션은 optionsBuilder을 사용하여 결정됩니다.

마지막으로 옵션은 optionsViewBuilder 을 사용하여 표시됩니다.

웹사이트: https://web.flatteredwithflutter.com/#/

도움이 되었다면 :)


Source code. 또는 Gist