Блог

Главная - Вопросы по программированию - Флаттер — Как получить линейный градиент по всем краям?

Флаттер — Как получить линейный градиент по всем краям?

#flutter #containers #gradient #linear-gradients

Вопрос:

введите описание изображения здесь

 LinearGradient(
                    //tileMode: TileMode.clamp,
                    colors: [
                      kRecordButtonColor.withOpacity(0.4),
                      kRecordButtonColor,
                      kRecordButtonColor,
                      kRecordButtonColor.withOpacity(0.4),
                    ],
                    stops: const [
                      0,
                      0.2,
                      0.8,
                      1,
                    ],
                  ),

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

Комментарии:

1. Может быть, вы можете использовать RadialGradient?

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

Ответ №1:

Попробуйте это вместо вашего контейнера:

 Stack(
          alignment: Alignment.center,
          children: [
            Container(
              margin: EdgeInsets.all(16.0),
              width: 55,
              height: 55,
              decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Colors.red.withOpacity(0.5),
                      Colors.red,
                      Colors.red,
                      Colors.red.withOpacity(0.5),
                    ],
                    stops: const [
                      0,
                      0.2,
                      0.8,
                      1,
                    ],
                  )),
            ),
            Container(
              margin: EdgeInsets.all(16.0),
              width: 55,
              height: 55,
              decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Colors.white.withOpacity(0.5),
                      Colors.white.withOpacity(0.0),
                      Colors.white.withOpacity(0.0),
                      Colors.white.withOpacity(0.5),
                    ],
                    stops: const [
                      0,
                      0.2,
                      0.8,
                      1,
                    ],
                  )),
            ),
          ],
        ),

Комментарии:

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

Метки: