I have a container with image and I wanted to place another small container on top to show an icon on the bottom right of it
Widget buildImage2() {
return Center(
child: Container(
decoration: const BoxDecoration(
color: Colors.black12,
shape: BoxShape.circle,
),
child: ClipOval(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
showModalBottomSheet(
context: context,
builder: (context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: const Icon(Icons.photo),
title: const Text('Gallery'),
onTap: () {
pickImage(ImageSource.gallery);
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.camera_alt_outlined),
title: const Text('Camera'),
onTap: () {
pickImage(ImageSource.camera);
Navigator.pop(context);
},
),
],
);
});
},
child: Stack(
clipBehavior: Clip.none,
children: [
CachedNetworkImage(
imageUrl: imageURL,
imageBuilder: (context, imageProvider) {
return Ink.image(
image: imageProvider,
fit: BoxFit.cover,
child: Container(
alignment: Alignment.bottomRight,
padding: const EdgeInsets.only(right: 15.0),
width: 160.0,
height: 160.0,
),
);
},
),
Container(
alignment: Alignment.bottomRight,
padding: const EdgeInsets.only(right: 4.0),
width: 150.0,
height: 150.0,
child: Positioned(
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: const Color(0xFF5B84B1),
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 3)
),
child: const Icon (Icons.camera_alt, size: 25,
),
),
),
),
],
),
),
),
),
// color: Colors.black12,
),
);
}
But its not giving me the exact behaviour I am looking for. the two containers are placed on top of each other but the small one with the icon is being cutted from the edges as the image shows:
What should I do to fix this?
CodePudding user response：
camera Icon from this Container gesture you need add this line behavior: HitTestBehavior.translucent
like this
GestureDetector(
behavior: HitTestBehavior.translucent, // add this line
onTap: () {
//TODO
},
child: Container(
alignment: Alignment.bottomRight,
padding: const EdgeInsets.only(right: 4.0),
width: 150.0,
height: 150.0,
child: Positioned(
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: const Color(0xFF5B84B1),
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 3)
),
child: const Icon (Icons.camera_alt, size: 25,
),
),
),
),
)
CodePudding user response：
You can use of Stack() with Positioned(bottom:0.0, right: 0.0, child: Icon()
You can try to put another container outside of Clipped Container in stack.
Stack(
children: [
Container(
height: 100.0.h,
width: 100.0.h,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(AppImages.placeHolderImage))
),
),
Positioned(
bottom: 0.0,
right: 2.0,
child: Container(
padding: EdgeInsets.all(8.0.sp),
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
child: Image.asset(
AppImages.cameraProfile,
scale: 3.0.sp,
),),)
],
),
CodePudding user response：
Thanks for all the comments. This is how I solved that issue:
Widget buildImage() {
return Center(
child: Container(
decoration: const BoxDecoration(
color: Colors.black12,
shape: BoxShape.circle,
),
child: Material(
color: Colors.transparent,
child: InkWell(
customBorder: const CircleBorder(),
onTap: () {
showModalBottomSheet(
context: context,
builder: (context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: const Icon(Icons.photo),
title: const Text('Gallery'),
onTap: () {
pickImage(ImageSource.gallery);
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.camera_alt_outlined),
title: const Text('Camera'),
onTap: () {
pickImage(ImageSource.camera);
Navigator.pop(context);
},
),
],
);
});
},
child: Container(
decoration: BoxDecoration(
image: DecorationImage(image: CachedNetworkImageProvider(
imageURL
)
),
shape: BoxShape.circle,
),
alignment: Alignment.bottomRight,
padding: const EdgeInsets.only(right: 4.0),
width: 150.0,
height: 150.0,
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: const Color(0xFF5B84B1),
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 3)
),
child: const Icon (Icons.camera_alt, size: 25,
),
),
),
),
),
),
);
}
CodePudding user response：
Please Use Stack Widget and set the property
clipBehavior: Clip.none, to full control for Positioned Widget . See the below example for reference
Stack(
clipBehavior: Clip.none,
children: [
Container(
height: 150.0,
width: 150.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
),
),
child: const Icon(
Icons.person,
size: 70,
),
),
Positioned(
bottom: 0.0,
right: 6.0,
child: Container(
padding: const EdgeInsets.all(8.0),
decoration: const BoxDecoration(
color: Colors.white54,
shape: BoxShape.circle,
),
child: const Icon(
Icons.camera_alt_outlined,
),
),
)
],
),