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

Метод 1. Использование класса RadialGradient
Класс RadialGradientво Flutter позволяет легко создавать радиальные градиенты. Чтобы выровнять градиент, вы можете использовать свойство center, которое принимает объект AlignmentGeometry. Вот пример создания радиального градиента с выравниванием:

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    gradient: RadialGradient(
      colors: [Colors.red, Colors.blue],
      center: Alignment(0.5, -0.5), // Adjust alignment as needed
    ),
  ),
)

Метод 2: настройка положения градиента с помощью FractionalOffset
Другой способ выровнять радиальный градиент — использовать класс FractionalOffset. Этот класс обеспечивает большую гибкость при размещении градиента внутри контейнера. Вот пример:

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    gradient: RadialGradient(
      colors: [Colors.red, Colors.blue],
      center: FractionalOffset(0.5, 0.5), // Adjust alignment as needed
    ),
  ),
)

Метод 3. Выравнивание градиента с помощью AlignmentDirectional
AlignmentDirectional— еще один вариант выравнивания радиальных градиентов во Flutter. Этот класс позволяет указать выравнивание по началу, концу, верху, низу и центру. Вот пример:

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    gradient: RadialGradient(
      colors: [Colors.red, Colors.blue],
      center: AlignmentDirectional(0.0, 0.0), // Adjust alignment as needed
    ),
  ),
)

Метод 4: использование FractionalOffset.fromOffsetAndSize
Метод FractionalOffset.fromOffsetAndSizeпозволяет выровнять радиальный градиент на основе заданного смещения и размера. Это может быть полезно, если вы хотите выровнять градиент относительно размеров контейнера. Вот пример:

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    gradient: RadialGradient(
      colors: [Colors.red, Colors.blue],
      center: FractionalOffset.fromOffsetAndSize(Offset(0.5, 0.5), Size(1.0, 1.0)), // Adjust alignment as needed
    ),
  ),
)

Метод 5: объединение нескольких градиентов
Вы можете добиться более сложных эффектов градиента, комбинируя несколько радиальных градиентов. Вы можете использовать виджет Stackдля наложения градиентов с различным выравниванием. Вот пример:

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
  ),
  child: Stack(
    children: [
      Positioned.fill(
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            gradient: RadialGradient(
              colors: [Colors.red, Colors.blue],
              center: Alignment(-0.5, -0.5), // Adjust alignment as needed
            ),
          ),
        ),
      ),
      Positioned.fill(
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            gradient: RadialGradient(
              colors: [Colors.yellow, Colors.green],
              center: Alignment(0.5, 0.5), // Adjust alignment as needed
            ),
          ),
        ),
      ),
    ],
  ),
)

В этой статье мы рассмотрели различные методы создания радиальных градиентов с выравниванием во Flutter. Мы рассмотрели использование классов RadialGradient, FractionalOffset, AlignmentDirectionalи FractionalOffset.fromOffsetAndSize. Мы также узнали, как комбинировать несколько градиентов с помощью виджета Stack. Используя эти методы, вы можете добавить визуально привлекательные эффекты градиента в свои приложения Flutter.