Блог

Главная - Вопросы по программированию - Придайте моему круглому изображению соответствующую границу в трепете

Придайте моему круглому изображению соответствующую границу в трепете

#flutter #dart

Вопрос:

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

Пока что лучшее, что я могу сделать, это добавить украшение к значку с закругленным углом, но это не работает. Вот результат и код, любая помощь приветствуется ! (Интересно, есть ли решение, которое адаптировалось бы к форме изображения, если я передумаю и решу использовать прямоугольное изображение или изображение в форме флага с эмодзи. Спасибо!)

Текущий вид, не совсем круглый

 return Padding(
      padding: const EdgeInsets.all(10),
      child: DropdownButton(
        onChanged: (Language? lang) {
          lang == null ? print("Null language error") : _changeLanguage(lang.languageCode);
        },
        underline: SizedBox(),
        icon: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.blueGrey,
            ),
            child: buttonIcon),
        items: ...,
      ),
    );

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

1. Вместо пользовательского дизайна вы можете использовать CircleAvatar() и вы можете указать свое изображение в свойстве BackgroundImage.

2. Идеально! Большое спасибо!

Ответ №1:

Вы могли бы увеличить радиус вашего borderRadius, чтобы он соответствовал радиусу кнопки, и придать кнопке некоторое дополнение.

Что-то вроде этого:

 return Padding(
      padding: const EdgeInsets.all(10),
      child: DropdownButton(
        onChanged: (Language? lang) {
          lang == null ? print("Null language error") : _changeLanguage(lang.languageCode);
        },
        underline: SizedBox(),
        icon: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(200), // you can adjust this value to your needs
              color: Colors.blueGrey,
            ),
            child: Padding(
              padding: const EdgeInsets.all(10), // this value will be the width of your border
              child: buttonIcon,
            ),
          ),
        items: ...,
      ),
    );

Ответ №2:

Решение, данное Чирагом Баргуджаром в комментариях.

Что я сделал, так это создал CircleAvatar и дал ему еще один аватар Круга в детстве, первый создает внешнее кольцо, которое работает как граница. Результат:

Результат

Код:

 icon: CircleAvatar(
          radius: 22,
          backgroundColor: Colors.blueGrey,
          child: CircleAvatar(
            backgroundImage: buttonIcon,
            radius: 18,
          ),
        ),

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

Метки: