Как сделать приложение на flutter
Добавил пользователь Владимир З. Обновлено: 04.10.2024
Недавно google анонсировал beta версию Flutter. Flutter - это новый кроссплатформенный UI framework, который включает в себе набор инструментов: движок для 2D рендеринга, готовый набор UI компонентов и набор инструментов для разработки. Он позволяет писать кроссплатформенные приложения с общей кодовой базой.
Flutter состоит из трёх компонентов:
- Flutter engine.
- Foundation library.
- Design-specific widgets.
Flutter engine - написан на C++, предоставляет низкоуровневую поддержку рендеринга, использует для этого графическую библиотеку Skia. Skia - это 2D графическая библиотека, с открытым исходным кодом, которая предоставляет кроссплатформенное API. Она служит графическим движком для Google Chrome, Chrome OS, Android, Mozilla Firefox, Firefox OS и т.д. На официальном сайте есть примеры, которые запускаются сразу из браузера.
Foundation library - включает в себя базовые классы и функции, которые используются для создания приложения с использованием Flutter. Данная библиотека написана уже на языке Dart.
Design-specific widgets - это набор уже готовых базовых графических компонентов для построения пользовательского интерфейса. Данный набор состоит из двух крупных наборов компонентов:
- Material Design widgets - графические компоненты реализующие спецификацию material design.
- Cupertino widgets - набор реализующий Apple iOS дизайн.
Особености Flutter
Всё есть виджет
Виджет представляет собой строительный блок для построения пользовательского интерфейса, который по сути является согласованной унифицированной моделью.
С помощью виджета можно определить:
- структурные элементы, например кнопки или меню
- стилистические элементы, например шрифты или цветовую схему
- разметку макета, например отступы.
Виджеты выстраиваются в иерархию с помощью композиции. Каждый виджет находиться внутри другого виджета и наследует его свойства. Характерной особенностью является то что корневой виджет выполняет роль application.
Так же виджет позволяет получать и обрабатывать события и заменять виджеты в иерархии динамически.
Иерархия слоёв
Установка Flutter
Что бы попробовать Flutter в деле необходимо клонировать репозиторий с GitHub из ветки beta с помощью команды:
Далее нужно добавить переменные окружения PATH. Для этого в конец файла ~/.bashrc нужно добавить следующие строки:
Где в первой строке необходимо указать путь к каталогу с исполняемым файлом flutter, который находиться в каталоге /bin. Во второй строке нужно добавить путь к Android SDK.
Следующая команда проверит и при необходимости закачает все зависимости, которые нужны для Flutter:
После того как все необходимое будут закачено, в терминале будет выведена следующая информация:
C помощью команды flutter devices можно увидеть список подключённых устройств. В моём случае это эмулятор:
Установка плагинов в Android studio (Flutter и Dart)
Для поддержки Flutter в Android Studio необходимо установить плагин Flutter из репозитория. Для этого на экране приветствия нужно выбрать пункт меню Configure | Plugins.
В окне Plugins нужно выбрать кнопку Browse repositories.
В строке поиска вбиваем название плагина Flutter и выбираем кнопку Install.
Если ранее не был установлен плагин Dart, то появиться диалоговое окно, где предложат это сделать. Соглашаемся с установкой.
После установки плагина необходимо перезапустить Android Studio. После этого в основном меню появиться новый пункт Start a new Flutter project.
Создание нового проекта
После установки плагинов в основном меню Android Studio выбираем пункт Start a new Flutter project. После выбора пункта запуститься мастер создания проекта:
Выбираем пункт Flutter Application. Далее нажимаем на кнопку Next и переходим к следующему шагу:
Здесь необходимо указать путь к Flutter SDK, который был закачен ранее. Нажимаем на кнопку Next. На следующем завершающем шаге нажимаем кнопку Finish. После этого сгенерируется Flutter проект.
Запустим эмулятор, и произведём запуск приложения. Нужно перейти в корневой каталог проекта и выполнить команду:
После компиляции приложение запуститься на устройстве:
В следующей статье создадим свой собственный экран из готовых компонентов Flutter.
С момента выпуска Flutter в декабре 2018 года он набрал обороты и быстро становится популярным выбором для многих профессиональных разработчиков мобильных устройств по всему миру.
Опираясь на успех языка Dart и экосистемы Flutter, поддержка настольных компьютеров предоставляет новые возможности для создания великолепных настольных приложений с чистыми и читаемыми кодовыми базами и высокопроизводительными двоичными файлами.
В этой статье мы рассмотрим процесс создания простого desktop приложения с помощью Flutter и рассмотрим возможности и проблемы использования этих инструментов для создания законченных приложений.
Требования
Для создания desktop приложений с помощью Flutter требуется современная среда Flutter SDK с включенной поддержкой рабочего стола:
- Если у вас его еще нет, загрузите Flutter для вашей ОС с их сайта.
- Переключитесь на главный канал с помощью $ flutter channel master
- Вы можете обновить Flutter (при необходимости) с помощью $ flutter upgrade
Чтобы включить поддержку для вашей целевой среды:
- Linux: $ flutter config --enable-linux-desktop
- MacOS: $ flutter config --enable-macos-desktop
- Window: $ flutter config --enable-windows-desktop
Команда flutter create в настоящее время поддерживает все еще не основные операционной системы (по состоянию на декабрь 2019 года) только MacOS. Для получения дополнительной информации о текущем и будущем статусе поддержки настольных компьютеров, можете посетить GitHub.
Настройка проекта
Чтобы создать приложение для macOS, просто запустите, $flutter create и проект будет создан. Для создания приложения, которое также может поддерживать Linux и Windows, проект Flutter предоставляет стартовый проект, поддерживающий все три среды, с проектом flutter-desktop-embedding.
Он может быть склонирован или загружен для использования в качестве отправной точки для новых проектов.
Пример проекта, использованный в этой статье, был создан путем клонирования рабочего стола флаттера с встраиванием репозитория и копированием содержимого example/ в новый проект. Для получения копии примера кода проекта этой статьи, проверьте этот репозиторий.
Давайте посмотрим на файл определения проекта, pubspec.yaml:
Для этого и других встроенных проектов для настольных компьютеров требуется последняя версия Flutter. В дополнение к нескольким типовым шрифтам была включена зависимость для простого Desktop плагина - нативная палитра цветов. Далее мы проверим код Dart для этого простого одноэкранного демонстрационного приложения.
Точка входа в приложение
Основной файл для этого приложения - стандартный lib/main.dart :
Функция main() запускает приложение и устанавливает целевую платформу отладки по умолчанию на fuchsia, которая представляет собой ОС, разрабатываемую в Google и включающую пользовательский интерфейс, созданный с помощью Dart и Flutter. Класс MyApp - это базовая реализация StatelessWidget, которая возвращает основной контейнер для самого приложения, со стандартом заголовка, темы и домашнего виджета для любого приложения Flutter.
Обратите внимание, что свойство darkTheme и его значение ThemeData.dark() обеспечивают темную тему, когда она запрашивается операционной системой, как в случае macOS с включенной темной темой для всей системы. Далее мы рассмотрим содержание страницы примера и ее назначение.
Домашний экран
Большая часть содержимого приложения для этой простой демонстрации находится в lib/home.dart :
В Home мы импортируем несколько пакетов (включая плагин color_panel ) и реализуем StatefulWidget, чтобы этот экран был в состоянии хранить и обновлять приложения. Dart и Flutter предоставляют отличные возможности для управления состоянием с использованием различных инструментов и шаблонов, самым простым из которых является виджет с состоянием, подобный показанному в этом файле.
Свойства, управляемые в состоянии этого виджета, включают цвет и счетчик. Методы _increment и _decrement используют метод setState для увеличения или уменьшения счетчика. Метод _showPanel запрашивает экземпляр ColorPanel из импортируемого плагина, а затем вызывает на нем show , который будет запрашивать нативный выбор цвета из операционной системы. Когда выбран цвет, setState используется для обновления состояния виджета новым цветом, который ставит его в очередь для перерисовки движком Flutter.
Flutter в последнее время становится популярным благодаря гибкости, производительности, быстрого создания приложений и простоте изучения языка.
Независимо от того, являетесь ли вы опытным разработчиком или новичком, изучение Flutter потребует от вас лишь нескольких хорошо информированных видеороликов, учебных ресурсов и большого количества самообучения.
В этой статье вы узнаете что такое Flutter, где и как его лучше учить Flutter и как собственно его установить.
Что такое Flutter?
Flutter - это фреймворк (скорее SDK) с открытым исходным кодом, разработанный Google, который в основном используется для разработки мобильных приложений.
Мы также можем разработать веб-версию и версию для ПК для одного и того же приложения, используя единую кодовую базу.
Flutter состоит из множества красиво оформленных виджетов , богатого набора API-интерфейсов управления движением, а также прокрутки, навигации, шрифтов и значков, которые работают на разных платформах. Это обеспечивает бесперебойную работу как на телефонах Android, так и на iOS.
Приложения на Flutter скомпилированы в исходном коде, поэтому обладают высокой производительностью и скоростью.
Зачем изучать Flutter?
Разработка мобильных приложений - тренд 2021 года. Просматривать и выполнять действия удобнее всего на мобильном телефоне, потому что мы можем делать это где угодно и когда угодно.
Flutter - это полностью настраиваемый фреймворк, который позволяет создавать выразительный и гибкий пользовательский интерфейс, его легко изучить и ускорить разработку.
Если этих причин недостаточно, вот еще несколько причин, по которым вам стоит изучить Flutter:
Особенности Flutter
И последнее, прежде чем мы дадим вам ресурсы для изучения Flutter, важно, чтобы вы знали, чтобы вы могли просто покопаться в ресурсах и получить практическое обучение, не прибегая к введению еще раз!
Некоторые уникальные особенности Flutter:
- Сосредоточьтесь на настраиваемых виджетах, все наборы виджетов из Material Design и пакета Cupertino (а не Android XML) доступны для обеспечения беспроблемной разработки пользовательского интерфейса.
- Hot reload помогает разработчикам мгновенно видеть свои изменения. Это сокращает время разработки, а также время исправления ошибок.
- Однократная запись, запуск в любом месте, код, работающий на любой платформе без изменений.
- Flutter использует язык программирования Dart, который использует как предварительную, так и своевременную компиляцию, обеспечивая высокую производительность и более быстрое время запуска.
- Собственный машинный код ARM обеспечивает высокую производительность как на Android, так и на iOS.
Предпосылки для изучения Flutter
Чтобы начать изучение Flutter, вам необходимо знать следующее. Если вы понятия не имеете о чем-либо из нижеприведенного, лучше сначала взять эти концепции, а затем продолжить изучение Flutter:
- Знание нативной разработки под Android: если вы хотите разрабатывать очень тонкие и настраиваемые приложения.
- Концепции ООП: поскольку такие языки, как Java, C ++, основаны на концепциях ООП (объектно-ориентированного программирования), важно быть с ними основательно. Вот хорошее видео, которое легко объясняет ООП.
- Вы должны знать программирование на Dart, прежде чем изучать Flutter: но это не так уж и сложно. Dart - это язык программирования общего назначения от Google.
- Знание C++ / Java - дает дополнительное преимущество, но не обязательно!
Как изучить Flutter?
Сейчас хорошее время, чтобы начать изучать Flutter. В интернете много ресурсов, и информационная перегрузка может быть огромной. Вот почему мы разработали лучшие ресурсы, которые помогут вам правильно изучить Flutter. На официальном веб-сайте Flutter доступно множество документации, но вам следует обратиться к другим ресурсам для большей глубины и разнообразия.
1. Видеоуроки и документация
На официальном сайте доступно множество примеров видео и документации, но они на английском языке, поэтому следует включить субтитры.
На youtube также есть уроки Flutter на русском языке:
Также желательно проверять виджет недели на YouTube от команды Flutter , который охватывает виджеты из SDK. Если вам нужно быстро разобраться с виджетом - это то место, куда нужно обратиться.
2. Книги
Книги - отличный способ получить углубленные знания по любому предмету, а также справочный материал. Некоторые из лучших книг по изучению Flutter:
Хороших книг по Flutter на русском языке в интернете практически нет, поэтому все же приведу пару на английском языке для тех кто умеет свободно читать и понимать язык.
- Learn Google Flutter fast
- Beginning Flutter – A hands-on guide to App Development
Как новичок, вы сможете многое почерпнуть только из этих двух книг.
Установка Flutter
Первое, что вам нужно, это SDK - Software Development Kit - набор программных инструментов, которые входят в единый пакет и могут использоваться в вашей среде разработки.
Для разработки мы используем интегрированную среду разработки (IDE), которая упрощает и ускоряет разработку и тестирование.
Как мы узнали ранее, есть 2 популярных IDE для Flutter:
- VS Code - это легкий, быстрый и многофункциональный IDE.
- Android Studio - тоже само, однако заточенная для разработки под Android.
Во многом все зависит от вашего выбора, однако новичкам скорее всего подойдет Visual Studio Code.
Далее следуя официальной документации, вы сможете установить се необходимые для начала компоненты.
Создание простого приложения на Flutter
Давайте создадим простую программу Hello World. С помощью этой программы мы поймем структуру Flutter и основные используемые методы. Хотя это слишком простое приложение, чтобы оценить все детали, но все же дает хорошее начало.
Чтобы создать новый проект, просто введите
Проект будет создан со следующей структурой:
- android - папка компонентов под Android. Любая реализация для Android будет помещена в эту папку.
- assets - для хранения файлов данных, изображений и т.д.
- ios - папка компонентов под iOS. Любая реализация для iOS будет помещена в эту папку.
- lib - здесь создаются файлы всего кода. main.dart - основной файл
- test - для модульного тестирования
Для нашего простого приложения нам понадобится только файл main.dart. Файл поставляется с некоторым кодом, и разработчики в основном удаляют его, чтобы написать свой код с нуля.
Мы тоже этим займемся!
Первое, что важно - импортировать пакет material. Он используется для включения компонентов пользовательского интерфейса.
Как и во многих других языках, выполнение начинается с метода main. Он должен возвращать метод runApp() , который вызывает код для выполнения.
Выполняемый код - это не что иное, как виджет.
Итак, что такое виджет?
Если вы еще не знали, виджетом может быть что угодно - кнопка, список, таблица, поле ввода, карточный вид в основном, все, что управляет представлением.
Итак, все ваше приложение Flutter представляет собой набор виджетов, которые объединяются и отображаются в красивом пользовательском интерфейсе.
Вот почему каждый создаваемый вами класс должен наследовать класс виджета. Поскольку все, что будет делать наше приложение, - это распечатать Hello World, нам просто нужен виджет, которому не нужно сохранять какое-либо состояние - stateless widget . У stateless widget должен быть метод сборки.
MaterialApp - это оболочка виджета, одним из материалов которой является материал, а в Center - виджет, который центрирует элементы. Text добавляет виджет текстового поля. Помимо атрибутов, которые вы видите - home, child - есть много других атрибутов, таких как стиль, положение, декорации и т.д.
Готовясь прорваться сквозь тернии кроссплатформенной разработки, очень важно правильно выбрать и проверить инструментарий, которым собираетесь пользоваться. Жизненный опыт подсказывает, что изучение любой новой технологии требует крови, пота и слез. Однако удобная IDE и правильная настройка ПО помогут минимизировать количество оставшихся шрамов. Так что не будем пренебрегать подготовительным этапом и рассмотрим его во всех подробностях.
Оглавление
Настройка IDE и SDK
Впрочем, в нашем случае для iOS-разработчиков произошедший переезд бесшовным не был, а обнаруженные швы немало натерли непривычные к такому обращению места. Вот пара замечаний, которые, надеемся, помогут коллегам морально подготовиться к смене среды разработки:
Следующим шагом станет загрузка и установка Flutter SDK, а также указание пути к нему в переменной окружения PATH. Проверить, все ли сделано верно, поможет flutter doctor. Он же подскажет, как устранить появившиеся проблемы. И не забудьте установить Flutter и Dart плагины (подробнее тут) для Android Studio, а также пару отличных помощников: Flutter Pub Version Checker (подскажет, какая из используемых библиотек обновилась) и Flutter Snippets (напишет boilerplate code за вас).
Надо признать, владельцам Mac’ов придется повозиться с установкой и настройкой ПО для Flutter, но взамен они получат значительное преимущество — возможность тестировать приложение на симуляторах и реальных iPhone и iPad. А вот обладатели Windows будут вынуждены пользоваться удаленными машинами через сторонние CI сервисы. И хотя Codemagic или Travis CI условно бесплатны (имеют пробный период или ограничение по затраченным на сборку минутам в месяц), для серьезной и продолжительной работы этих возможностей, скорее всего, не хватит. Вдобавок, лишившись возможности отлаживать код в режиме реального времени, уповать останется только на логирование.
Итак, можно переходить и к созданию проекта. Для этого, разыскав в меню опцию File → New → New Flutter Project, выбираем Application, заполняем название, имя пакета (оно же bundle ID) и языки для iOS- и Android-кода. Стоит заметить, что имя пакета лучше задавать сразу правильное, так как смена его впоследствии грозит потерей большого числа калорий и нервных клеток.
А теперь поговорим о настройке тех частей приложения, которые первыми бросаются пользователю в глаза: иконки и launch image.
Смена иконки приложения
Создание иконки для iOS-версии приложения
Создание иконки для Android-версии приложения
Останется только убедиться, что в файле AndroidManifest верно указано имя файла:
Для тех, кого не смущает количество импортированных в проект сторонних библиотек, существует и альтернативный вариант: flutter_launcher_icons. Добавляем либу в pubspec.yaml, там же указываем путь к исходнику иконки, а также прописываем, для каких платформ нужно масштабировать изображение:
Смена Launch Image (Splash Screen)
Большинство splash-экранов представляют собой изображение на залитом сплошным цветом фоне. Настройка такого экрана для Android довольно проста: открываем launch_background.xml (android → app → src → main → res → drawable) и меняем его на вроде:
Создание Launch Image для iOS-версии приложения
Что дальше
Итак, мы все подготовили, настроили и проверили, можно приступать к написанию реального кода приложения. Вот только для этого необходимо окунуться в новый язык — Dart. Как раз о нем мы и поговорим в следующей статье.
Урок по созданию простого приложения при помощи Flutter. Flutter — это проект от Google, который позволит вам создавать нативные приложения.
JavaScript развился достаточно хорошо и мы увидели много фреймворков для создания гибридных мобильных приложений — возьмите, например, Ionic и Angular. Затем на сцене появились React Native и NativeScript, которые позволяют вам создавать нативные мобильные приложения без знания Java или Swift.
Можем ли мы создать приложения без этих фреймворков? Да! Эта статья позволит вам создать первое приложение на Flutter. Flutter — это проект от Google в альфа-версии, который должен позволить вам создавать нативные приложения.
Наша цель: создать приложение для списка покупок на Flutter и Firebase.
Что вам нужно установить
Flutter: установите Flutter по этой ссылке. Не забудьте пройти все шаги установки, включая плагины.
Xcode: если вы работаете с Mac, вам нужна будет Xcode, которую вы можете скачать из App Store.
Android Studio: Она вам будет нужна для создания Android-версии вашего приложения.
IDE: Я использую VSCode как основной редактор текста и для него существуют ещё плагины Flutter и Dart, но я рекомендую Intellij IDEA для Flutter-разработки. Скачайте его здесь.
Запустите тестовое приложения
Если вы пропустили некоторые шаги в установке, то,возможно, вы не увидите эту опцию 💀. Если же вы все сделали правильно, то давайте продолжим.
Заполните все остальное по своему желанию.
Java по умолчанию используется для Android, но я переключился на Swift для iOS, потому что ничего не знаю о, Objective-C — вы можете сделать, как хотите.
Теперь у вас есть каркас приложения. Уберите все комментарии, потому что они бесполезны. Также уберите методы floatingActionButton, body content и _incrementCounter.
Создание интерфейса
Создайте новую строку в классе и замените название приложения и виджета. Я также изменил цвет на красный. Мне так больше нравится!
В _MyHomePageState создайте TextEditingController, который является контроллером для редактируемого текстового поля.
Затем создайте метод _handleSubmitted
и добавьте этот код, чтобы создать контейнер ввода внизу.
Теперь вернемся к body нашего Scaffold. Измените код body следующим образом:
Body почти закончен. У нас есть список, разделители и элементы ввода. Как видите, я использовал виджет _createInputContainer() как дочерний по отношению к контейнеру. Это хороший способ сохранять свой код чистым и организованным.
Что ещё нужно сделать
- Заполните метод _handleSubmitted.
- Добавьте текст как новый элемент списка и выведите его.
- Сделайте список интерактивным и понятным для пользователя.
- Добавьте в проект базу данных Firebase.
Давайте продолжим
Если мы думаем об обычном приложении, которое получает входные данные от пользователя, первым делом мы думаем о том, чтобы очистить поле ввода после отправки:
Теперь пользователи смогут отправлять свои данные, а приложение будет управлять этими данными и потом очищать поле ввода.
Теперь мы создадим свой виджет, который будет отображать предметы списка. Сначала сделаем виджет, который будет представлять отдельный элемент. Создадим StatelessWidget, назовем его ListItem и поместим снаружи _MyHomePageState.
В новом контейнере мы устанавливаем симметричный вертикальный маркер со значением 10.0, потому что иначе элементы списка будут выглядеть слишком близко друг к другу. Затем в качестве дочернего элемента мы добавим виджет Row, который отображает его дочерние элементы в горизонтальном массиве.
Таким образом, весь код для виджета ListItem выглядит так:
Теперь вернемся к _MyHomePageState и добавим эту строку:
Сейчас элементы списка находятся в виджете List. После выхода из приложения список снова станет пустым, поэтому нам нужно будет добавить в приложение Firebase.
Уделим немного внимания методу _handleSubmitted.
В качестве финального шага перейдем к ListView в body нашего главного виджета.
До этого изменения функция itemBuilder была null. Теперь она создает запись в списке по индексу из _shopItems, и мы изменили itemCount на значение _shopItems.
Все работает хорошо, только при добавлении нового предмета он появляется в верхней строке списка. На этом я хочу закончить, потому что не хочу, чтобы вам стало скучно читать все в одном туториале.
Читайте также: