Краткое введение
Я узнал о флаттере просто случайно, я просматривал свой канал на Youtube и видел много видео о конференции по дартс, и это каким-то образом привлекло мое внимание. Я заглянул в него и был взволнован с 0-й минуты.
Моя предпочтительная стратегия обучения - учиться на собственном опыте. Прочитав несколько страниц документации и изучив приложение, которое создается при создании нового проекта, я почувствовал уверенность, что попробую что-то самостоятельно.
Приложение
Как вы можете видеть на гифке, это довольно простое приложение, но в нем есть несколько очень интересных моментов.
- Он использует API Google Книг для извлечения книг из своей базы данных.
- При этом отображается индикатор загрузки.
- Заголовки книг и изображения загружены
В традиционных приложениях для Android для этого потребуется несколько классов и пара строк кода.
Во флаттере это приложение имеет 1 класс и 129 строк кода, включая несколько операций импорта и макет.
Звучит круто, правда? Давай займемся этим.
Прежде чем я начну, я не буду вдаваться в подробности базовой настройки приложения. Обязательно ознакомьтесь с образцом проекта, который поставляется с flutter и документацией, оба они действительно потрясающие.
Кроме того, весь код (все 129 строк) является открытым исходным кодом в моем репозитории github, я рекомендую вам взглянуть на это: https://github.com/Norbert515/BookSearch
List<Book> _items = new List(); final subject = new PublishSubject<String>(); bool _isLoading = false;
В этом примере нам нужны 3 переменные.
Список книг, в котором книга определяется как:
class Book {
String title, url;
Book(this.title, this.url);
}
PublishSubject, он является частью RxDart, который, в свою очередь, является реализацией Rx. Мы используем его для отправки событий textChanged.
Не волнуйтесь, если вы не знаете RX, я буду использовать его только для небольшой задачи, которая будет объяснена позже в этом посте.
(Подробнее о RX: http : //reactivex.io/)
И переменная, которая указывает, ожидаем ли мы в данный момент ответа сервера.
Кроме того, пользовательский интерфейс содержит три основных элемента:
- Список
- Индикатор загрузки
- Текстовое поле
Которые, в свою очередь, помещаются в столбец.
Самое интересное в этом - onChanged, здесь мы передаем лямбду, которая добавляет к теме набранный в данный момент текст. Это позволяет нам слушать его в другом месте.
_isLoading? new CircularProgressIndicator(): new Container(),
Если мы находимся в состоянии загрузки, покажите полосу выполнения, иначе покажите пустой контейнер, иначе ничего.
В списке используется построение элемента для создания виджетов на основе индекса. Внутри карточки мы размещаем изображение, которое загружается через Интернет, и текст, представляющий описание книги.
Логика
В методе initState мы настраиваем субъект для потоковой передачи своих событий и их устранения. Отключение происходит по той простой причине, что не нужно отправлять запросы API при каждом нажатии клавиши. Вместо этого мы ждем 600 мс после последнего нажатия клавиши, чтобы отправить эту строку ввода методу _textChange. Это единственная причина, по которой мы используем rx.
(Дополнительная информация для оператора debounce: http://reactivex.io/documentation/operators/debounce.html)
Здесь и происходит вся логика.
Сначала несколько вещей. Если текст пуст - ›мы больше не загружаемся и не очищаем список.
Если, с другой стороны, мы получили текст - ›Мы загружаем и очищаем список, чтобы освободить место для входящих данных.
После этого мы делаем запрос к API Google Книг, используя поисковый запрос volumes?q=$text, где текст содержит текущую набранную строку. Когда результат возвращается, происходит несколько вещей.
- Получите актуальный ответ
- JSON декодирует его, который, в свою очередь, возвращает Map ‹String, dynamic›
- "Items" содержит массив книг с большим количеством метаинформации.
- Пройдите через это и добавьте их, используя метод _addBook
- Внутри этих «элементов» находится «заголовок» и «smallThumbnail».
Подведение итогов
Вот и все, приложение готово.
Это мой самый первый пост, я буду признателен за отзывы.
Следующим шагом будет реализация базы данных для хранения:
- Я читал эту книгу?
- Некоторые заметки о книгах
Если вам понравилась эта прогулка, не забудьте нажать эту симпатичную маленькую кнопку в ладоши!
