Флаттер – это фреймворк с открытым исходным кодом создан Google для создания высококачественных мобильных, веб- и настольных приложений на основе единого кода. Давайте вместе посмотрим, как создавать приложения с помощью Flutter с помощью текстового редактора или интегрированной среды разработки (IDE) в сочетании с инструментами командной строки Flutter.

Интегрированная среда разработки (IDE) для Flutter

Вы можете создавать приложения с помощью трепетать использование любого текстового редактора или IDE в сочетании с инструментами командной строки Flutter. Команда Flutter рекомендует использовать редактор, поддерживающий расширение или плагин Flutter, например VS-код е Android-студия. Эти плагины обеспечивают завершение кода, подсветку синтаксиса, помощь в редактировании виджетов, поддержку выполнения и отладки и многое другое.

Вы можете добавить поддерживаемый плагин для выпусков Visual Studio Code, Android Studio или IntelliJ IDEA Community, Educational и Ultimate. плагин Flutter работает соло с перечисленными выпусками Android Studio и IntelliJ IDEA.

Выполните следующие действия, чтобы добавить плагин Flutter в VS Code, Android Studio или IntelliJ:

1. ОткройIDE и найди «трепетать» на рынке плагинов.
2. Выбрать плагин Flutter и нажмите «Установить«.
3. После установки перезапустите IDE, чтобы активировать плагин.

Если вы выберете другую IDE, вы сможете перейти к ней. Следующий этап: Тест-драйв.

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

Чтобы создать свое первое приложение Flutter, выполните следующие действия:

1. Начинать «Просмотр» > «Палитра команд».
2. Введите «флаттер» и выберите Флаттер: Новый проект.
3. Выбирать Приложение.
4. Создайте или выберите родительский каталог для новой папки проекта.
5. Введите имя проекта, например my_appи нажмите Входить.
6. Подождите, пока создание проекта завершится и main.dart появляться.

Приведенные выше команды создают каталог проекта Flutter под названием my_app который содержит простое демонстрационное приложение, использующее i Материальные компоненты.

Запустите приложение

Чтобы запустить приложение Flutter, выполните следующие действия:

1. Найдите строку состояния VS Code (синяя полоса в нижней части окна).
2. Выберите устройство из области Выбор устройства. Более подробную информацию см. Быстрое переключение между устройствами Flutter.
3. Начинать Выполнить > Начать отладку или нажмите F5.
4. Подождите, пока приложение запустится — прогресс будет отображен в представлении. Консоль отладки.

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

Попробуйте горячую перезагрузку

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

Профилируйте или запустите в режиме выпуска

До сих пор вы запускали свое приложение в режиме отлаживать. В режиме отладки производительность приносится в жертву ради удобных для разработчиков функций, таких как горячая перезагрузка и пошаговая отладка. Нередко можно увидеть низкую производительность и резкую анимацию в режиме отладки. Когда вы будете готовы проанализировать производительность или выпустить свое приложение, вам захочется использовать режимы сборки».профиль” о “выпускать» от Флаттера.

Приложение Prima Flutter

Теперь вы готовы начать работу над кодом».Приложение Prima Flutter«. Примерно за полтора часа вы изучите основы Flutter, создав приложение, которое будет работать на мобильных устройствах, настольных компьютерах и в Интернете.

Виджет Флаттер

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

Виджеты в базе

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

Убедитесь, что у вас есть вход uses-material-design: true в разделе flutter вашего файла pubspec.yaml. Позволяет использовать набор по умолчанию Иконки материалов. Обычно рекомендуется включать эту строку, если вы используете библиотеку материалов.

Управление вводом

Большинство приложений включают в себя ту или иную форму взаимодействия пользователя с системой. Первым шагом в создании интерактивного приложения является обнаружение жестов ввода.

Изменение виджетов в ответ на ввод

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

Давайте подведем итог всему

Ниже приведен более полный пример, объединяющий эти концепции: гипотетическое приложение для покупок отображает различные продукты, предлагаемые для продажи, и поддерживает корзину для предполагаемых покупок. Начните с определения класса представления, ShoppingListItem:

Виджет ShoppingListItem следует общему шаблону для виджетов без сохранения состояния. Он сохраняет значения, полученные в своем конструкторе, в переменных-членах. finalкоторый он затем использует во время своей функции build(). Например, логическое значение inCart переключает между двумя визуальными элементами: один использует основной цвет текущей темы, а другой — серый.

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

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

Класс ShoppingList простирается StatefulWidget, что означает, что этот виджет сохраняет редактируемое состояние. Когда виджет ShoppingList вставляется в дерево впервые, фреймворк вызывает функцию createState() чтобы создать новый экземпляр _ShoppingListState связать с этой позицией в дереве.

Когда родительский элемент этого виджета перестраивается, родительский элемент создает новый экземпляр ShoppingListно платформа повторно использует экземпляр _ShoppingListState который уже находится в дереве вместо повторного вызова createState.

Чтобы получить доступ к свойствам текущего ShoppingListиль _ShoppingListState может использовать свою собственность widget.