Flutter Tutorial: руководство по кроссплатформенным приложениям для новичков

Создайте свои собственные приложения для Android

Начните свое путешествие по Flutter прямо с уроков от экспертов и практических занятий практика.

Начало Flutter: разработка мобильных приложений для Android

Что такое m Обильная разработка?

Мобильная разработка включает в себя разработку программного обеспечения, предназначенного для работы на мобильных устройствах (смартфонах, планшетах и ​​т. д.). Хотя мобильная разработка похожа на традиционную разработку программного обеспечения, отличительным фактором является то, что мобильная разработка будет использовать уникальные функции и оборудование мобильных устройств, таких как сенсорный экран, Bluetooth, GPS, камеры и т. Д.

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

Типы мобильных приложений

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

• Нативное приложение: Эти типы приложений разработаны для поддержки конкретная платформа, например Android или iOS. При разработке приложения для iOS вы, скорее всего, будете использовать Swift — относительно новый язык, созданный Apple. Раньше разработчики использовали XCode и Objective-C. В то время как для приложений Android вы будете использовать Java. Разработчики часто предпочитают нативные приложения из-за их способности в полной мере использовать функции мобильных устройств. Разработка собственных приложений может быть сложной задачей, если вы хотите поддерживать пользователей Android и iOS, поскольку код для каждой платформы отличается.

• Гибридное приложение: гибридное приложение сочетает в себе элементы как собственных, так и веб-приложений.. Гибридные приложения похожи на веб-приложения; большая часть приложения написана с использованием таких технологий, как HTML, CSS и JavaScript, которые затем инкапсулируются в собственное приложение. В отличие от типичного веб-приложения, гибридное приложение имеет собственный встроенный браузер и собственное приложение-оболочку. Гибридные приложения — популярный тип мобильных приложений, поскольку они по-прежнему позволяют разработчикам использовать веб-технологии.

Хотите узнать больше о Разработка под Android? Наша статья «Как разработать приложение для Android» посвящена созданию собственных приложений для Android.

Что такое Flutter?

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

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

Поддерживаемый Google, Flutter SDK — это набор инструментов, созданный для интеллектуального проектирования приложений для всех типов экранов и устройств, позволяющий перекрестно -платформенная разработка. Этот инструментарий конкурирует с другими собственными фреймворками совместимости, такими как React Native.

Flutter поставляется с большой коллекцией предварительно созданных виджетов (строки, столбцы, стеки, отступы, центр и т. Д.), Что делает его очень большим. проще разрабатывать и макетировать мобильное приложение. Это означает, что вместо того, чтобы иметь отдельные базы кода для приложения iOS и приложения Android, вы можете использовать Flutter и иметь одну базу кода для всех различных платформ , которые вы хотите, чтобы ваше приложение поддерживало. Некоторые компании, использующие Flutter, — это Google, Groupon, Alibaba, Square, eBay и другие.

Flutter по существу состоит из двух частей:

• Комплект разработчика программного обеспечения (SDK): набор инструментов, которые помогут вам в разработке вашего приложения. Например, у вас будут инструменты, которые компилируют ваш код в собственный код для поддержки iOS и Android.

• Framework: A коллекция виджетов или элементов пользовательского интерфейса, которые вы можете добавить для разработки своего приложения..

Важно знать, что Flutter не язык программирования. Чтобы создать приложение Flutter, вы будете использовать язык программирования Dart, который также создан Google. С точки зрения синтаксиса Dart похож на JavaScript.

Преимущества и ограничения Flutter

Преимущества

• Более быстрая разработка: Flutter предлагает быструю компиляцию, которая позволяет вам видеть результаты изменений вашего кода в реальном времени. Это функция под названием Hot-Reload, которая занимает всего несколько миллисекунд. Разработчикам нравится это преимущество использования Flutter, потому что он позволяет быстро вносить изменения в пользовательский интерфейс, что означает более продуктивную и динамичную разработку мобильных приложений.

• Cross -platform: Одним из наиболее заметных преимуществ использования Flutter является его кроссплатформенная функциональность. Разработчикам нужно написать только одну базу кода для нескольких приложений (Android, iOS и веб). По большей части Flutter зависит от виджетов и дизайна пользовательского интерфейса, и его просто нужно скомпилировать и преобразовать в код, поддерживаемый платформой. Это полезно, потому что позволяет разработчикам значительно сократить время разработки.

• Стартапы: Например, разработка мобильного приложения с Flutter дешевле, чем создавать и поддерживать приложение для Android и приложение для iOS. Кроме того, Flutter позволяет быстро создавать прототипы MVP с красивым пользовательским интерфейсом с помощью виджетов.

• Документация и сообщество: Как для любого языка программирования важно иметь надежную документацию, к которой можно обратиться. Google разработал обширную документацию для Flutter, охватывающую руководства и образцы для начинающих, разработки, тестирования и отладки, производительности и многого другого. Благодаря заметным преимуществам, перечисленным выше, Flutter значительно вырос за последние несколько лет. Большое сообщество для языка программирования важно, поскольку документация постоянно обновляется, и вы получаете поддержку от других опытных разработчиков.

Ограничения

• Библиотеки: Хотя Google предоставляет обширную поддержку Flutter, SDK все еще относительно новый, и некоторые функции отсутствуют. Отсутствуют сторонние виджеты, а это означает, что существует относительно ограниченный набор виджетов для использования, а это означает, что разработчикам необходимо самостоятельно создавать внешние инструменты.

• Интеграции: Для собственных приложений Android и iOS есть готовые решения, которые позволяют им интегрироваться с платформами CI, такими как Travis или Jenkins. Хотя есть несколько готовых решений Flutter для платформ CI, вам необходимо использовать и поддерживать пользовательские сценарии для автоматизированного создания, тестирования и развертывания..

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

Основные принципы Flutter

Общие сведения о виджетах

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

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

Как видно выше, допустим, мы разрабатываем базовый Приложение Flutter. Все во всем приложении будет содержаться в виджете Root. Внутри корневого виджета у вас есть виджет панели приложений, который содержит текстовый виджет (образовательный). Затем вы можете иметь виджет-контейнер, содержащийся в корневом виджете, который содержит другой текстовый виджет (Content). Большинство приложений будут намного сложнее, но на основе этого простого примера вы можете начать визуализацию дерева виджетов.

Некоторые виджеты, которые поставляются с предварительно созданным набором инструментов Flutter, — это текст, кнопка, виджет строки. , виджет столбца и виджет изображения. Этот список можно продолжить. Каждый виджет настраивается, поэтому вы можете передать определенные свойства, чтобы определить, как он будет отображаться.

Фреймворк

Фреймворк Flutter организован в слои, каждый из которых опирается на себя.

Как видно из диаграммы выше, низкоуровневый уровень Flutter — это его движок, построенный с использованием C ++. Движок обеспечивает низкоуровневый рендеринг с использованием Skia, графической библиотеки Google.

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

Создание вашего первого приложения Flutter

Теперь, когда у вас есть общий обзор Flutter, вы создадите свое первое приложение Flutter. Вы узнаете, как создать простое функциональное приложение hello world .

Установка Flutter

Есть несколько способов установки Flutter на свой компьютер, но самый простой способ — загрузить установщик с веб-сайта Flutter или через Github:

Ниже приведены инструкции по установке для различных операционных систем:

• macOS

• Windows

• Linux

Для IDE мы будем использовать VS Code, который является легким и обеспечивает функциональную поддержку. При использовании VS Code убедитесь, что вы установили плагин Flutter, который установит Dart вместе с ним. Вы также можете использовать Android Studio или IntelliJ, что является отличным вариантом.

Создать проект Flutter

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

Чтобы создать проект Flutter в VS Code:

1. Щелкните Вид> Палитра команд .

2. Введите «flutter» и выберите Flutter: New Project .

3. Введите имя проекта и нажмите

4. Выберите или создайте родительский каталог.

5. Дождитесь создания проекта, и вы увидите main.dart file.

Запуск проекта

1. Найдите строку состояния VS Code на в нижней части окна.

2. Выберите устройство из Device Selector .

3. Щелкните значки настроек и выберите флаттер. Затем выберите конфигурацию отладки.

4. Теперь нажмите Отладка> Начать отладку .

5. Приложение запустится, и вы сможете увидеть стартовое приложение.

Код

Перейдите в main.dart и замените текущий код следующим:

 import 'package: flutter/material.dart'; void main () => runApp (MyApp ()); класс  MyApp расширяет StatelessWidget {@override Widget build (BuildContext context) {return MaterialApp (title: 'Welcome to Flutter', home: Scaffold (appBar: AppBar (title: Text ('Welcome to Flutter'),), body: Center (child  : Text ('Hello World'),),),);  }} 

После запуска вашего приложения вы должны увидеть базовое приложение, которое говорит: «Hello World. ”

Разбор кода:

• Это приложение создает материальный дизайн. Материал — это язык визуального дизайна, популярный для мобильных и веб-приложений. Flutter предлагает широкий спектр виджетов материалов.

• Класс MyApp расширяет StatelessWidget чтобы сделать само приложение виджетом.

• Виджет Scaffold предоставляет панель, заголовок и тело приложения по умолчанию. Заголовок — это текст «Добро пожаловать во Flutter», а тело — это дочерний виджет Text с надписью «Hello World».

• Основная задача виджета — чтобы предоставить метод build () , который описывает, как отображать суб-виджеты в терминах иерархического дерева виджетов.

Подведение итогов и ресурсы

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

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

Если вы ищете оптимизированный подход к изучению Flutter, ознакомьтесь с нашим курсом Начало работы с Flutter . В этом курсе вы более подробно изучите виджеты, макеты, темы и, наконец, разработаете собственное приложение для составления списков фильмов, используя TheMovieDB REST API.

Продолжить чтение о разработке приложений для Android

• Знакомство с языковыми функциями Dart 2: миксинами, перечислениями и т. Д.
• Руководство для Android: как разработать приложение для Android
• 7 лучших советов и приемов Dart для более чистых приложений Flutter