Создание кроссплатформенных мобильных приложений с трепетом Google

На протяжении многих лет было многочисленные межплатформенные мобильные рамки с устойчивыми улучшениями для разработчика опыта и производительности на протяжении всего. Пахашка Google Это новое дополнение к упаковке, и особенно интересно, потому что, а не использование JavaScript «Bridge» как много рамки (таких как React Native), он компилируется в истинный родной код.

Вы можете узнать немного о том, как он работает в вводном видео ниже или читается на пошаговой руководстве для начала работы с трепетом. Для получения дополнительной консультации взгляните на нашу коллекцию учебных пособий, объясняющих Как построить приложение Отказ Или, если вы строите сайт, выберите Строитель сайта и веб хостинг Сервис от наших руководств. Не доволен своим хранилищем? Вот некоторые облачное хранилище опции.

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

01. Установить

Вам нужно будет загрузить и установить несколько вещей, прежде чем вы сможете использовать флаттер:

• Xcode для поддержки iOS
• Android Studio для поддержки Android
• Android SDK (скачать через Android Studio, как только вы создадите новый проект)

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

Теперь вы готовы начать с трепетания. Скачать Флаттер СДК Отказ Извлечь его туда, где вы хотите, чтобы он был установлен. Нам нужно обновить наш путь, поэтому MacOS может найти флаттера, где бы вы ни вызови его. Открыть (или создать) $ Главная / .bash_profile :

sudo atom $HOME/.bash_profile

Теперь добавьте каталог Flutter / Bin к вашему $ Путь :

export PATH=/Users/simon/dev/flutter/bin:$PATH

Запустите команду оболочки, чтобы обновить профиль Bash:

source $HOME/.bash_profile

Теперь мы можем начать использовать флаттер CLI. Первое, что нужно сделать, это убедиться, что у вас есть последняя версия:

flutter upgrade

02. Исправить любые проблемы

После того, как это сделано, флаттер предлагает удобный диагностический инструмент, который проверит, будет ли все, что вам нужно, установлено и настроено правильно. Это действительно полезно:

flutter doctor

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

Как только инструмент счастлив с трепетом, Android Toolchain, IOS Toolchain и Android Studio, вы должны идти. Не беспокойтесь о подключенных устройствах на данный момент.

XCode может потребовать несколько дополнительных шагов в оболочке, чтобы полностью настроить:

 Sudo Xcode-Select - SSWitch /aplications/xcode.app/contents/developer
Brew install --head libimobiledevice
Brew Install IdeviceInstaller.
Brew устанавливает какоапод
POD Setup 

И Android-студия часто требует лицензионного соглашения, принимающего:

 Пахат доктор --android-лицензии 

03. Найдите IDE и начните новый проект

Теперь настроен трепетание, вы захотите работу IDE. Есть плагины для Android-студии Android и Intellij. Мы собираемся пойти с VS-кодом, который также имеет собственный флаттер плагин.

Запустите VS код и нажмите «Просмотр» и GT; Палитра команд. Введите «Установить» и выберите расширения: Установите действие расширения. Ищите «флаттер» и установите флаттер плагин. После прочего, перезапустите VS-код.

Теперь мы готовы начать развиваться. Запустите новый проект через командную палитру, выбрав флаттер: новую опцию проекта. Назовите свой проект, выберите, где сохранить его, и VS Code будет вызывать трепетание, чтобы генерировать новый проект.

04. Настройте виртуальные устройства

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

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

 Открыть -а-симулятор 

Затем вы должны увидеть симулятор iOS, доступный при перезапуске VS-кода.

Android более сложный. Загрузите Android Studio и в рамках проекта Android, нажмите Инструменты и GT; Android & GT; AVD Manager. Выберите Создать виртуальное устройство.

Выберите устройство для эмуляции - например, Google Pixel 2. Нажмите Далее, и вы также можете выбрать системное изображение (I.E. версия ОС) для загрузки. На следующей странице под эмулируемой производительностью выберите Аппаратное обеспечение - GLES 2.0, чтобы включить аппаратное ускорение графики на эмуляторе. Закончить процесс.

После того, как вы создали виртуальное устройство в Android Studio, перезапустите VS-код, и вы увидите, как ваш эмулятор Android появляется рядом с симулятором iOS в списке устройств VS Code.

Теперь, если вы не нажмете устройства, вы можете выбрать iOS или Android-устройство, а виртуальный телефон будет стрелять на ваш рабочий стол. Попробуйте его с помощью симулятора iPhone X.

04. Проверьте приложение стартера

Теперь симулятор работает, вы можете проверить приложение стартера. Нажмите F5 или нажмите Debug & GT; Начните отладку. Приложение загрузится на симулятор, и вы можете попробовать взаимодействовать с ним. Будьте терпеливы, если это не произойдет сразу, так как это может занять некоторое время, чтобы построить.

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

 Android / Gradlew 

Затем вы можете открыть эмулятор Android и запустите проект в режиме отладки, как вы сделали для iOS.

Отличная особенность флаттера состоит в том, что она поддерживает «горячую перезагрузку» - то есть вы можете изменить свой источник и увидеть изменения, отраженные в симуляторе сразу. В main.dart.dart. Давайте сделаем пару изменений в классе MyApp, в то время как симулятор iPhone X работает:

 Основная настройка: Цвета. Зеленые,
Главная: Новый myhomepage (Название: «Книга рецептуры»), = 

Вы должны увидеть изменения вступить в силу, как только вы экономите.

06. Исследуйте систему виджета флаттера

О чем мы еще не говорили, это язык программирования DART, который использует трепетание. DART - это объектно-ориентированный язык с синтаксисом C-стиля C, разработанный Google, и все развитие трепетания использует его. Если у вас уже есть опыт разработки веб-сайтов или мобильных устройств, то он не должен быть совершенно инопланетным для вас.

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

Это легко видно в MyApp учебный класс. MyApp это Startelswidget. (Это означает, что это неизменяется). То строить() Метод, который мы переоценены, сообщает, что следует положить, как виджет должен быть представлен. Это похоже на реагировать оказывать() функция.

Метод возвращает Материал Виджет, который представляет приложение, которое использует дизайн материала Google. Это в свою очередь имеет несколько свойств, которые сами виджеты: Тема Определяет визуальный стиль, который будет использоваться и Myhomepage. пользовательский виджет определяется дальше вниз main.dart.dart. Файл, который содержит тело приложения.

07. Отредактируйте свой контент

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

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

 Класс _myhomepageState расширяет состояние & lt; myhomepage & gt; {
 @ @override.
 Виджет сборка (контекст BuildContext) {
   Вернуть новый эшафот (
     AppBar: New AppBar (
       Название: новый текст (Widget.title),
     ),
     Тело: новый контейнер (
       Украшение: новая коробка (цвет: цвета. Брус 
),
       Ребенок: новый рецепт ()
     Несомненно
   );
 }
} 

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

 Рецепт класса расширяет {
 @ @override.
 Виджет сборка (контекст BuildContext) {
   Список & lt; виджет и gt; виджеты = новый список & lt; виджет и gt; ();
   Вернуть новый ListView (дети: виджеты);
 }
} 

08. Загрузите некоторые активы

Далее, давайте загрузим некоторые активы с помощью приложения, чтобы мы могли добавить их в Посмотреть список виджет внутри Рецензит Отказ Статические активы для приложения указаны в pubspec.yaml. Под сечением «флаттера»:

 Активы:
   - IMG / Burts.jpg
   - IMG / Curry.jpg
   - IMG / Pasta.jpg 

Мы также создадим простую структуру данных в Main.dart, сопряжение изображений с строками, чтобы действовать как миниатюр и сводку для рецептов.

 VAR рецепты = {
   «Завтрак.jpg»: «Начните день прямо с этим питательным завтраком».,
   'pasta.jpg': «Ух ты друзья, сделав свои собственные свежих макарон».,
   «Curry.jpg»: «Показываю свои кулинарные навыки с богатым карри».,
}; 

09. Закончить

Наконец, давайте обновимся Рецензит Чтобы построить список виджетов, отображающих рецепты. Мы используем Image.asset загрузить статические активы, которые мы включены в pubspec.yaml. Отказ

 рецепты .Foreach ((большой палец, заголовок) = & gt; widgets.add (
       Новый контейнер (ребенок:
         Новый прокладки (прокладки:
           New EdgeiSsets.all (16.0), ребенок:
             Новый список (
               Ведущий: image.asset ('img /' + большой палец, ширина: 80,0),
               Название: Текст (подпись)
             Несомненно
           ),
           украшение:
             Новая Boxdecoration (
                 Граница: новая граница (
                     Нижние: новый борсид (цвет: цвета.
                 ),
                 Цвет: цвета.Броун 

             Несомненно
       Несомненно
     Несомненно
); 

Надеюсь, вы начинаете почувствовать, как трепетание использует виджеты для создания приложений. Попробуйте использовать симулятор, чтобы повернуть устройство. Макет флаттера автоматически устанавливает изменения. Для сравнения попробуйте приложение на эмуляторе Android.

Эта статья была первоначально опубликована в сеть Самый продаваемый журнал мира для веб-дизайнеров и разработчиков. Купить Выпуск 310. или же подписываться Отказ

Прочитайте больше:

• Возьми голову вокруг реагирования с этими пятью факторами
• 11 творческих бесплатных приложений для iPhone для дизайнеров
• Как проектировать значки приложений