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

Метод 1: использование виджета стека

Stack(
  children: [
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.red,
    ),
  ],
);

Метод 2: использование BoxDecoration

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.red],
    ),
  ),
);

Метод 3: использование FractionallySizedBox

Container(
  child: FractionallySizedBox(
    alignment: Alignment.center,
    widthFactor: 0.5,
    child: Container(
      color: Colors.blue,
    ),
  ),
  color: Colors.red,
);

Метод 4. Использование ShaderMask

Container(
  decoration: BoxDecoration(
    color: Colors.red,
    image: DecorationImage(
      image: AssetImage('assets/images/your_image.png'),
      fit: BoxFit.cover,
    ),
  ),
  child: ShaderMask(
    shaderCallback: (Rect bounds) {
      return LinearGradient(
        colors: [Colors.blue, Colors.transparent],
        stops: [0.5, 0.5],
      ).createShader(bounds);
    },
    child: const Text('Your Content'),
  ),
);

Метод 5: использование CustomPaint

Container(
  child: CustomPaint(
    painter: TwoColorContainerPainter(),
  ),
);

class TwoColorContainerPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint1 = Paint()..color = Colors.blue;
    final paint2 = Paint()..color = Colors.red;
    final rect1 = Rect.fromLTWH(0, 0, size.width / 2, size.height);
    final rect2 = Rect.fromLTWH(size.width / 2, 0, size.width / 2, size.height);
    canvas.drawRect(rect1, paint1);
    canvas.drawRect(rect2, paint2);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

В этой статье мы рассмотрели различные методы реализации контейнера с двумя цветами во Flutter. Мы рассмотрели использование виджета Stack, BoxDecoration, FractionallySizedBox, ShaderMask и CustomPaint. Каждый метод обеспечивает гибкость и может использоваться в зависимости от конкретных требований. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим потребностям, чтобы создавать визуально привлекательные пользовательские интерфейсы во Flutter.