Flutter уроки

В этом видео мы рассмотрим папки и файлы во Flutter.

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

MaterialApp - один из самых мощных виджетов Futter. если вы создадите базовое приложение Flutter, то первый виджет, который вы увидите, - это MaterialApp. MaterialApp включает в себя ряд виджетов, которые обычно требуются для приложений материального дизайна. Обернув ваше приложение внутри MaterialApp , вы сообщаете своему приложению, что оно использует Android Material Design , систему дизайна, созданную Google, чтобы помочь вам создавать высококачественные цифровые возможности для Android, iOS, Flutter и Интернета.

Scaffold - это расширяемый виджет, который заполняет доступное пространство или экран. Он предоставляет API для отображения основных виджетов приложения, таких как drawer, bottomSheet, floatingActionButton, appBar и bottomNavigationBar и т. д.

Виджеты бывают двух видов: stateful (имеют состояние) и stateless (не имеют состояния). Виджеты, которые не имеют состояния, (stateless) в процессе работы приложения не изменяют своих свойств. Такие виджеты не имеют состояния. Они могут изменяться лишь посредством внешних событий, которые возникают на родительских виджетах-контейнерах. И класс StatelessWidget как раз представляет данный тип виджетов. Виджеты, которые хранят состояние, (stateful) в процессе работы приложения могут изменять свои свойства динамически. Состояние хранится в виде объекта класса State. И класс StatefulWidget представляет виджеты, которые могут хранить состояние.

В этом видео я вам расскажу о том, как отформатировать и раскрасить ваш текст.

Всем привет и в этом видео я бы хотел рассмотреть такие два виджета как Stateless Widget и Stateful Widget, а так же основные отличия между ними. Прежде чем узнать разницу между ними, мы должны взглянуть на определение состояния виджета. Состояние - это информация, которая может считываться синхронно при сборке виджета и может изменяться в течение срока службы виджета.

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

Не смотря на то что Android и iOS предлагают высококачественные системные шрифты, чаще всего вы будете сталкиваться с пользовательскими шрифтами. Вы можете использовать пакет google_fonts для прямого доступа к более чем 1000 семейств шрифтов. Или подключить шрифты в ручную.
Для этого вам необходимо:
• Импортировать файлы шрифтов;
• Объявить шрифт в файле pubspec.yaml;

Основная версия Flutter не поддерживает SVG. По этому подключить изображения как мы делали это в предыдущем уроке не получиться. Нам понадобится пакет flutter_svg: https://pub.dev/packages/flutter_svg

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

Flutter имеет множество функций, одни из которых является Hot Reload и Hot Restart. Они были созданы исключительно для того, чтобы облегчить разработчикам создание приложений. Вы можете сэкономить время и реализовать больше, используя их. И исправим ошибку работоспособности Hot Reload в Visual Studio Code.

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

Виджет RichText позволяет выводить текст с разным стилевым оформлением. Это достигается благодаря тому, что каждый отдельный кусок текста в RichText представляет объект TextSpan, для которого можно настроить свой стиль.

В этом видео я расскажу как подключить иконку в приложении Flutter обычным способом и используя unicode. А так же рассмотрим такой виджет как IconButton.

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

Align Widget — это виджет, который используется для выравнивания своего дочернего элемента внутри себя и при необходимости, меняет свой размер в зависимости от размера дочернего элемента. Center располагает вложенный элемент по центру. Он унаследован от класса Align, поэтому во многом перенимает у него функционал. По умолчанию он растягивается по всей ширине и высоте контейнера, заполняя все его пространство.

Container представляет собой виджет, который может содержать только один вложенный элемент, но при этом предоставляет дополнительные возможности по настройке фона, позиционирования и размера вложенных виджетов. Базовый элемент контейнера, в котором хранится виджет, имеет отступ, который отделяет текущий контейнер от другого содержимого По сути Container объединяет возможности других виджетов - Padding, Align, ConstrainedBox.

Виджет Row располагает элементы горизонтально, в виде строки. Контейнер Column располагает элементы вертикально, в виде столбика.

Виджет Expanded позволяет своему дачернему виджету child заполнить доступное пространство или его часть других контейнеров - Row и Column. Для создания виджета Expanded применяется следующий конструктор: Expanded({Key key, int flex = 1, @required Widget child})

Виджет Stack - это встроенный виджет в SDK flutter, который позволяет нам создавать слой виджетов, накладывая их друг на друга. Во многих случаях простого расположения строк и столбцов недостаточно, нам нужен способ наложения одного виджета поверх другого, например, мы можем захотеть отобразить текст поверх изображения, поэтому для решения этой ситуации у нас есть виджет Stack. Виджет Stack имеет два типа дочерних элементов: один позиционированный, который заключен в виджет Positioned, а другой не позиционированный, который не заключен в виджет Positioned. Для всех не позиционированных виджетов свойство выравнивания устанавливается в левом верхнем углу. Дочерние виджеты распологаются с помощью свойств top, right, left и botoom. Дочерние виджеты Stack распологаются в следующем порядке, самый верхний виджет записанный в Stack находиться дальше на экране, и наоборот.

SizedBox , в отличие от Container, - это прозрачный контейнер, для которого вы не можете установить стиль (например, цвет фона, поля, отступы и т. д.). Все параметры, такие как width, height, size, child, участвующие в создании SizedBox, являются опциональными (необязательными).

Обычно, когда вы хотите разместить несколько виджетов горизонтально или вертикально, вы можете использовать Row или Column. Но если места недостаточно, содержимое обрезается, и вы получаете предупреждение о переполнении в виде желто-черной полосы. Чтобы исправить это, вы можете использовать виджет Wrap вместо Row или Column.

ListView представляет собой прокручиваемый список элементов. Класс ListView имеет несколько конструкторов с большим количеством параметров, но мы рассмотрим основной конструктор.

Widget Card — это виджет Material Design , на котором представлена некоторая информация, например, альбом, географическое местоположение, контактные данные и т.д. Он обладает множеством свойств, таких как цвет, форма, цвет тени и т.д., благодаря чему позволяет настраивать его так, как вам нравится.

Для ввода текста во Flutter может применяться виджет TextField.