👨‍💻
Flutter
  • 👨‍💻Flutter lessons
    • 🎨Flutter ui
      • 🚵‍♂️Travel app
        • 📱1. Lesson
        • 📱2.Lesson
      • 📚Books store
      • 🧑‍⚕️Doctor app
      • 🚖Taxi app
    • 🐦Основы Flutter
      • Page 1
      • Page 2
      • 🧑‍🏫Урок 1: Основные виджеты Flutter
        • Page
        • 🧩Container()
        • 🧩AppBar()
        • 🧩Text()
        • 🧩Icon()
        • 🧩Column()
        • 🧩Row()
        • 🧩TextButton()
        • 🧩ElevatedButton()
      • 🧑‍🏫Урок 2: Создаем UI
      • 🧑‍🏫Урок 3: Создаем UI
      • 🧑‍🏫Урок 4: Создаем UI
    • 🧩Основы dart
      • 🧑‍🏫01. Переменные часть 1
      • 🧑‍🏫01. Переменные часть 2
      • 🧑‍🏫02. Функции
      • 🧑‍🏫03. Условные операторы
      • 🧑‍🏫04. List
      • 🧑‍🏫05. Map
      • 🧑‍🏫06. Class
      • 🧑‍🏫07. Наследование
      • 🧑‍🏫08. Абстракция
      • 🧑‍🏫09. Интерфейсы
      • 🧑‍🏫10. Инкапсуляция
      • 🧑‍🏫11. Mixin
      • 🧑‍🏫12. Асинхронное программирование
      • 🧑‍🏫13. Streams
      • 🎯Final project
        • 🥦Grocery app
        • 🏠Home
    • ⚒️State management
      • ⬛Bloc
        • 1. Введение cubit
          • 1.1 Пример
          • 1.2 Пример
          • 1.3 Пример
          • 1.4 Пример
          • 1.5 Пример
        • 2. Введение в Bloc
      • 🌊Riverpod
    • 🏠Architechture
      • Clean Architechture
      • Bloc
    • 📲Locale storage
      • 🐝Hive
        • 🐝Ui
        • 🐝Hive - локальное хранилище: Введение
        • 🐝Hive - task app: часть 1
        • 🐝Hive - task app: часть 2
        • 🐝Hive - task app: часть 3
        • 🐝Hive - task app: часть 4
        • 🐝Hive - task app: часть 5
      • 🟩Sql
    • 📡Server
      • 📡Server - Lesson01 introduction
      • 📡Server - Lesson02 get data
      • 📡Server - Lesson03 News App get data
    • 🖥️Готовый backend
      • Firebase
      • Supabase
  • 🎯Dart practise
    • 🧑‍💻Переменные
      • 🧑‍💻String
      • 🧑‍💻int
      • 🧑‍💻double
      • 🧑‍💻bool
    • 🧑‍💻Функции
      • 🧑‍💻Обычные функции
      • 🧑‍💻Порядковые параметры
      • 🧑‍💻Обязательные параметры
      • 🧑‍💻Параметры по умолчанию
      • 🧑‍💻Функции-стрелки
      • 🧑‍💻Возвращаемые функции
    • 🧑‍💻Условные операторы
      • 🧑‍💻if/else
      • 🧑‍💻switch/case
      • 🧑‍💻тернарный оператор
    • 🧑‍💻Структура данных
      • 🧑‍💻List
      • 🧑‍💻Map
      • 🧑‍💻Set
    • 🧑‍💻ООП
  • 🧩Flutter Widgets
    • 💻Все виджеты
    • 🎞️Анимации
      • 🧩AnimatedContainer
      • 🧩AnimatedOpacity
      • 🧩AnimatedAlign
      • 🧩AnimatedCrossFade
      • 🧩Hero
      • 🧩AnimatedBuilder
      • 🧩AnimatedPositioned
      • 🧩AnimatedSwitcher
    • 🏗️Манипуляция пространством
      • 🧩Padding
      • 🧩SizedBox
      • 🧩Align
      • 🧩Center
      • 🧩Expanded
      • 🧩Flexible
      • 🧩Spacer
      • 🧩Column
      • 🧩Stack
      • 🧩Row
    • ✍️Отображение текста
      • 🧩RichText
      • 🧩FittedBox
      • 🧩SelectableText
      • 🧩Text
    • 📸Отображение изображений
      • 🧩Image()
      • 🧩Image.network
      • 🧩Image.asset
      • 🧩Image.file
      • 🧩Image.memory
      • 🧩FadeInImage
      • 🧩NetworkImage
      • 🧩AssetImage
    • 📃Списки и прокрутка
      • 🧩ListView()
      • 🧩ListView.builder()
      • 🧩GridView()
      • 🧩GridView.builder()
      • 🧩PageView()
      • 🧩SingleChildScrollView
      • 🧩CustomScrollView
      • 🧩ReorderableListView
      • 🧩NestedScrollView
    • ⌨️Кнопки
      • 🧩TextButton()
      • 🧩ElevatedButton()
      • 🧩IconButton()
      • 🧩DropDownButton()
      • 🧩FloatingActionButton
      • 🧩Checkbox
      • 🧩Radio
      • 🧩Switch
      • 🧩Slider
    • 📝Формы и ввод данных
      • 🧩TextField()
      • 🧩TextFormField
      • 🧩Form
      • 🧩FormField
      • 🧩DatePicker
      • 🧩TimePicker
    • 🧑‍🏫Диалоги и всплывающие окна
      • 🧩AlertDialog
      • 🧩SimpleDialog
      • 🧩BottomSheet
      • 🧩ExpansionPanel
      • 🧩SnackBar
      • 🧩PopupMenuButton
      • 🧩Tooltip
      • 🧩Dialog
    • 🛣️Навигация
      • 🧩BottomNavigationBar()
      • 🧩Navigator
      • 🧩Drawer
      • 🧩TabBar
    • 📱Отображение на экране
      • 🧩Scaffold
      • 🧩Container()
      • 🧩AppBar()
      • 🧩Icon()
      • 🧩Stepper()
  • 🎮Flutter Flame
    • Введение в разработку игр
  • 🔬Flutter projects
  • 🧑‍🎓Homeworks for everyday
    • 🧑‍🎓0. Переменные
    • 🧑‍🎓1. Функции - 1
    • 🧑‍🎓2. Функции - 2
    • 🧑‍🎓3. Условные операторы
    • 🧑‍🎓4. List
    • 🧑‍🎓5. Map
    • 🧑‍🎓6. class
    • 🐝Hive -
    • 🐝Hive clean architecture
    • 📡HTTP
    • 📡HTTP clean architecture
    • 💾Firebase
    • 💾Firebase clean architecture
Powered by GitBook
On this page
  1. Flutter Widgets
  2. Формы и ввод данных

TextField()

1. controller

Контролирует содержимое текстового поля и позволяет получать или изменять текст программно.

// Some code
TextEditingController _controller = TextEditingController();

TextField(
  controller: _controller,
)

2. focusNode

Управляет фокусом текстового поля. С его помощью можно программно устанавливать или снимать фокус с поля

// Some code
FocusNode _focusNode = FocusNode();

TextField(
  focusNode: _focusNode,
)

3. keyboardType

Определяет тип клавиатуры, которая появляется при вводе. Например, для ввода чисел можно выбрать числовую клавиатуру.

// Some code
TextField(
  keyboardType: TextInputType.number,
)

4. textInputAction

Управляет действием, которое будет выполняться при нажатии на кнопку ввода (например, "Готово", "Поиск").

// Some code
TextField(
  textInputAction: TextInputAction.search,
)

5. textCapitalization

Устанавливает правила капитализации текста (например, все буквы, только первая буква и т.д.).

// Some code
TextField(
  textCapitalization: TextCapitalization.words,
)

6. style

Устанавливает стили текста, такие как цвет, размер шрифта, жирность и т.д.

// Some code
TextField(
  style: TextStyle(color: Colors.blue, fontSize: 18),
)

7. textAlign

Управляет выравниванием текста внутри текстового поля (слева, по центру, справа).

// Some code
TextField(
  textAlign: TextAlign.center,
)

8. textDirection

Устанавливает направление текста, например, для языков с правым направлением письма (арабский, иврит).

// Some code
TextField(
  textDirection: TextDirection.rtl,
)

9. readOnly

Делает поле только для чтения, не позволяя пользователю вводить данные.

// Some code
TextField(
  readOnly: true,
)

10. obscureText

Делает текст скрытым, как в паролях.

// Some code
TextField(
  obscureText: true,
)

11. maxLength

Ограничивает количество символов, которые можно ввести

// Some code
TextField(
  maxLength: 10,
)

12. maxLines

Устанавливает максимальное количество строк, которые можно вводить.

// Some code
TextField(
  maxLines: 3,
)

13. minLines

Устанавливает минимальное количество строк, отображаемых в текстовом поле.

// Some code
TextField(
  minLines: 2,
)

14. expands

Растягивает текстовое поле, чтобы оно занимало все доступное пространство, задавая соответствие minLines и maxLines.

// Some code
TextField(
  expands: true,
  maxLines: null,
  minLines: null,
)

15. onChanged

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

// Some code
TextField(
  onChanged: (text) {
    print('Text changed: $text');
  },
)

16. onSubmitted

Вызывается при нажатии на кнопку ввода на клавиатуре.

// Some code
TextField(
  onSubmitted: (text) {
    print('Text submitted: $text');
  },
)

17. enabled

Определяет, включено ли текстовое поле для взаимодействия с пользователем.

// Some code
TextField(
  enabled: false,
)

18. cursorColor

Устанавливает цвет курсора.

// Some code
TextField(
  cursorColor: Colors.red,
)

19. cursorWidth

Определяет ширину курсора.

// Some code
TextField(
  cursorWidth: 3.0,
)

20. cursorRadius

Делает края курсора закругленными.

// Some code
TextField(
  cursorRadius: Radius.circular(5.0),
)

21. scrollPadding

Задает отступы для прокрутки при появлении клавиатуры.

// Some code
TextField(
  scrollPadding: EdgeInsets.all(20.0),
)

22. keyboardAppearance

Задает тему клавиатуры (светлая или темная).

// Some code
TextField(
  keyboardAppearance: Brightness.dark,
)

23. autofocus

Автоматически устанавливает фокус на текстовом поле при открытии экрана.

// Some code
TextField(
  autofocus: true,
)

24. inputFormatters

Определяет форматирование ввода, например, можно ограничить ввод только цифрами.

// Some code
import 'package:flutter/services.dart';

TextField(
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
)

25. enableSuggestions

Включает или отключает автоподсказки (например, для клавиатур с автозавершением текста).

// Some code
TextField(
  enableSuggestions: false,
)

26. autocorrect

Включает или отключает автокоррекцию

// Some code
TextField(
  autocorrect: true,
)

27. enableInteractiveSelection

Включает или отключает возможность выделять текст.

// Some code
TextField(
  enableInteractiveSelection: false,
)

28. selectionControls

Настраивает, как будет происходить выделение текста, например, копирование и вставка.

// Some code
TextField(
  selectionControls: materialTextSelectionControls,
)

decoration: InputDecoration()

// Some code
TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
    border: OutlineInputBorder(),
  ),
)

1. labelText

Текст метки, который отображается над текстовым полем, когда оно активно или заполнено.

// Some code
TextField(
  decoration: InputDecoration(
    labelText: 'Введите ваше имя',
  ),
)

2. labelStyle

Задает стиль для labelText, например, цвет, размер шрифта и т.д.

// Some code
TextField(
  decoration: InputDecoration(
    labelText: 'Введите ваше имя',
    labelStyle: TextStyle(color: Colors.blue),
  ),
)

3. helperText

Текст-помощник, который отображается под текстовым полем.

// Some code
TextField(
  decoration: InputDecoration(
    helperText: 'Поле должно содержать ваше полное имя',
  ),
)

4. helperStyle

Стиль для helperText.

// Some code
TextField(
  decoration: InputDecoration(
    helperText: 'Поле должно содержать ваше полное имя',
    helperStyle: TextStyle(color: Colors.green, fontSize: 20, fontWeight: FontWeight.bold),
  ),
)

5. hintText

Подсказка, отображаемая в текстовом поле, когда оно пустое.

// Some code
TextField(
  decoration: InputDecoration(
    hintText: 'Введите ваше имя',
  ),
)

6. hintStyle

Стиль для hintText

// Some code
TextField(
  decoration: InputDecoration(
    hintText: 'Введите ваше имя',
   hintStyle: TextStyle(color: Colors.red, fontSize: 20, fontWeight: FontWeight.bold),
  ),
)

7. hintMaxLines

Максимальное количество строк для отображения подсказки hintText.

// Some code
TextField(
  decoration: InputDecoration(
    hintText: 'Введите ваше полное имя и фамилию sdkjasalksdjaksjdlaskjdlasjdlkajsdlkasd',
    hintMaxLines: 2,
  ),
)

8. errorText

Текст ошибки, который отображается под текстовым полем, если данные введены неверно.

// Some code
TextField(
  decoration: InputDecoration(
    errorText: 'Неверный ввод',
  ),
)

9. errorStyle

Стиль для текста ошибки.

// Some code
TextField(
  decoration: InputDecoration(
    errorText: 'Неверный ввод',
    errorStyle: TextStyle(color: Colors.red, fontSize: 12),
  ),
)

10. errorMaxLines

Максимальное количество строк для отображения текста ошибки.

// Some code
TextField(
  decoration: InputDecoration(
    errorText: 'Неверный ввод. Попробуйте снова.',
    errorMaxLines: 2,
  ),
)

11. floatingLabelBehavior

Управляет тем, как метка (labelText) "плавает" при взаимодействии с полем. Может быть всегда видимой, появляться только при вводе текста или не показываться.

// Some code
TextField(
  decoration: InputDecoration(
    labelText: 'Введите ваше имя',
    floatingLabelBehavior: FloatingLabelBehavior.always,
  ),
)

12. icon

Иконка, которая отображается перед текстовым полем.

// Some code
TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.person),
  ),
)

13. prefixIcon

Иконка, которая отображается внутри текстового поля перед текстом.

// Some code
TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.email),
  ),
)

14. suffixIcon

Иконка, которая отображается внутри текстового поля после текста.

// Some code
TextField(
  decoration: InputDecoration(
    suffixIcon: Icon(Icons.visibility),
  ),
)

15. prefixText

Текст, который отображается перед введённым текстом (например, для валют или кодов стран).

// Some code
TextField(
  decoration: InputDecoration(
    prefixText: '+996 ',
  ),
)

16. prefixStyle

Стиль для prefixText.

// Some code
TextField(
  decoration: InputDecoration(
    prefixText: '+996 ',
    prefixStyle: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 20),,
  ),
)

17. suffixText

Текст, который отображается после введённого текста.

// Some code
TextField(
  decoration: InputDecoration(
    suffixText: 'USD',
  ),
)

18. suffixStyle

Стиль для suffixText.

// Some code
TextField(
  decoration: InputDecoration(
    suffixText: 'USD',
    suffixStyle: TextStyle(color: Colors.green, fontSize: 20, fontWeight: FontWeight.bold),
  ),
)

19. counterText

Текст, который отображается под текстовым полем, например, счетчик введённых символов.

// Some code
TextField(
  decoration: InputDecoration(
    counterText: '0/10 символов',
  ),
)

20. counterStyle

Стиль для counterText

// Some code
TextField(
  decoration: InputDecoration(
    counterText: '0/10 символов',
    counterStyle: TextStyle(color: Colors.red, fontSize: 20, fontWeight: FontWeight.bold),
  ),
)

21. filled

Если true, текстовое поле будет залито цветом, заданным в fillColor.

// Some code
TextField(
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.green,
  ),
)

22. fillColor

Цвет фона текстового поля, если filled: true.

// Some code
TextField(
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.green,
  ),
)

23. border

Управляет границами текстового поля.

// Some code
TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
)

24. enabledBorder

Граница текстового поля, когда оно активно, но не в фокусе.

// Some code
TextField(
  decoration: InputDecoration(
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blue),
    ),
  ),
)

25. focusedBorder

Граница текстового поля, когда оно находится в фокусе.

// Some code
TextField(
  decoration: InputDecoration(
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.green, width: 2.0),
    ),
  ),
)

26. errorBorder

Граница текстового поля, когда данные введены с ошибкой.

// Some code
TextField(
  decoration: InputDecoration(
    errorText: 'Ошибка',
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 2.0),
    ),
  ),
)

27. focusedErrorBorder

Граница текстового поля, когда оно в фокусе и с ошибкой.

// Some code
TextField(
  decoration: InputDecoration(
    errorText: 'Ошибка',
    focusedErrorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 2.0),
    ),
  ),
)

28. contentPadding

Внутренние отступы содержимого внутри текстового поля.

// Some code
TextField(
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(16.0),
  ),
)
PreviousФормы и ввод данныхNextTextFormField

Last updated 7 months ago

🧩
📝
🧩