Виджеты Flutter2 - Ссылка | RawAutoComplete | КупертиноФормаРаздел

Ссылка | RawAutoComplete | CupertinoFormSection и другие

Какие были новые виджеты во Flutter2?

Статья здесь: https://flatteredwithflutter.com/widgets-in-flutter2/

Вступление

Уровень: начальный

Посмотреть демо здесь

Веб-сайт: https://web.flatteredwithflutter.com/#/

Мы кратко расскажем о

1. "Ссылка"
2. CupertinoSearchTextField
3. CupertinoFormSection
4. CupertinoFormRow
5. CupertinoTextFormFieldRow
6. ScaffoldMessenger
7. RawAutoComplete

Ссылка

По словам Криса Селлса, менеджера по продукции Flutter

Flutter заложил основу для создания интерактивных веб-приложений. В первую очередь мы сосредоточились на производительности и улучшении точности рендеринга.

Одной из таких специфичных для Интернета функций является Виджет ссылок.

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

Примечание. Этот виджет находится внутри пакета url_launcher

Купертино

В реализацию языка дизайна Купертино было добавлено несколько виджетов iOS.

Одно из них - CupertinoSearchTextField.

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, строки, разделители между строками и границы сверху и снизу строк.

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:

ScaffoldMessenger был создан для решения ряда проблем, связанных с SnackBar,

• возможность легко создать SnackBar в ответ на действие AppBar,
• создание SnackBars для сохранения между переходами Scaffold,
• возможность отображать SnackBars по завершении асинхронного действия, даже если пользователь перешел на страницу с другим шаблоном.

FloatingActionButton(
  child: const Icon(Icons.add_alert),
  onPressed: () {
    final messenger = ScaffoldMessenger.of(context);
    messenger.showSnackBar(
      SnackBar(content: Text('Hey Snackbar!')),
    );
  },
);

• Мы получаем ScaffoldMessengerState для текущего BuildContext через ScaffoldMessenger.of.
• Для отображения закусочной мы используем функцию ScaffoldMessengerState.showSnackBar.

RawAutocomplete

Виджет, помогающий пользователю сделать выбор путем ввода текста и выбора из списка вариантов.

// 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 представляет тип опций. В нашем случае это String.
• Пользовательский ввод текста поступает в поле, построенное с параметром fieldViewBuilder.
• Отображаемые параметры определяются с помощью optionsBuilder.
• Наконец, параметры отображаются с помощью optionsViewBuilder.

Source code. or Gist

Интересные статьи, связанные с Flutter, здесь: