Flutter: работа с json

В предыдущей статье мы получили по URL json данные. Теперь задача их обработать.

Для работы с json, необходимо импортировать библиотеку:

Далее загрузим данные в тип Map:

А что если это массив?

В этом случае загрузим JSON в объет List:

Обратная конвертация:

Flutter: получение данных по http/https

Для обмена данными между клиентом (приложением) и сервером можно использовать пакеты http и http_parser. Для этого в зависимости добавляем пакеты:

Для подключения в самом проекте нужно указать:

Ключевое слово as — указывает на то что подключаемые методы из пакета будут доступны через объект-имя http, к примеру:

В файл манифеста для Android, обязательно нужно добавить доступ в интернет:

  • http.get(…)
  • http.post(…)
  • http.put(…)

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

Flutter: виды кнопок

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

В Flutter довольно таки большой выбор «стандартных» кнопок, код вызова которых в принципе идентичен

FlatButton
RaisedButton
ElevatedButton
TextButton
OutlinedButton
FloatingActionButton

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 внутри виджета заставляет перерисовать весь виджет.

1 2