Как сделать поиск flutter

Добавил пользователь Евгений Кузнецов
Обновлено: 04.10.2024

Технология Flutter быстро заняла почетную нишу на рынке разработки кроссплатформенных мобильных веб-приложений. Основное преимущество — единая база кода, которая позволяет одновременно разрабатывать приложения как на iOS, так и на Android, как для десктопных, так и для веб-приложений.

При этом технология помогает сэкономить самый драгоценный ресурс для каждого разработчика — время.

На сегодня Flutter Web уже вышел в стабильной версии, а это дает бóльшие гарантии как для разработчиков, так и для продукта. Обычно в продакшне мы не используем библиотеки и фреймворки в бете. А в случае с Flutter Web уже есть стабильная версия инструментария.

Flutter интуитивно понятен и довольно легок в освоении: и в этой статье я покажу это на практике. Мы выясним, как с его помощью всего за один день можно создать веб-приложение при уже имеющихся мобильных приложениях. Также выясним, какие подводные камни таит в себе Flutter Web и как их обойти без вреда для проекта.

С чего начать

Чтобы приступить к разработке веб-приложения на Flutter Web, нужно выполнить несколько команд:

В этой статье детально разберем команду flutter build web , отвечающую за создание папки web, которую затем можно разместить на веб-сервере. Это основная команда для создания проекта. Также выясним, что из себя представляет папка web.

Структура Flutter Web

Папка web, которая создается через команду flutter build web , имеет следующий вид:

Давайте заострим внимание на трех ключевых файлах и поймем, за что они отвечают:

index.html — простая html-страница, к которой подключаются другие файлы;
flutter_service_worker.js — скрипт, который способен перехватывать и изменять команды по запросу ресурсов, а также выполнять кэширование данных;
main.dart.js — сердце нашего веб-приложения, основной файл, ответственный за работу приложений на Flutter Web.

Генерацию main.dart.js можно увидеть на примере компиляции его кода с языка Dart в JavaScript:

Любое приложение, созданное на Flutter Web, обрабатывается при помощи движка Flutter Web Engine. Он содержит библиотеки и API, которые преобразовывают код в более низкоуровневый (для работы с html, CSS и Canvas). Компилятор Dart2js преобразовывает код с Dart в JavaScript.

Изначально Dart разрабатывался именно как язык веб-разработки, поэтому его преобразование на JS довольно хорошо оптимизировано.

Подводные камни Flutter Web

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

Отсюда следует правило:

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

Дополнительный список официальных плагинов для работы с Firebase также есть на сайте . Здесь можно увидеть, какие именно платформы поддерживают плагины: мобильные, web или desktop.

Где хранить данные и как реализовать сохранение на Flutter Web

Во Flutter Web существует четыре варианта, где можно хранить данные: Cookies, Local Storage, Session Storage и IndexedDB. Давайте сравним их и выделим сильные и слабые стороны каждого.

Сравнение вариантов для хранения данных

Давайте разберем подробнее:

Cookies — небольшие фрагменты данных (весом 4 Кб), которые отправляются сервером и хранятся на устройстве веб-пользователя. По типу данных Cookies являются строковыми парами ключ-значение. Срок их хранения задается свойством expiry time или не ограничивается по времени.
Local Storage — свойства глобального объекта браузера window . Данные здесь, как и в Сookies, хранятся в виде строковых пар ключ-значение, а время их хранения не ограничено. Для каждого домена браузер создает свой Local Storage. Доступ к данным в происходит гораздо быстрее, чем в Cookies.
Session Storage похож на Local Storage за исключением одного принципиального отличия — времени хранения данных. Session Storage существует только в рамках текущей вкладки браузера. Используется он намного реже, нежели Local Storage.
IndexedDB представляет собой встроенную базу данных с индексами. Не имеет срока хранения, поэтому отлично подходит как локальное хранилище больших объемов данных между сессиями.

Сохранение данных на Flutter Web может быть реализовано такими способами:

Ручная реализация — используя библиотеки dart:html , dart:js , dart:indexed_db .
Реализация при помощи готовых плагинов, поддерживаемых Flutter Web. Сегодня существует множество плагинов, которые охватывают типичные кейсы сохранения данных на вебе.

Отличия в сохранении данных на мобильной и веб-версиях Flutter

Разберем этот кейс на примере Shared Preferences. Наиболее подходящим способом хранения данных здесь является Local Storage. Сохранение легко реализовывается вручную посредством библиотеки dart:html :

Как видите, мы обращаемся к свойству localStorage объекта window и сохраняем туда необходимые нам значения. Сложность этого подхода в том, что нужно писать две различные версии кода — для мобильной и для веб-версии приложения.

Так было до лета 2020 года, пока на сайте не появился плагин Shared_Preferences. Он добавил поддержку веба и способность сохранять данные в Local Storage для браузера, в NSUserDefaults — для iOS, в Shared Preferences — для Android.

Сохранение локальных баз данных во Flutter Web

В этом случае можно использовать Local Storage, IndexedDB или же прибегнуть к помощи библиотеки sql.js . Но наиболее удобным выбором здесь станет использование готового ORM-решения. Сегодня одним из самых лучших ORM-плагинов является moor . Его функционал охватывает практически все типичные кейсы работы с базами данных, за исключением некоторых (пока еще здесь не реализована поддержка сущностей embedded).

Создание БД для мобильный и веб-версий происходит по-разному:

Используются разные импорты ( moor_flutter и moor_web ). Именно здесь и таится первый подводный камень — невозможно одновременно импортировать данные из разных библиотек. Для веб-приложения нельзя использовать мобильную версию и наоборот. Чем обусловлено такое ограничение и как его обойти?

Дело в том, что во Flutter Web невозможен импорт библиотеки dart:io , которая используется для работы с файлами, сокетами и другими io-составляющими.

Но мы можем воспользоваться особой фичей языка Dart — условным импортом, который позволяет импортировать библиотеки при наличии заданного условия.

Пример условного импорта библиотеки выглядит так:

Как видно из примера, импорт будет совершен при условии, что текущая версия приложения поддерживает библиотеки dart.library.io или dart.library.html соответственно.

Кэширование ресурсов в браузере и Assets

При работе на вебе часто применяют Assets. Они используются для обозначения файлов и объектов, необходимых для корректной работы веб-приложения. Во время использования веб-приложения пользователем, ресурсы будут кэшироваться в его браузере и при обновлении приложения могут отображаться некорректно. Это происходит, потому что в браузер загружаются варианты ресурсов из предыдущей версии приложения (до его обновления).

На практике оба подхода применяются одинаково успешно.

Responsive UI

После сборки веб-приложения вы можете столкнуться с проблемой некорректного отображения интерфейса, который изначально разрабатывался для мобильных версий (неправильное масштабирование, разрывание текста). Чтобы избежать этого, приложение нужно сделать респонсивным — применить к нему дизайн, характерный для внешнего вида веба. При этом оставить мобильный вариант для мобильной версии.

Когда пользователь поворачивает девайс горизонтально или изменяет размер страницы в браузере, приложение должно корректно масштабироваться. Как отследить это?

Нужно самостоятельно проверить какое-либо условие (например, размер экрана), а затем — используя if и else, указать параметр, который нужно применить для выбранной ширины экрана:

Но как узнать, какие начальные данные нужно указать для if и else? Можно прибегнуть к помощи MediaQuery — особому виджету, содержащему информацию о размере и ориентации экрана.

Еще один способ — использование константы kIsWeb. Метод покажет, было ли приложение скомпилировано для работы в вебе или нет. Таким образом можно понять, где именно открыто приложение — на мобильном устройстве или в браузере. Также можно использовать плагины platform_detect и web_browser_detect .

ResponsiveWidget и альтернативные варианты написания UI для веб-приложений

Чтобы постоянно не прописывать if и else в местах, где необходимо получить разный дизайн экрана, можно использовать ResponsiveWidget:

Здесь виден основной экран приложения (MainScreen). В его методе build используется ResponsiveWidget, который затем передал в метод resolve варианты виджетов для разных типов экрана. В методе resolve реализована логика получения информации об экране. Затем resolve возвращает виджет, предназначенный для текущего размера экрана.

Существуют и альтернативные варианты создания UI для веб-приложений:

Навигация во Flutter Web

Навигация во Flutter Web может быть реализована тремя способами:

Использование вместо простых методов навигатора их Named-версий. Строчные параметры, которые вы туда передадите, и будут частью вашего URL после имени домена: Navigator.push -> Navigator.pushNamed.
Использование плагинов, подходящих под ваши решения в реализации навигации. Здесь отметим fluro и flutter modular.
Использование API: Navigator 2.0 — в нем содержится класс RouteInformationParser , который можно унаследовать и написать свой URL Parser для перехода на нужный скрин.

Описанные методы навигации на Flutter далеки от идеала, но они активно обновляются, так что советую следить за новинками и читать патчноуты.

Нереализованные свойства и недостатки

отсутствует hot reload — реализован только hot restart;
не все браузеры поддерживают стандартные шрифты;
отсутствует поддержка SEO;
довольно низкая производительность в мобильных браузерах.

Многие из этих фич планируется реализовать в ближайшее время, и, надеемся, к моменту выхода статьи этот список поредеет 🙂

Переход с Flutter на Flutter Web может показаться непривычным, но рассматривайте это как профессиональный челлендж. Тем более интерес, который IT-комьюнити проявляет к его развитию, подтверждает востребованность этой технологии в веб-разработке.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Главная > Блоги > Как создать приложение на Flutter Web и обойти подводные камни без вреда для проекта

Этот материал – не редакционный, это – личное мнение его автора. Редакция может не разделять это мнение.

Недавно возникла необходимость сделать простое мобильное приложение для работы со своей геопозицией и отображением ее на карте. В одной из прошлых статей я написал как можно сделать простое мобильное приложение на flutter. Поэтому для текущей задачи я решил использовать его же.

Выбор библиотек

Для определения геопозиции у flutter’а есть несколько библиотек, например location или geolocator. Подробнее с ними можно ознакомиться здесь. Я для себя выбрал location .

После выбора библиотеки для работы с локацией, нужно найти библиотеку для работы с картой для отображения геопозиции. Я выбрал для себя flutter_map, основанный на javasrcipt бибилиотеке Leaflet.

Создание приложения

Для доступа к gps необходимо предоставить приложению разрешения.

Для этого в Android манифест нужно добавить:

Для iOS в Info.plist:

В файл pubspec.yaml необходимо добавить следующие зависимости:

Код приложения будет следующий:

Как видно из кода, тут созадется виджет с состоянием, который раз в секунду получает координаты с помощью функции location.getLocation() и создает маркер, который отрисовывается на карте.

Ну а дальше собствтенно отрисовывается карта с помощью виджета FlutterMap с центрированием в точке маркера. В качестве слоя подолжки я буду использовать тайлы openstreetmap с помощью TileLayerOptions (так же есть возможность использовать Mapbox например). А для того чтобы ее обновлялось местоположение маркера исользуется специальный слой MarkerLayerOptions .

Теперь осталось установить приложение в телефон, для этого нужно выполнить комнды:

В итоге получилось следующее приложение:

Заключение

Разработка данного приложения у меня заняла где-то полдня от момнета начала работы до деплоя на телефон. Дальше не составит труда можернизировать это приложение под то, чтобы оно передавало телеметрию на сервер, для сбора статистики например.

Также надо отметить, что можно собирать телеметрию не по таймеру как в примере, а с помощью функции onLocationChanged , у которой тоже можно настроить таймаут для сбора телеметрии.

GPS стала стандартной функцией современного смартфона. Обычно используется приложениями, чтобы обнаружить местонахождение устройства.

Это перевод статьи Flutter - GPS Geolocation Tutorial [EN].
Перевод подготовлен Михайловой Марией.
В статье вставлены дополнения и пояснения которых нет в оригинале.

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

Зависимости

Пакет geolocator (геолакатор) во Flutter предоставляет геолакационные функции. Добавьте его в ваш файл pubspec.yaml и запустите команду packages get (получить пакеты).

Разрешения

Вам нужно добавить разрешения в каждую платформу.

Для Android

Нужны разрешения ACCESS_FINE_LOCATION и ACCESS_COARSE_LOCATION.

Для IOS

Нужно NSLocationWhenInUseUsageDescription разрешение. Добавьте его в файл Info.plist.

Пример кода

Ниже представлена структура кода этого руководства. Нам нужно создать экземпляр Geolocator (геолокатора) и сохранить значение последней Position (позиции). Приложение будет использовать значение Position, чтобы показать широту и долготу.

Проверьте разрешения

Если вы добавили правильные разрешения, приложению будет дано разрешение для доступа к местоположению устройства, используя GPS. В Андроид 6.0 и выше, он попросит пользователя дать разрешения. Но если вам нужно проверить есть ли у приложения разрешение на доступ к местоположению, вы сможете это сделать программно.
Чтобы сделать проверку, используйте метод checkGeolocationPermissionStatus который возвращает значение Future.
Как вариант, для iOS, вы можете отдельно выбрать locationAlways и locationWhenInUse, устанавливая locationPermission опциональный параметр, тип которого GeolocationPermission.

GeolocationStatus.denied - если пользователь отклонил разрешение;
GeolocationStatus.granted - если пользователь согласился.

Получить текущее местоположение

Получить текущее местонахождение очень легко. Просто используйте метод getCurrentPosition, который возвращает Future . Вы можете использовать опцию desiredAccuracy.

Иногда процесс получения текущего местонахождения может быть не выполнен. К примеру, если пользователь выключает сенсор GPS. Если он был выключен с самого начала, это может быть причиной ошибки, поэтому мы должны ее отследить. Есть также вероятность того что GPS выключен когда процесс поиска локации уже идет. Это может привести к прерыванию процесса, и следовательно, лучше добавить задержку его исполнения.

Ниже приведены описания значений каждого LocationAccuracy.

Название описания lowest (самое низкое).
Местонахождение точно в пределах дистанции в 3000м на iOS и 500м на Android.

low (низкая) локация точна в пределах 1000м на iOS и 500м на Android.
medium (средняя) локация точна в пределах 10м на iOS и между 0м и 100м на Android.
high (высокая) локация точна в пределах 10м на iOS и между 0м и 100м на Android.
best (лучшая) локация точна в пределах ~0м на iOS и между 0м и 100м на Android.
Точность локации bestForNavigation оптимизирована для iOS и соответствует LocationAccuracy.best на Android.

Трансляция обновления местонахождения

Чтобы получить обновленное местоположение, вы фактически можете поместить код выше в тело цикла. Но существует способ лучше и точнее.
Вы можете использовать getPositionStream, который возвращает Stream .
Вы также можете настроить требуемое значение изменения местоположения перед тем как слушатель будет уведомлен, используя distanceFilter.

Листинг программы

Ниже представлен полный код данного руководства:

В оригинальный код добавлен метод setState() для обновления положения в реальном времени

Можно скопировать этот код и запустить приложение:

Результат работы программы определение местоположения, GPS координаты, на Flutter.

Flutter быстро становится одним из самых популярных фреймворков для разработки кросс платформенных мобильных приложений. Большинство разработчиков Android и iOS сегодня начинают соглашаться с тем, что это более быстрая и перспективная альтернатива другим кросс платформенным фреймворкам, таким как React Native и NativeScript.

Google из кожи вон лезет, чтобы привлечь к нему больше разработчиков. Например на Google I/O в этом году было несколько углубленных сессий, сосредоточенных на разработке с помощью него приложений, отвечающих принципам Material Design. Во время одной из сессий Google также объявил, что Flutter станет первоклассной платформой для Material Design.

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

Необходимые условия

Чтобы эта серия уроков была для вас наиболее полезна, вам понадобится:

последняя версия Android Studio
устройство или эмулятор для запуска Android API версии 21 или выше

1. Настройки Android Studio

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

Сперва запустите Android Studio и выберете пункт меню Configure > Plugins (Конфигурация > Плагины) в приветственном окне.

В появившимся диалоговом окне нажмите кнопку Browse Repositories (Обзор репозиториев) и найдите плагин Flutter.

Когда нашли плагин, нажмите кнопку Install (Установить) для него. После этого вам будет задан вопрос о том, стоит ли также установить и плагин Dart. Нажмите Yes (Да) для продолжения.

После установки обоих плагинов нажмите кнопку Restart Android Studio (Перезапустить Android Studio) для завершения настроек.

2. Создание нового проекта

После перезапуска вы сможете увидеть кнопку Start a new Flutter project (Начать новый проект Flutter) в приветственном окне Android Studio. Нажмите ее для создания вашего первого проекта Flutter.

В следующем окне выберете опцию Flutter Application (Приложение Flutter) нажмите Next (Далее)

Вы теперь увидите форму для заполнения различных подробностей о Flutter приложении, например, желаемое название и расположение. Убедитесь, что вводите допустимые значения во всех полях.

Плагин Flutter не включает в себя Flutter SDK. Поэтому вам нужно установить SDK отдельно. Это можно сделать, нажав кнопку Install SDK (Установить SDK) в текущем окне.

В зависимости от скорости вашего соединения для завершения установки может потребоваться достаточно много времени. После успешного окончания вы сможете нажать кнопку Next (Далее) для завершения создания проекта.

3. Добавление точки входа

На протяжении этого урока вы будете писать код в файле lib/main.dart. По умолчанию он будет содержать некоторые примеры кода, которые вам не понадобятся. Так что перед началом редактирования удалите все его содержимое.

Фреймворк Flutter использует язык программирования Dart, который легко выучить и чей синтаксис очень похож на синтаксис Java и C. По примеру многих самостоятельных программ на Java и C, для Flutter необходима специальная функция main() , которая служит точкой входа для всего приложения.

Соответственно, добавьте следующий код в файл main.dart:

На данном этапе вы можете нажать Shift + F10, чтобы скомпилировать и запустить приложение. Если не возникло ошибок на предыдущих шагах, вы должны увидеть, что приложение отобразит пустой белый холст на вашем устройстве.

4. Использование виджетов, не имеющих указания состояния

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

Чтобы иметь возможность использовать основные виджеты в вашем приложении, импортируйте библиотеку widgets , добавив следующий код в начало файла main.dart:

Простейшие виджеты, которые можно создать - это виджеты без указания состояния. Как вы уже догадались, с ними не связано состояние и таким образом они являются статическими. Они идеально подходят для отображения меток, названий и других элементов пользовательского интерфейса, содержание которых вряд ли изменится во время работы приложения. Для создания статического виджета, необходимо расширить класс StatelessWidget и переопределить его метод build() . В следующем примере кода показано, как:

Как вы можете видеть в приведенном выше коде, метод build() должен возвращать объект Widget . Вы можете выбрать и возвращать любой из десятков готовых виджетов, доступных в Flutter. Например, если вы хотите отобразить строку текста, можно создать и возвратить виджет Text , как показано ниже:

Обратите внимание, что вы всегда должны задавать направление текста при использовании виджета Text .

Однако, если вы запустите приложение прямо сейчас, вы не сможете увидеть текст. Это потому, что вы до сих пор не вызвали этот статический виджет. Итак, перейдите в метод main() , вызовите виджет внутри него и передайте его методу runApp() . Вот как:

В тот момент, как вы добавите приведенный выше код и сохраните ваш проект, Android Studio должна автоматически перезагрузить приложение на вашем устройстве, что позволит увидеть текст.

Если вы хотите отобразить изображение вместо текста, вы можете просто заменить виджет Text на виджет Image внутри метода build() вашего класса. Следующий код показывает, как создать виджет Image , который загружает и отображает удаленное изображение:

И снова, после сохранения вашего проекта, вы должны увидеть что-то вроде этого на вашем устройстве:

5. Создание деревьев виджетов

Любое приложение Flutter можно воспринимать как дерево виджетов. Приложение, которое вы создали на предыдущем шаге, - это дерево виджетов, имеющее всего один виджет. Использование Text или Image виджетов как элементов верхнего уровня дерева виджетов не является хорошей идеей, потому что вы не сможете добавлять для них дочерние виджеты.

Flutter предлагает несколько виджетов, которые могут выступать в качестве контейнеров для других виджетов. Наиболее часто используемыми из них являются виджеты Row и Column . Как следует из названия, виджет Row позволяет размещать несколько виджетов рядом друг с другом, а виджет Column поможет вам разместить виджеты один под другим. Они незаменимы при создании многоуровневых деревьев виджетов.

Следующий код показывает, как использовать виджет Column для создания дерева виджетов, которое имеет два дочерних элемента: виджет Text и виджет Image .

Теперь приложение должно выглядеть следующим образом:

Кроме того, есть виджеты, которые служат для правильного расположения другого виджета. К примеру, виджет Center помогает вам расположить виджет по центру. Аналогично виджет Container позволяет добавлять отступы и поля для виджетов.

Следующий код показывает, как отцентрировать виджет Column , который вы только что создали, внедрив его внутрь виджета Center :

В приведенном выше коде обратите внимание, что виджет Column использует дополнительное свойство под названием mainAxisSize , значение которого задано в min . Это необходимо потому, что, прежде чем отцентрировать столбец, вы должны сделать его высоту равной сумме высот всех его дочерних элементов. Без такого свойства виджет Column будет иметь такой же размер, как экран устройства, и виджет Center не будет иметь никакого эффекта на него.

6. Использование виджетов Material Design

Все это время вы использовали основные виджеты, которые являются частью библиотеки widgets . Flutter имеет альтернативную библиотеку под названием material , которая предлагает виджеты Material Design. Чтобы использовать ее в вашем приложении, измените инструкцию, которая импортирует библиотеку widgets следующим образом:

Далее, чтобы применить стиль Material Design к вашим виджетам, вы должны иметь виджет MaterialApp в верхней части вашего дерева виджетов. Необходимо также внедрить все ранее созданные виджеты внутрь виджета Scaffold , который может служить в качестве домашнего экрана виджета MaterialApp .

Кроме того, поскольку большинство приложений Material Design имеют панель приложения, можно дополнительно указать в качестве значения свойства appBar виджета Scaffold новый виджет AppBar .

Следующий код показывает, как лаконично выполнить все эти задачи:

Приложение должно теперь выглядеть гораздо лучше.

7. Использование виджетов с указанием состояния

Статические виджеты являются неизменяемыми. Код, который вы написали в предыдущих шагах, не имеет простого способа изменить содержимое виджета Text или виджета Image . Почему? Потому что фреймворк Flutter отдает предпочтение реактивному программированию над императивным программированием. Следовательно большинство его виджетов не имеют методов установки значений, которые позволяют обновлять их содержимое во время выполнения программы. Например, виджет Text не имеет метода setText() , который позволил бы изменить отображаемый текст.

Виджеты с отслеживанием состояния, напротив, являются изменяемыми, хотя и не напрямую. Они полагаются на объекты State для определения, что они должны отображаться в той или иной ситуации. Таким образом, всякий раз, когда изменяется объект State , фреймворк будет автоматически обновлять содержимое любого виджета с указанием состояния, подключенного к нему.

Чтобы создать виджет с указанием состояния, необходимо расширить класс StatefulWidget и переопределить его метод createState() .

Далее необходимо создать новый пользовательский класс State , который содержит переменные, которые формируют состояние такого виджета. Кроме того, внутри класса необходимо переопределить метод build() для возвращения вашего дерева виджетов.

Следующий код показывает, как создать класс State , содержащий одну переменную url :

Ради примера создадим дерево виджетов Material Design, содержащее виджет Image , который отображает случайное изображение, и виджет RaisedButton , который пользователь может нажать, чтобы загрузить новое случайное изображение. В следующем коде показано, как:

Обратите внимание, что конструктор виджета Image теперь принимает переменную url в качестве аргумента, вместо строкового значения. Это позволяет фреймворку использовать последнее значение переменной при каждом отображении виджета Image .

Также, обратите внимание, что виджет RaisedButton имеет атрибут onPressed , который указывает на регистратор события changeURL() . Сам метод еще не существует, так что создадим его.

Внутри метода вы должны, конечно, изменить значение переменной url . Однако вы не должны изменять его напрямую. Если вы это делаете, фреймворк Flutter не будет уведомлен об изменении. Для правильного обновления состояния виджета, вы всегда должны делать все ваши изменения внутри метода setState() .

Следующий код показывает, как сделать это с помощью штампа времени для построения уникальной строки запроса:

Теперь ваш пользовательский класс State готов. Все, что вам нужно сделать дальше — это создать его экземпляр и вернуть его из метода createState() вашего виджета с отслеживанием состояния.

Если передать методу runApp() экземпляр вашего виджета с отслеживанием состояния, перезагрузить приложение и нажать на кнопку несколько раз, вы должны увидеть, как каждый раз отображается новая фотография.

Заключение

Теперь вы знаете, как работать с виджетами как без указания состояния, так и с указанием состояния в приложениях Flutter. Вы также узнали, как применять к ним тему оформления Material Design, динамически изменять их содержимое и делать их интерактивными.

Стоит отметить, что Flutter не использует родные виджеты какой-либо мобильной платформы. Он создает все виджеты сам, используя высоко-производительный 2D графический движок Skia, который широко использует ресурсы GPU. В результате Flutter приложения часто выдают около 60 кадров в секунду и являются очень плавными и отзывчивыми в работе.

Чтобы узнать больше о виджетах в Flutter, обратитесь к официальной документации.

Читайте также: