Flutter — Краткое руководство

В общем, разработка мобильного приложения является сложной и сложной задачей. Существует много платформ для разработки мобильного приложения. Android предоставляет собственную платформу, основанную на языке Java, а iOS — собственную платформу, основанную на языке Objective-C / Shift.

Однако для разработки приложения, поддерживающего обе ОС, нам нужно кодировать на двух разных языках, используя две разные платформы. Чтобы помочь преодолеть эту сложность, существуют мобильные платформы, поддерживающие обе ОС. Эти платформы варьируются от простых основанных на HTML гибридных мобильных приложений (которые используют HTML для пользовательского интерфейса и JavaScript для логики приложения) до сложных языковых сред (которые выполняют тяжелую работу по преобразованию кода в собственный код). Независимо от их простоты или сложности, эти платформы всегда имеют много недостатков, одним из основных недостатков которых является их низкая производительность.

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

Flutter также предлагает множество готовых виджетов (UI) для создания современных приложений. Эти виджеты оптимизированы для мобильной среды, и проектирование приложения с использованием виджетов так же просто, как проектирование HTML.

Flutter приложение Flutter само по себе является виджетом. Виджеты Flutter также поддерживают анимацию и жесты. Логика приложения основана на реактивном программировании. Виджет может при желании иметь состояние. Изменяя состояние виджета, Flutter автоматически (реактивное программирование) сравнивает состояние виджета (старое и новое) и отображает виджет только с необходимыми изменениями, вместо повторного рендеринга всего виджета.

Мы обсудим полную архитектуру в следующих главах.

Особенности Flutter

Flutter предлагает разработчикам следующие возможности:

Современные и реактивные рамки.

Использует язык программирования Dart и его очень легко выучить.

Красивые и плавные пользовательские интерфейсы.

Огромный каталог виджетов.

Запускает один и тот же интерфейс для нескольких платформ.

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

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

Dart имеет большой репозиторий пакетов программного обеспечения, который позволяет расширять возможности вашего приложения.

Разработчики должны написать только одну кодовую базу для обоих приложений (как для платформ Android, так и для iOS). Flutter может быть распространен и на другие платформы в будущем.

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

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

С Flutter разработчики имеют полный контроль над виджетами и их макетом.

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

Недостатки Flutter

Несмотря на множество преимуществ, флаттер имеет следующие недостатки:

Поскольку он написан на языке Dart , разработчику необходимо выучить новый язык (хотя его легко выучить).

Современный фреймворк пытается максимально разделить логику и пользовательский интерфейс, но во Flutter пользовательский интерфейс и логика перемешаны. Мы можем преодолеть это, используя интеллектуальное кодирование и используя модуль высокого уровня для разделения пользовательского интерфейса и логики.

Flutter — еще одна основа для создания мобильного приложения. Разработчикам трудно выбрать правильные инструменты разработки в густонаселенном сегменте.

Flutter — Установка

Эта глава подробно расскажет вам об установке Flutter на ваш локальный компьютер.

Установка в Windows

В этом разделе мы рассмотрим, как установить Flutter SDK и его требования в системе Windows.

Шаг 1. Перейдите по адресу URL https://flutter.dev/docs/get-started/install/windows и загрузите последнюю версию Flutter SDK. По состоянию на апрель 2019 года версия 1.2.1 и файл flutter_windows_v1.2.1-stable.zip.

Шаг 2 — Распакуйте zip-архив в папку, скажем C: \ flutter \

Шаг 3 — Обновите системный путь, включив в него папку bin flutter.

Шаг 4 — Flutter предоставляет инструмент, врач флаттера, чтобы проверить, что все требования развития флаттера выполнены.

Шаг 5 — Выполнение вышеуказанной команды проанализирует систему и покажет ее отчет, как показано ниже —

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

Шаг 6 — Установите последнюю версию Android SDK, если об этом сообщит врач-флаттер

Шаг 7 — Установите последнюю версию Android Studio, если сообщит врач-флаттер

Шаг 8 — Запустите эмулятор Android или подключите реальное устройство Android к системе.

Шаг 9 — Установите плагин Flutter and Dart для Android Studio. Он предоставляет шаблон запуска для создания нового приложения Flutter , возможность запуска и отладки приложения Flutter в самой студии Android и т. Д.,

Откройте Android Studio.

Нажмите Файл → Настройки → Плагины.

Выберите плагин Flutter и нажмите «Установить».

Нажмите Да, когда будет предложено установить плагин Dart .

Установка в MacOS

Чтобы установить Flutter на MacOS, вам нужно будет выполнить следующие шаги:

Шаг 1. Перейдите по адресу URL https://flutter.dev/docs/get-started/install/macos и загрузите последнюю версию Flutter SDK. По состоянию на апрель 2019 года версия 1.2.1 и файл flutter_macos_v1.2.1-stable.zip.

Шаг 2 — Распакуйте zip-архив в папку, скажем / path / to / flutter

Шаг 3 — Обновите системный путь, включив в него папку bin flutter (в файле

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

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

Шаг 5 — Установите последнюю версию XCode, если об этом сообщит врач-флаттер

Шаг 6 — Установите последнюю версию Android SDK, если об этом сообщит врач-флаттер

Шаг 7 — Установите последнюю версию Android Studio, если об этом сообщит врач-флаттер

Шаг 8 — Запустите эмулятор Android или подключите реальное устройство Android к системе для разработки приложения для Android.

Шаг 9 — Откройте симулятор iOS или подключите реальное устройство iPhone к системе для разработки приложения iOS.

Шаг 10 — Установите плагин Flutter and Dart для Android Studio. Он предоставляет шаблон запуска для создания нового приложения Flutter , возможность запуска и отладки приложения Flutter в самой студии Android и т. Д.,

Откройте Android Studio

Нажмите Настройки → Плагины

Выберите плагин Flutter и нажмите Install

Нажмите Да, когда будет предложено установить плагин Dart .

Создание простого приложения в Android Studio

В этой главе мы создадим простое приложение Flutter чтобы понять основы создания приложения Flutter в Android Studio.

Шаг 1 — Откройте Android Studio

Шаг 2 — Создать проект Flutter . Для этого нажмите Файл → Создать → Новый проект Flutter

Проект «Флаттер»/>

Шаг 3 — Выберите приложение Flutter . Для этого выберите Flutter Application и нажмите Next .

Приложение флаттера Далее «/>

Шаг 4 — Настройте приложение, как показано ниже, и нажмите « Далее» .

Название проекта: hello_app

Flutter SDK Path:

Описание: приложение hello world на основе флаттера

Шаг 5 — Настройка проекта.

Установите домен компании как flutterapp.it-brain.online и нажмите Готово .

Шаг 6 — Введите домен компании.

Android Studio создает полностью работающее приложение с минимальной функциональностью. Давайте проверим структуру приложения, а затем изменим код для выполнения нашей задачи.

Структура приложения и его назначение таковы:

Различные компоненты структуры приложения объясняются здесь —

Android — автоматически сгенерированный исходный код для создания приложения Android

ios — автоматически сгенерированный исходный код для создания приложения ios

lib — Основная папка, содержащая код Dart написанный с использованием флаттера

ib / main.dart — точка входа в приложение Flutter

test — Папка, содержащая код Dart для тестирования приложения флаттера

test / widget_test.dart — пример кода

.gitignore — файл контроля версий Git

.metadata — автоматически генерируется инструментами флаттера

.packages — автоматически генерируется для отслеживания флаттерных пакетов.

.iml — файл проекта, используемый студией Android

pubspec.yaml — используется пабом , менеджером пакетов Flutter

pubspec.lock — автоматически генерируется менеджером пакетов Flutter , Pub

README.md — файл описания проекта, написанный в формате Markdown

Шаг 7 — Замените код dart в файле lib / main.dart приведенным ниже кодом —

Давайте понимать код дротика построчно.

Строка 1 — импортирует флаттер, материал . Материал представляет собой флаттерную упаковку для создания пользовательского интерфейса в соответствии с указаниями Android по разработке материалов.

Строка 3 — это точка входа в приложение Flutter . Вызывает функцию runApp и передает ей объект класса MyApp . Цель функции runApp — прикрепить данный виджет к экрану.

Строка 5-17 — Виджет используется для создания пользовательского интерфейса в флаттерной среде. StatelessWidget — это виджет, который не поддерживает никакого состояния виджета. MyApp расширяет StatelessWidget и переопределяет его метод сборки . Цель метода сборки — создать часть пользовательского интерфейса приложения. Здесь метод сборки использует MaterialApp , виджет для создания пользовательского интерфейса корневого уровня приложения. Он имеет три свойства — заголовок, тема и дом .

title — заголовок приложения

Тема — это тема виджета. Здесь мы устанавливаем синий цвет как общий цвет приложения, используя класс ThemeData и его свойство primarySwatch .

home — это внутренний интерфейс приложения, для которого мы устанавливаем другой виджет MyHomePage

Строка 19 — 38 — MyHomePage совпадает с MyApp, за исключением того, что возвращает виджет Scaffold . Scaffold — это виджет верхнего уровня рядом с виджетом MaterialApp, который используется для создания дизайна материала, соответствующего пользовательскому интерфейсу. У него есть два важных свойства: appBar для отображения заголовка приложения и тело для отображения фактического содержимого приложения. AppBar — это еще один виджет для отображения заголовка приложения, и мы использовали его в свойстве appBar . В свойстве body мы использовали Center виджет, который центрирует его дочерний виджет. Текст — это последний и самый внутренний виджет для отображения текста, который отображается в центре экрана.

Шаг 8 — Теперь запустите приложение, используя, Run → Run main.dart

Дарт «/>

Шаг 9 — Наконец, вывод приложения выглядит следующим образом —

Flutter — Архитектурное приложение

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

Виджеты

Основная концепция платформы Flutter — это In Flutter , все является виджетом . Виджеты — это в основном компоненты пользовательского интерфейса, используемые для создания пользовательского интерфейса приложения.

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

Например, иерархия виджетов приложения hello world (созданного в предыдущей главе) такая, как указано на следующей диаграмме —

Здесь стоит отметить следующие моменты —

MyApp — это созданный пользователем виджет, и он создается с использованием собственного виджета Flutter , MaterialApp .

MaterialApp имеет свойство home для указания пользовательского интерфейса домашней страницы, который снова является созданным пользователем виджетом MyHomePage .

MyHomePage создается с использованием другого встроенного виджета флаттера, Scaffold

Леса имеют два свойства — body и appBar

body используется для указания основного пользовательского интерфейса, а appBar используется для указания заголовочного пользовательского интерфейса.

Интерфейс заголовка строится с использованием встроенного виджета флаттера, AppBar и пользовательский интерфейс тела строится с использованием виджета Center .

У виджета « Центр» есть свойство « Дочерний» , которое ссылается на фактическое содержимое и создается с использованием виджета « Текст».

жесты

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

Концепция государства

Виджеты Flutter поддерживают состояние State , предоставляя специальный виджет StatefulWidget . Виджет должен быть получен из виджета StatefulWidget для поддержки поддержания состояния, а все остальные виджеты должны быть получены из StatefulWidget . Виджеты Flutter реагируют на нативном. Это похоже на responsejs, и StatefulWidget будет автоматически отображаться каждый раз, когда изменяется его внутреннее состояние. Повторный рендеринг оптимизирован путем нахождения разницы между старым и новым пользовательским интерфейсом виджета и рендеринга только необходимых изменений

Наиболее важной концепцией платформы Flutter является то, что платформа сгруппирована по нескольким категориям с точки зрения сложности и четко организована в слоях уменьшающейся сложности. Слой строится с использованием следующего слоя следующего уровня. Самый верхний слой — это виджет, специфичный для Android и iOS . На следующем слое есть все нативные виджеты. Следующий слой — это слой рендеринга , который представляет собой низкоуровневый компонент рендеринга и отображает все в приложении флаттера. Слои переходят в код конкретной платформы

Общий обзор слоя в Flutter указан на диаграмме ниже —

Следующие пункты суммируют архитектуру Flutter —

Во Flutter все является виджетом, а сложный виджет состоит из уже существующих виджетов.

Интерактивные функции могут быть включены при необходимости с помощью виджета GestureDetector .

Состояние виджета может поддерживаться при необходимости с помощью виджета StatefulWidget .

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

Мы обсудим все эти концепции подробно в следующих главах.

Flutter — Введение в программирование Dart

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

Следующий код показывает простую программу Dart —

Переменные и типы данных

Переменная называется местом хранения, а Типы данных просто относятся к типу и размеру данных, связанных с переменными и функциями.

Dart использует ключевое слово var для объявления переменной. Синтаксис var определен ниже,

Ключевое слово final и const используются для объявления констант. Они определены ниже:

Язык Dart поддерживает следующие типы данных —

Числа — используется для представления числовых литералов — целых и двойных.

Строки — представляет последовательность символов. Строковые значения указываются в одинарных или двойных кавычках.

Booleans — Dart использует ключевое слово bool для представления логических значений — true и false.

Списки и карты — используется для представления коллекции объектов. Простой список может быть определен как ниже -.

Показанный выше список создает список [1,2,3,4,5].

Карта может быть определена как показано здесь —

Динамический — если тип переменной не определен, то ее тип по умолчанию является динамическим. Следующий пример иллюстрирует переменную динамического типа —

Принятие решений и петли

Блок принятия решения оценивает условие перед выполнением инструкций. Dart поддерживает операторы If, If..else и switch.

Циклы используются для повторения блока кода, пока не будет выполнено определенное условие. Dart поддерживает циклы for, in, while и do.. while.

Давайте разберем простой пример использования операторов управления и циклов —

Приведенный выше код печатает четные числа от 1 до 10.

функции

Функция — это группа операторов, которые вместе выполняют определенную задачу. Давайте посмотрим на простую функцию в Dart как показано здесь —

Вышеуказанная функция добавляет два значения и выдает 7 в качестве выходных данных.

Объектно-ориентированного программирования

Dart это объектно-ориентированный язык. Он поддерживает функции объектно-ориентированного программирования, такие как классы, интерфейсы и т. Д.

Класс — это план создания объектов. Определение класса включает в себя следующее:

• поля
• Добытчики и сеттеры
• Конструкторы
• функции

Теперь давайте создадим простой класс, используя приведенные выше определения —

Flutter — Введение в виджеты

Как мы узнали из предыдущей главы, виджеты — это все в Flutter . Мы уже узнали, как создавать новые виджеты в предыдущих главах.

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

Давайте проверим виджет MyHomePage приложения Hello World . Код для этой цели приведен ниже.

Здесь мы создали новый виджет, расширив StatelessWidget .

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

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

Здесь метод сборки вызывает метод сборки Scaffold , который, в свою очередь, вызывает метод сборки AppBar и Center для создания своего пользовательского интерфейса.

Наконец, метод сборки Center вызывает метод Text build.

Для лучшего понимания, визуальное представление того же дано ниже —

Визуализация сборки виджетов

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

• Платформенные виджеты
• Виджеты макетов
• Виджеты состояния обслуживания
• Независимые от платформы / базовые виджеты

Давайте обсудим каждый из них подробно сейчас.

Платформенные виджеты

Flutter имеет виджеты, характерные для конкретной платформы — Android или iOS.

Специфичные для Android виджеты разработаны в соответствии с Руководством по дизайну материалов ОС Android. Специфичные для Android виджеты называются виджетами материалов .

Специфичные для iOS виджеты разработаны в соответствии с Руководством по человеческому интерфейсу Apple и называются купертиновскими виджетами.

Вот некоторые из наиболее часто используемых виджетов материалов:

• Строительные леса
• AppBar
• BottomNavigationBar
• TabBar
• TabBarView
• ListTile
• RaisedButton
• FloatingActionButton
• FlatButton
• IconButton
• DropdownButton
• PopUpMenuButton
• ButtonBar
• Текстовое поле
• флажок
• Радио
• переключатель
• ползунок
• Выбор даты и времени
• SimpleDialog
• AlertDialog

Некоторые из наиболее используемых виджетов Купертино следующие:

• CupertinoButton
• CupertinoPicker
• CupertinoDatePicker
• CupertinoTimerPicker
• CupertinoNavigationBar
• CupertinoTabBar
• CupertinoTabScaffold
• CupertinoTabView
• CupertinoTextField
• CupertinoDialog
• CupertinoDialogAction
• CupertinoFullscreenDialogTransition
• CupertinoPageScaffold
• CupertinoPageTransition
• CupertinoActionSheet
• CupertinoActivityIndicator
• CupertinoAlertDialog
• CupertinoPopupSurface
• CupertinoSlider

Виджеты макетов

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

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

Контейнер — прямоугольный ящик, украшенный виджетами BoxDecoration с фоном, рамкой и тенью.

Центр — Центр своего дочернего виджета.

Row — расположите своих детей в горизонтальном направлении.

Колонна — расположите своих детей в вертикальном направлении.

Стек — Расположите один над другим.

Мы подробно рассмотрим виджеты макетов в следующей главе « Введение в виджеты макетов» .

Виджеты состояния обслуживания

Во Flutter все виджеты являются производными от StatelessWidget или StatefulWidget .

Виджет, полученный из StatelessWidget , не содержит никакой информации о состоянии, но может содержать виджет, полученный из StatefulWidget . Динамическая природа приложения заключается в интерактивном поведении виджетов и изменении состояния во время взаимодействия. Например, нажатие на кнопку счетчика увеличит / уменьшит внутреннее состояние счетчика на единицу, а реактивный характер виджета Flutter автоматически выполнит повторную визуализацию виджета с использованием новой информации о состоянии.

Мы подробно изучим концепцию виджетов StatefulWidget в следующей главе «Управление состояниями» .

Независимые от платформы / базовые виджеты

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

Текстовый виджет используется для отображения фрагмента строки. Стиль строки может быть установлен с помощью свойства style и класса TextStyle . Пример кода для этой цели выглядит следующим образом:

Текстовый виджет имеет специальный конструктор Text.rich , который принимает дочерний элемент типа TextSpan для указания строки с другим стилем. Виджет TextSpan является рекурсивным по своей природе и принимает TextSpan в качестве своих дочерних элементов . Пример кода для этой цели выглядит следующим образом:

Наиболее важные свойства текстового виджета следующие:

maxLines, int — Максимальное количество отображаемых строк.

overflow, TextOverFlow — укажите, как обрабатывается визуальное переполнение с помощью класса TextOverFlow.

style, TextStyle — Укажите стиль строки, используя класс TextStyle

textAlign, TextAlign — выравнивание текста, например, вправо, влево, выравнивание и т. д. с использованием класса TextAlign

textDirection, TextDirection — Направление текста к потоку, слева направо или справа налево

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

Изображение — общий загрузчик изображений с использованием ImageProvider

Image.asset — загрузка изображения из активов проекта флаттера

Image.file — загрузить изображение из системной папки

Image.memory — загрузка изображения из памяти

Image.Network — Загрузить изображение из сети

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

Создайте папку, активы в папке проекта и разместите необходимые изображения.

Укажите ресурсы в pubspec.yaml, как показано ниже —

Теперь загрузите и отобразите изображение в приложении.

Полный исходный код виджета MyHomePage приложения hello world и результат, как показано ниже -.

Загруженное изображение как показано ниже —

Наиболее важные свойства виджета Image следующие:

image, ImageProvider — фактическое изображение для загрузки

ширина, двойная — ширина изображения

высота, двойная — высота изображения

alignment, AlignmentGeometry — Как выровнять изображение в его границах

Иконка виджета используется для отображения глифа из шрифта, описанного в классе IconData . Код для загрузки простого значка электронной почты выглядит следующим образом:

Полный исходный код для его применения в приложении hello world выглядит следующим образом:

Загруженный значок как показано ниже —

Flutter — Введение в макеты

Поскольку основной концепцией Flutter является « Все виджет» , Flutter включает функциональность макета пользовательского интерфейса в сами виджеты. Flutter предоставляет довольно много специально разработанных виджетов, таких как Container, Center, Align и т. Д., Только с целью создания пользовательского интерфейса. Сборка виджетов путем составления других виджетов обычно использует виджеты макета. Давайте рассмотрим концепцию макета Flutter в этой главе.

Тип виджетов

Виджеты макета могут быть сгруппированы в две отдельные категории в зависимости от дочернего элемента —

• Виджет в поддержку одного ребенка
• Виджет с поддержкой нескольких детей

Давайте узнаем о типах виджетов и их функциональности в следующих разделах.

Виджеты для одного ребенка

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

Например, виджет « Центр» просто центрирует его дочерний виджет по отношению к его родительскому виджету, а виджет « Контейнер» обеспечивает полную гибкость для помещения его дочернего элемента в любое заданное место внутри него, используя различные параметры, такие как отступы, оформление и т. Д.,

Одиночные дочерние виджеты — отличные варианты для создания высококачественного виджета, имеющего одну функциональность, такую как кнопка, метка и т. Д.,

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

Здесь мы использовали два виджета — виджет « Контейнер» и виджет « Текст» . Результат виджета в виде пользовательской кнопки, как показано ниже —

Давайте проверим некоторые из наиболее важных виджетов с одним дочерним макетом, предоставляемых Flutter —

Заполнение — Используется для упорядочения дочернего виджета по заданному заполнению. Здесь заполнение может быть обеспечено классом EdgeInsets .

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

Некоторые из возможных значений смещений следующие:

FractionalOffset (1.0, 0.0) представляет вверху справа.

FractionalOffset (0.0, 1.0) представляет внизу слева.

Пример кода о смещениях показан ниже —

FittedBox — масштабирует дочерний виджет, а затем размещает его в соответствии с указанным соответствием.

AspectRatio — он пытается изменить размер дочернего виджета до указанного соотношения сторон