Блог

Главная - Вопросы по программированию - Как добавить значок с непрозрачным слоем поверх кругового изображения в Flutter

Как добавить значок с непрозрачным слоем поверх кругового изображения в Flutter

#flutter

#flutter

Вопрос:

Мне нужно добавить значок камеры с непрозрачным слоем поверх кругового изображения. Я попробовал приведенный ниже код:

 Container(
      height: 100,
      width: 100,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          image: AssetImage(userInfo.imageUrl),
          fit: BoxFit.cover,
        ),
      ),
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          width: double.infinity,
          padding: EdgeInsets.symmetric(vertical: 5),
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.3),
          ),
          child: Icon(
            Icons.photo_camera,
            color: Colors.white.withOpacity(0.5),
          ),
        ),
      ),
    )

Но я не получил ожидаемого результата:

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

У кого-нибудь есть идея, как заставить это работать? Спасибо

Ответ №1:

Оберните его в ClipRRect виджет следующим образом

 Container(
  height: 100,
  width: 100,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(50.0),
    child: Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          image: AssetImage("assets/imgs/avatar-default.png"),
          fit: BoxFit.cover,
        ),
      ),
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          width: double.infinity,
          padding: EdgeInsets.symmetric(vertical: 5),
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.3),
          ),
          child: Icon(
            Icons.photo_camera,
            color: Colors.white.withOpacity(0.5),
          ),
        ),
      ),
    ),
  ),
),

Ответ №2:

Вы также можете использовать ClipOval

 Container(
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: AssetImage(userInfo.imageUrl),
      fit: BoxFit.cover,
    ),
  ),
  child: ClipOval(
  child: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(vertical: 5),
      decoration: BoxDecoration(
        color: Colors.black.withOpacity(0.3),
      ),
      child: Icon(
        Icons.photo_camera,
        color: Colors.white.withOpacity(0.5),
      ),
    ),
  ),
)
),