Flutter: ввод текста

За ввод текста во Flutter отвечает виджет TextField и соответствующий класс TextEditingController для управления вводом текста

Для примера отрисуем страницу авторизации. Сначала «Рыба»:

Добавим надписи Логин и Пароль:

Далее необходимо рассказать о классе TextEditingController.

Данный класс имеет два конструктора:

TextEditingController({String text})
TextEditingController.fromValue(TextEditingValue value)

Первый конструктор в качестве параметра принимает начальное значение, которое затем будет отображаться в ассоциированном текстовом поле. Второй конструктор также принимает начальное значение, но в виде объекта TextEditingValue

TextEditingController позволяет контроллировать введенный и выделенный текст в поле ввода, для чего у него определены три свойства:

  • selection: выделенный текст в виде объекта TextSelection
  • text: текущий введенный текст в виде объекта String
  • value: текущее значение в виде объекта TextEditingValue

При изменении ввода в текстовом поле связанный объект TextEditingController уведомляет слушателей об изменении. Для добавления слушателей — функций обработного вызова в классе определен метод addListener(). Все добавленные слушатели могут считать введенный текст, а также выделенный текст и таким образом узнать о произошедших изменениях.

Когда объект TextEditingController больше не нужен, у него надо вызвать метод dispose(). Это позволит освободить все ресурсы, используемые объектом.

Таким образом модифицируем код, добавив поля ввода для логина и пароля:

Теперь создадим обработчики событий ввода и начальное заполнение контроллеров.

Результат:

Если поля ввода заполняются например из списка, то заполнение начальных значений и их сохранение можно организовать как-то так:

Получится:

Flutter: изменение состояния виджета «онлайн»

Вполне типичная ситуация: отображать пункты меню в зависимости от того, авторизован пользователь или нет. Используя глобальные переменные из предыдущей статьи, дополним код, при котором после «прохождения авторизации», соответствующий пункт меню будем скрывать. Для этого, мы можем использовать опять же виджет Visibility, который имеет свойство visible: true/false. Странно конечно, почему любой виджет не имеет этого свойства, а приходится его «обёртывать» им..

Функция SetState внутри виджета заставляет перерисовать весь виджет.

Flutter: суперглобальные переменные

Для того чтобы хранить и передавать переменные между экранами и классами, необходимо их объявить в отдельном файле, например globals.dart

Далее во всём используемом коде, в заголовках добавлять

И далее использовать по типу:

Flutter: генерация apk (Android)

Для того чтобы попробовать получившееся приложение на «реальном» телефоне, а не на эмуляторе, необходимо проделать ряд манипуляций.

Вариант 1: создание не подписанного apk. Не пригодно для размещения в Google Play, но пригодно для того чтобу устанавливать на телефон для «потестить». Этот способ подойдет если нужно «по быстрому» или не планируется распространять приложение через Google Play

Для этого достаточно выполнить в меню: Build -> Flutter -> Build APK. Спустя несколько минут компиляции и сборки, результат можно выловить в папке C:\Users\<пользователь>\AndroidStudioProjects\invent\build\app\outputs\flutter-apk

Вариант 2: создание подписанного apk и публикация в Google Play занимает несколько шагов

  • Добавление иконки приложения (launchpad icon)
  • Настройка подписи приложения
  • Проверка манифеста приложения (AndroidManifest.xml)
  • Проверка конфигурации сборки (build.gradle)
  • Создание версии приложения для публикации (—release)
  • Публиковать в Google Play Store

Добавление иконки приложения

По умолчанию приложение собирается с иконкой Flutter. Чтобы её поменять — нужно заместить эти иконки своими в папке <app dir>/android/app/src/main/res/

Настройка подписи приложения

Для публикации приложения в Play Store необходимо подписать приложение цифровой подписью. Создание ключа:

Далее необходимо связать приложение с ключём. Для этого нужно создать файл <app dir>/android/key.properties

Сконфигурируем Gradle <app dir>/android/app/build.gradle

  1. заменить следующее

на информацию о файле конфигурации

2. Заменить конфигурацию сборки релиза

на следующую информацию, содержащую параметры подписи

Теперь сборка релиза будет подписываться автоматически.

Проверка манифеста приложения

Необходимо убедиться что в файле <app dir>/android/app/src/main/AndroidManifest.xml содержится верное наименование приложения, а также установлены верные uses-permissions

Проверим конфигурацию сборки

В <app dir>/android/appbuild.gradle необходимо выставить идентификатор приложения, имя и номер сборки.

Flutter: сканирование штрихкода

1. Добавим в pubspec.yaml зависимость

Добавим в код предыдущего проекта:

Следует отметить, что при запуске кода на Android/IOS приложение самостоятельно попросит доступ к камере, а потому еще одной проблемой — обработкой запросов доступа меньше.

1 6 7 8 9 10