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

Интересно, что такое карты? Как вы можете их использовать? Как вы можете настроить их? Где вы можете их использовать? Не волнуйтесь, в этой статье вы найдете все ответы на свои вопросы.

Этот блог является частью серии Flutter под названием Build with Flutter, в которой я расскажу вам с нуля о Flutter и создании с его помощью пользовательских приложений. Хочешь прокатиться? Не забудьте подписаться на Rohit T или подписаться на мою рассылку новостей здесь.

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

Введение

Что такое карта?

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

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

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

Получение представления о картах, но где вы на самом деле их используете?

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

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

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

Давайте приступим!

Различные свойства Карта поставляется с

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

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

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

Теперь давайте посмотрим на некоторые свойства карточек во Flutter:

(Мы также увидим их в действии в разделе «Приложение Charts»)

границаПередний план

Свойство borderOnForeground — это логическое значение, определяющее, должна ли граница карты отображаться до или после ее дочернего элемента. По умолчанию это правда. Если оно ложно, оно рисует границу позади дочернего элемента. Если установлено значение true, граница будет нарисована поверх дочернего виджета.

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

цвет

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

Вы можете использовать различные значения цвета, такие как предопределенные цвета, такие как Colors.blue, или вы можете создавать собственные цвета с помощью конструктора Color.

Свойство color дает вам свободу выбора и оформления внешнего вида виджета флаттер-карты.

возвышение

elevation, это свойство карточек Flutter, которое я использую чаще всего.

Свойство «высота» — это ключевая функция виджета флаттер-карты, которая придает виджету глубину тени, то есть поднимает его над обычным экраном и выделяет.

Чем выше значение высоты, тем выше выглядит карта, создавая ощущение глубины и иерархии.

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

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

Как круто правильно? Мы покажем вам, как попробовать это через пару минут

допуск

Чтобы определить простым языком, это свойство принимает EdgeInsetsGeometry в качестве объекта для добавления пустого пространства вокруг карты.

Чтобы дать вам лучшее понимание, свойство margin в карточках Flutter — это способ добавить пространство между краями карточки и окружающими виджетами или экраном.

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

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

форма

Проще говоря, используется для указания формы карты.

Чтобы дать вам более глубокое понимание, свойство shape в виджете Flutter Cards позволяет настраивать форму границы карты.

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

Свойство shape принимает объект ShapeBorder, который представляет собой абстрактный класс, определяющий форму границы.

Flutter предоставляет несколько встроенных подклассов ShapeBorder, которые вы можете использовать, например RoundedRectangleBorder, CircleBorder и StadiumBorder. Вы также можете создать свой собственный ShapeBorder, расширив класс ShapeBorder и реализовав его методы.

Да, у вас есть так много вариантов, чтобы играть и настраивать свои карты во флаттере.

теньЦвет

Проще говоря, он используется для рисования тени карты.

Свойство shadowColor виджета Flutter Cards позволяет настроить цвет тени карты.

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

Например, если вы хотите создать карточку с зеленой тенью, вы можете задать для свойства shadowColor объект Color, представляющий нужный оттенок зеленого. Это может помочь добавить контрастности и глубины вашей карте и выделить ее среди других элементов на экране.

Важно отметить, что свойство shadowColor влияет только на цвет тени карты, а не на цвет самой карты. Чтобы изменить цвет карты, вы можете вместо этого использовать свойство color.

clipBehaviour

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

Что такое поведение отсечения для начала?

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

Свойство clipBehavior в карточках Flutter используется для указания поведения отсечения содержимого карточки.

По умолчанию карта обрезает свое содержимое по форме ограничивающей рамки. Однако это поведение можно изменить, задав для свойства clipBehavior другое значение. Он принимает перечисление Clip как объект. (По умолчанию установлено значение Clip.none)

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

Теперь, когда вы хорошо разбираетесь в том, какие карты есть во Flutter и в его свойствах, у вас есть все необходимое для создания собственной карты. Итак, как вы это делаете? Давайте приступим!

Графики Приложение

Давайте создадим виджет флаттер-карты в приложении для отслеживания расходов.

В этом приложении нам нужно отображать гистограммы расходов пользователя. Чтобы выделить эту диаграмму и выделить ее в отдельный раздел, мы будем использовать виджет card во Flutter.

Давайте посмотрим на все свойства, о которых мы говорили, в действии:

import 'package:flutter/material.dart';

class ExampleCard extends StatelessWidget {
  const ExampleCard({super.key});
  @override
  Widget build(BuildContext context) {
    return Card(
      borderOnForeground: true,
      color: Colors.red,
      elevation: 20,
      shadowColor: Colors.blue,
      clipBehavior: Clip.antiAlias,
      margin: const EdgeInsets.all(40),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
      child: const Center(
          child: Text('This is a sample of Card and It\'s customisation')),
    );
  }
}

Код довольно понятен, когда вы просматриваете его и обращаетесь к вышеупомянутым пунктам.

Результат будет примерно таким:

Как вы можете видеть здесь, Red Card, которая выделяется, — это флаттер-карта, которую мы только что построили.

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

Заключение

Если вы зашли так далеко, поздравляем! Вы научились создавать красивые и функциональные карты во Flutter.

Вот список всего того, о чем мы говорили в этой статье:

  • Дает вам четкое представление о виджете карты
  • Хорошее понимание его свойств
  • Как использовать их для создания различных типов карт для вашего приложения
  • Реализация флаттер-карты с примером кода.

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

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

Заключительные замечания

Быть инженером-программистом или разработчиком — это больше, чем просто программировать. Оставайтесь с нами, чтобы узнать больше!

Нравится | Комментарий | Поделиться | Подпишитесь на Rohit T, чтобы узнать больше!

Подпишитесь на мою рассылку новостей здесь, если вы еще этого не сделали. Так что вы не пропустите удивительный контент, который появится на вашем пути!

Вы можете поймать меня в моих социальных сетях здесь и написать в Директ, если хотите работать со мной или по любым возможностям. Спасибо за чтение! Счастливого порхания!

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