#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),
),
),
),
)
),