Создайте пользовательский интерфейс приложения калькулятора, используя базовые виджеты Flutter

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

Скриншот 2019-04-14 в 2.19.45.png

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

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

Создание проекта в Android Studio
Откройте Android-студию

Перейдите в «Файл» -> «Создать» -> «Новый проект Flutter».

Выберите «Приложение Flutter» и нажмите «Далее».

Напишите название и описание проекта и нажмите «Далее».

Нажмите Готово.

Когда ваш проект настроен, вы найдете lib/main.dart. Это файл дротика, в котором находится основной метод. Проще говоря, это входной файл для нашего приложения.
Мы собираемся создать наше приложение с нуля, поэтому удалим весь код из файла main.dart.

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

2.png

Вам это показалось сложным. Не волнуйтесь, я постараюсь объяснить вам каждую строку кода.
Первая строка импортирует пакет Flutter Material. Как и в Java, C++, в Dart тоже, основным методом является точка входа в программу. Следовательно, третья строка создает основной метод и запускает встроенный метод Flutter runApp.

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

Затем мы создаем Stateful Widget под названием «CalculatorPage».

Теперь давайте рассмотрим структуру нашего макета.

3.png

Во-первых, мы видим, что можем разделить дизайн приложения на 2 столбца в соотношении 3:5. (См. 2 белых прямоугольника).

Во-вторых, мы можем разделить больший контейнер еще на 5 столбцов с одинаковым соотношением. (См. 5 синих прямоугольников).

Далее мы видим, что 4 кнопки в первых 4-х синих прямоугольниках можно рассматривать как ряд с 4-мя делениями, каждое из которых имеет одинаковое соотношение. И последнее синее поле можно рассматривать как строку с 3 делениями в соотношении 2:1:1.

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

Теперь давайте посмотрим, как реализовать этот дизайн во флаттере.

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

Виджет контейнера

Виджет «Контейнер» используется для содержания дочернего виджета с возможностью применения некоторых свойств стиля.
Если у виджета Container нет дочерних элементов, он автоматически заполнит заданную область на экране, в противном случае он будет переносить высоту и ширину данного дочернего элемента.

Давайте начнем разработку нашего макета с виджета контейнера. Из макета мы видим, что цвет фона черный. Итак, давайте установим цвет фона как черный.

4.png

Теперь давайте запустим наше приложение. Вы можете увидеть результат с левой стороны.

5.png

Давайте двигаться вперед. Согласно нашей структуре нам необходимо разделить макет на две части по вертикали в соотношении 3:5. Мы сделаем это с помощью виджета столбца.

Виджет столбца
Столбец — это виджет, используемый для вертикального отображения дочерних виджетов. Виджет «Столбец» не прокручивается. Если у вас есть ряд виджетов и вы хотите, чтобы они могли прокручиваться, если места недостаточно, рассмотрите возможность использования ListView.

6.png

Примечание. Чтобы различать 2 столбца, я использовал 2 разных цвета: черный и белый.

7.png

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

Мы также использовали один новый виджет под названием «Гибкий виджет».

Гибкий виджет

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

8.png

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

Далее нам нужно определить виджет Row внутри каждого из этих гибких виджетов.

Виджет строки

Строка — это виджет, используемый для горизонтального отображения дочерних виджетов. Виджет «Строка» не прокручивается. Если у вас есть ряд виджетов и вы хотите, чтобы они могли прокручиваться, если места недостаточно, рассмотрите возможность использования класса ListView.

Прежде чем реализовать кнопки калькулятора с помощью виджета строки, давайте спроектируем кнопку.

10.png

Мы определили новый виджет без сохранения состояния под названием CustomButton, который принимает входной текстовый параметр. Этот параметр ввода текста определяет текст, который будет отображаться на кнопке. Теперь давайте обсудим параметры, определенные внутри виджета-контейнера.

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

высота и ширина: чтобы растянуть контейнер, чтобы он соответствовал его родителю, мы использовали double.infinity для свойств высоты и ширины.

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

украшение: украшение обычно используется в виджете контейнера, чтобы изменить внешний вид контейнера. Используя свойство borderRadius и color объекта BoxDecoration, мы стилизовали наш контейнер.

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

Мы можем использовать этот виджет CustomButton везде, где хотим показать кнопку. Этот виджет можно назвать повторно используемым компонентом.

Теперь давайте продвинемся вперед и создадим кнопки калькулятора внутри виджетов Row.

11.png

Хотите добавить подпись к этому изображению? Щелкните значок Настройки.
Теперь мы реализовали строку внутри каждого виджета столбца. В первых 4 столбцах мы определили строку с 4 дочерними элементами, каждый из которых имеет одинаковое соотношение.

Для последнего столбца мы использовали строку с 3 дочерними элементами в соотношении 2:1:1.

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

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

12.png

Спасибо Вам за ваше терпение чтения.

Github Ссылка на исходный код.

Спасибо вам, ребята. Продолжай следить за мной….

Скоро появится больше блогов с потрясающим дизайном пользовательского интерфейса и анимацией.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *