Flutter android studio уроки

Напишите свое первое приложение

Часть 1

Это руководство по созданию вашего первого приложения Flutter. Если вы знакомы с объектно-ориентированным кодом и основными понятиями программирования, такими как переменные, циклы и константы, вы можете завершить это руководство. Вам не нужен предыдущий опыт работы с Dart, мобильным или веб-программированием.

Эта лабораторная работа является 1 частью двухкомпонентной лабораторной работы. Вы можете найти часть 2 на Google Developers Codelabs (а также копия этой лабораторной работы, часть 1).

То, что вы построите в первой части.

То, что вы создадите в первой части

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

Анимированный GIF показывает, как приложение работает по завершению части 1.

То, что вы узнаете в первой части:

• Как написать flutter-приложение, которое выглядит естественно на iOS, Android и WEB
• Базовая структура приложения Flutter
• Поиск и использование пакетов для расширения функциональности Использование горячей перезагрузки hot reload для более быстрого цикла разработки
• Как реализовать Stateful-виджет
• Как создать бесконечно подгружаемый список

Во второй части этой лабораторной работы вы добавите интерактивность, измените тему приложения и добавите возможность навигации к новому экрану (называемому «Маршрут в Flutter»).

Что вы будете использовать:

Для работы в этой лаборатории вам понадобятся две программы: Flutter SDK и редактор. Эта лабораторная работа предполагает использование Android Studio, но вы можете использовать предпочитаемый вами редактор.

Вы можете запустить эту лабораторную работу с помощью любого из следующих устройств:

• Физическое устройство (Android или iOS), подключенное к компьютеру и переходящее в режим разработчика.
• Симулятор iOS (требуется установка инструментов Xcode).
• Эмулятор Android (требуется настройка в Android Studio)
• Браузер (для отладки требуется Chrome).

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

Вам нужно запустить команду конфигурации только один раз. После того, как вы включите веб-поддержку, каждое созданное вами приложение Flutter также компилируется для веб. В IDE в разделе devices или в командной строке flutter devices вы должны увидеть Chrome и веб-сервер в списке. Устройство Chrome автоматически запускает Chrome. Веб-сервер запускает сервер, на котором расположено приложение, чтобы его можно было загрузить из любого браузера. Используйте устройство Chrome во время разработки, чтобы можно было использовать DevTools и веб-сервер, когда нужно протестировать приложение в других браузерах. Дополнительные сведения см. в разделах «Создание веб-приложений с использованием Flutter» и «Напишите свое первое Flutter-приложение в Интернете«.

Шаг 1: Создайте стартовое Flutter приложение.

Создайте простое, шаблонированное приложение Flutter, воспользовавшись инструкциями в разделе «Начало работы с первым приложением Flutter«. Назовите проект startup_namer (вместо flutter_app).

В основном вы будете редактировать lib/main.dart, где находится код Dart.

1. Замените содержимое lib/main.dart.
   Удалите весь код из lib/main.dart. Заменить следующим кодом, который отображает «Hello World» в центре экрана.

lib/main.dart:

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

Android IOS

• В этом примере создается приложение «Material «. Material — это визуальный язык дизайна, который является стандартным на мобильных устройствах и в Интернете. Flutter предлагает богатый набор виджетов Material. Хорошей идеей является использование uses-material-design: true запись в разделе Flutter в вашем файле pubspec.yaml. Это позволит вам использовать больше возможностей Material, таких как их набор предопределенных иконок.
• Метод main() использует обозначение стрелки (=>). Для однострочных функций или методов используйте обозначение со стрелкой.
• Расширение StatelessWidget, что делает само приложение виджетом. В Flutter почти все является виджетами, включая выравнивание, отступы и разметку.
• Виджет Scaffold из библиотеки «Material» предоставляет стандартную панель приложения, заголовок и свойство body, в котором хранится дерево виджетов для главного экрана. Поддерево виджетов может быть довольно сложным.
• Основной задачей виджета является предоставление метода build(), который описывает, как отображать виджет с точки зрения других виджетов нижнего уровня.
• Тело для данного примера состоит из виджета «Center«, содержащего дочерний виджет «Text«. Виджет «Center» выравнивает свое поддерево виджета по центру экрана.

Шаг 2: Используйте внешний пакет

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

1. Файл pubspec.yaml управляет активами и зависимостями для приложения Flutter. В pubspec.yaml добавьте english_words (3.1.5 или выше) в список зависимостей:

2. При просмотре файла pubspec.yaml в редакторе Android Studio нажмите кнопку Pub get. Это втянет пакет в ваш проект. В консоли должно появиться следующее:

Выполняя Pub get, автоматически генерируется файл pubspec.lock со списком всех пакетов, втянутых в проект, и их номерами версий.

3. В файле lib/main.dart импортируйте новый пакет:

lib/main.dart

По мере набора текста, Android Studio дает вам предложения по импорту библиотек. Затем она отображает строку импорта серым цветом, информируя вас о том, что импортируемая библиотека не используется (пока что).

4. Используйте пакет английских слов для генерации текста вместо использования строки «Hello World»:

Если приложение работает, hot reload обновляет запущенное приложение. Каждый раз, когда Вы нажимаете на hot reload или сохраняете проект, в работающем приложении Вы должны видеть другую пару слов, выбранную случайным образом. Это связано с тем, что объединение слов генерируется внутри метода сборки, который запускается каждый раз, когда требуется отрисовка MaterialApp, или при переключении Платформы в Flutter Inspector.

Android IOS

Если ваше приложение работает некорректно, ищите опечатки. Если вы хотите попробовать некоторые из инструментов отладки Flutter’s, ознакомьтесь с набором инструментов отладки и профилирования DevTools. При необходимости используйте код по следующим ссылкам, чтобы вернуться к работе.

Шаг 3: Добавление Stateful виджета (виджета с индикацией состояния)

Stateless виджеты являются неизменными, а это значит, что их свойства не могут меняться — все значения являются окончательными.

Statefull виджеты поддерживают состояние, которое может изменяться в течение жизни виджета. Реализация stateful виджета требует как минимум два класса: 1) класс StatefulWidget, который создает экземпляр 2) класс State. Класс StatefulWidget сам по себе является неизменяемым и может быть выброшен и регенерирован, но класс State сохраняется в течение всего срока службы виджета.

На этом шаге вы добавите stateful виджет, RandomWords, который создает свой класс State, _RandomWordsState. Затем вы будете использовать RandomWords в качестве дочернего элемента существующего stateless виджета MyApp.

1. Создайте код шаблона для stateful-виджета. В lib/main.dart, поместите курсор после всего кода, введите Return пару раз, чтобы начать со свежей строки.
   В IDE начните вводить stful. Редактор спросит, хотите ли вы создать Stateful виджет. Нажмите кнопку Return, чтобы принять. Появится код шаблона для двух классов, и курсор поместится для ввода имени вашего statefull виджета.
2. Введите RandomWords в качестве имени вашего виджета.
   Виджет RandomWords мало что делает кроме создания своего класса State.

После того, как вы ввели RandomWords в качестве statefull виджета, IDE автоматически обновляет сопровождающий его класс State, называя его _RandomWordsState. По умолчанию имя класса State имеет префикс с подбаром. Префиксация идентификатора с подчеркиванием обеспечивает конфиденциальность в языке Dart и рекомендуется для объектов State.

IDE также автоматически обновляет класс State для расширения State, указывая, что вы используете дженерик — общий класс State, специализирующийся на использовании RandomWords. Большая часть логики приложения находится здесь — оно поддерживает состояние для виджета RandomWords. Этот класс сохраняет список сгенерированных пар слов, который растет бесконечно по мере прокрутки пользователем, а во 2-й части этой лабораторной работы — избранные пары слов по мере добавления или удаления пользователем их из списка путем переключения значка сердца.

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

3. Обновите метод build() в _RandomWordsState:

lib/main.dart (_RandomWordsState)

После добавления state класса, IDE жалуется, что в классе отсутствует build метод. Далее будет добавлен базовый build метод, который генерирует пары слов, перемещая код генерации слов из MyApp в _RandomWordsState.

4. Удалите код генерации слова из MyApp, сделав изменения, показанные в следующем различии:

5. Перезапустите приложение. Приложение должно вести себя как раньше, отображая пару слов каждый раз при hot reload или сохранении приложения.

Если ваше приложение работает некорректно, ищите опечатки. Если вы хотите попробовать некоторые из инструментов отладки Flutter’s, ознакомьтесь с набором инструментов отладки и профилирования DevTools. При необходимости используйте код, приведенный по следующей ссылке, чтобы вернуться к работе.

Шаг 4: Создание бесконечного прокручиваемого ListView

На этом шаге вы разворачиваете _RandomWordsState, чтобы сгенерировать и отобразить список пар слов. По мере прокрутки пользователя список (отображаемый в виджете ListView) растет бесконечно. Конструктор builder ListView позволяет построить просмотр списка лениво, по требованию.

1. Добавьте список предложений _suggestions в класс _RandomWordsState для сохранения предлагаемых пар слов. Также, добавьте переменную _biggerFont для увеличения размера шрифта.

lib/main.dart

Далее в класс _RandomWordsState будет добавлена функция _buildSuggestions(). Этот метод формирует ListView, который отображает предлагаемую пару слов.

Класс ListView предоставляет свойство конструктора, itemBuilder, это factory builder и функция обратного вызова, указанная как анонимная функция. Функции передаются два параметра — BuildContext и итератор строк, i. Итератор начинается с 0 и увеличивается каждый раз при вызове функции. Он инкрементируется дважды для каждой предложенной пары слов: один раз для ListTile, и один раз для Divider. Эта модель позволяет предлагаемому списку продолжать расти по мере прокрутки пользователя.

2. Добавьте функции _buildSuggestions() в класс _RandomWordsState:

lib/main.dart (_buildSuggestions)

/*1*/ Обратный вызов itemBuilder вызывается один раз на каждую предложенную пару слов и помещает каждое предложение в строку ListTile. Для четных строк функция добавляет строку ListTile для объединения слов. Для нечетных строк, функция добавляет виджет разделителя Divider для визуального разделения записей. Обратите внимание, что разделитель может быть трудно увидеть на небольших устройствах.

/*2*/ Добавление виджета разделителя Divider высотой в один пиксель перед каждой строкой в ListView.

/*3*/ Выражение i

/ 2 делит i на 2 и возвращает целочисленный результат. Например: 1, 2, 3, 4, 5 становится 0, 1, 1, 2, 2. При этом вычисляется фактическое количество пар слов в ListView за вычетом виджетов разделителей.

/*4*/ Если Вы достигли конца доступных пар слов, сгенерируйте еще 10 и добавьте их в список предложений.

Функция _buildSuggestions() вызывает _buildRow() один раз на пару слов. Эта функция отображает каждую новую пару в ListTile, что позволяет сделать строки более привлекательными на следующем этапе.

3. Добавьте функцию _buildRow() в _RandomWordsState:

lib/main.dart (_buildRow)

В классе _RandomWordsState обновите метод build() для использования _buildSuggestions(), а не для прямого вызова библиотеки генерации слов. (Scaffold реализует базовую визуальную компоновку Material Design.) Замените тело метода кодом:

lib/main.dart (build)

5. В классе MyApp обновите метод build(), изменив заголовок и превратив домашний виджет в виджет RandomWords:

6. Перезапустите приложение. Вы должны увидеть список пар слов, независимо от того, как далеко вы прокручиваете.

Android IOS

Если ваше приложение работает некорректно, ищите опечатки. Если вы хотите попробовать некоторые из инструментов отладки Flutter’s, ознакомьтесь с набором инструментов отладки и профилирования DevTools. При необходимости используйте код, приведенный по следующей ссылке, чтобы вернуться к работе.

Профилирование или выпуски релизов

До сих пор вы запускали свое приложение в режиме отладки. В отладочном режиме производительность меняется на полезные функции разработчика, такие как горячая перезагрузка и пошаговая отладка. Неудивительно, что в отладочном режиме вы увидите медленную производительность и дрожащую анимацию. Как только вы будете готовы проанализировать производительность или выпустить ваше приложение, вы захотите использовать режимы сборки Flutter’s «profile» или «release». Подробности см. в разделе Режимы сборки Flutter.

Следующие шаги

Вы написали интерактивное флаттер-приложение, которое работает как на iOS, так и на Android. В этой лабораторной работе вы:

• Создали приложение «Flutter» с нуля.
• Написали код на Dart-е.
• Использовал внешнюю, стороннюю библиотеку.
• Использовали горячую перезагрузку для более быстрого цикла разработки.
• Реализовали statefull виджет.
• Создали лениво загружаемый бесконечный список прокрутки.

Если вы хотите расширить это приложение, перейдите ко второй части на сайте Google Developers Codelabs, где вы добавите следующую функциональность:

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

Приложение из части 2

Источник