Создание вашего первого многоразового виджета с помощью Flutter

вступление

В этом руководстве я покажу вам, как создать многоразовый виджет с помощью Flutter и Dart.

Язык Dart строго типизирован и создан Google. Он имеет сходство с JavaScript, Java и C. Так что, если вы работаете с одним из них, вы должны очень быстро освоиться с Dart.

Flutter - это фреймворк, написанный на Dart, для простого и быстрого написания кроссплатформенных нативных приложений. Вы пишете одно приложение, которое можно построить как для мобильного приложения Android (Java или Kotlin), так и iOS (Objective-C или Swift).

Для продолжения этой статьи и реализации нашего многоразового виджета рекомендуется иметь;

• Базовые навыки программирования
• Flutter SDK 1.7+
• Эмулятор Android / iOS или реальное устройство

Виджет

Во Flutter все представляет собой виджет. Это класс Dart, который действует практически так же, как компонент. У вас есть два вида виджетов:

• Виджет без сохранения состояния - у него нет состояния
• Виджет с отслеживанием состояния - у него есть состояние

Для примера многоразового виджета я покажу только виджет без сохранения состояния:

Многоразовый виджет без сохранения состояния

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

• Заголовок верхней страницы
• Название карты
• Подзаголовок карты
• Значок карты
• Действие кнопки отмены
• Действие кнопки продолжения

На этот новый экран мы можем перемещаться и передавать все наши пользовательские данные.

Кодирование многоразового экрана

В нашем примере мы используем виджеты в стиле material. Начнем с создания нового экрана - класса ReusableScreen. Мы расширяем StatelessWidget, потому что на нашем экране нет состояния.

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

• Три типа String для screenTitle, tileTitle и tileSubtitle
• Один IconData тип для нашего titleIcon
• Два типа Function для cancelButtonAction и proceedButtonAction

Все наши свойства final, потому что мы хотим передать данные на наш экран только один раз.

Внутри конструктора ReusableScreen мы обращаемся к нашим локальным свойствам и делаем их обязательными, добавляя перед ним @required.

Затем мы переопределяем метод StatelessWidget build. Мы возвращаем Scaffold, где передаем screenTitle в AppBar.

В теле у нас есть Card, у которого есть ребенок Column. Мы устанавливаем mainAxisSize на минимум и передаем несколько дочерних виджетов.

В верхней части карточки нам нужен виджет ListTile, в который мы можем передать наши tileIcon, tileTitle и tileSubtitle.

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

Реализация многоразового экрана

Где-то в нашем приложении мы хотим перейти к нашему ReusableScreen. В этом случае у нас есть метод onTap (который можно найти в кнопке). В этом методе мы используем виджет Navigator Flutter и хотим push наш экран, чтобы мы могли его посетить. Навигацию можно сделать так, как вы хотите.

Затем мы помещаем наш виджет ReusableScreen в метод push. Теперь мы можем передавать наши собственные аргументы, см. Изображение ниже.

Теперь мы можем повторно использовать этот виджет через приложение!

Спасибо за чтение! Окончательный код ReusableScreen можно найти здесь. Если вы нашли этот пост полезным, нажмите кнопку 👏 и подпишитесь и подумайте о прочтении некоторых из моих других статей: