I am trying to use the below code to create a circular border around an image and align an icon on top of the circular border. What I am looking at is as the image below:
And my code is as below but it didn't work out perfectly:
Stack(
children: [
CircleAvatar(
radius: 60,
backgroundColor: Colors.white,
child: Container(
padding: EdgeInsets.all(2),
child: CircleAvatar(
radius: 70,
backgroundImage: AssetImage('assets/person_icon.png'),
backgroundColor: Colors.white,
//
)),
),
Positioned(
bottom: 100,
right: 50,
child: InkWell(
onTap: () {},
child: Container(
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Icon(Icons.add_a_photo, color: colorBlue),
),
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(
50,
),
),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(2, 4),
color: Colors.black.withOpacity(
0.3,
),
blurRadius: 3,
),
]),
),
)),
],
),
As you can above I am trying to use stack to lay each widget on top of each other but couldn't achieve that. I don't if anyone can help out where I missed it or give me a good idea of how to come about this.
Thanks in advance.
Default clipBehavior on Stack is hardEdge.
Use clipBehavior: Clip.none on Stack.
And to have circle shape
use customBorder: CircleBorder(), on InkWell.
use shape: BoxShape.circle instead of circular radius on container.
For better alignment use
Positioned(
top: -12,//half of icon size
left: 0,
right: 0,
Also better providing size on Stack like here.
/// fixing top widget size
SizedBox.square(
dimension: squareSize,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned.fill(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
clipBehavior: Clip.hardEdge,
decoration: const ShapeDecoration(
shape: CircleBorder(),
),
child: Image.asset(
'assets/images/image01.png',
fit: BoxFit.cover,
),
),
),
),
///background circle, you also do it on image widget
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(width: 5, color: Colors.green),
),
),
Positioned(
top: -12, // half of icon size
left: 0,
right: 0,
child: InkWell(
onTap: () {},
customBorder: const CircleBorder(),
child: Container(
width: 24 + 12, //icon size+padding
height: 24 + 12,
alignment: Alignment.center,
decoration: const ShapeDecoration(
shape: CircleBorder(),
color: Colors.green,
),
child: Icon(
Icons.add_a_photo,
color: Colors.white,
),
),
),
),
],
),
)
Play with sizes and decoration
Just add to the Stack Widget the Property clipBehavior: Clip.none,.
The clipBehavior will befine how to handle the Clip of the Stack Widget. Standard is hardEdge and cuts your icon off.
So your finished working Code is
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
clipBehavior: Clip.none,
children: [
CircleAvatar(
radius: 60,
backgroundColor: Colors.white,
child: Container(
padding: EdgeInsets.all(2),
child: CircleAvatar(
radius: 70,
backgroundImage: AssetImage('assets/person_icon.png'),
backgroundColor: Colors.white,
//
),
),
),
Positioned(
bottom: 100,
right: 50,
child: InkWell(
onTap: () {},
child: Container(
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Icon(Icons.add_a_photo, color: Colors.blue),
),
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(
50,
),
),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(2, 4),
color: Colors.black.withOpacity(
0.3,
),
blurRadius: 3,
),
],
),
),
),
),
],
),
),
);
}
}
void main() {
runApp(
const MaterialApp(
home: MyApp(),
),
);
}
Try below code
Stack(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 25),
child: Container(
padding: EdgeInsets.all(8),
height: 270,
width: 270,
decoration: BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: ClipOval(
child: Container(
height: 250,
width: 250,
child: Image.network(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
fit: BoxFit.cover,
),
),
),
),
),
),
Positioned(
top: 0,
left: .0,
right: .0,
child: Center(
child: CircleAvatar(
backgroundColor: Colors.green,
radius: 30.0,
child: Icon(
Icons.check,
color: Colors.white,
size: 40,
),
),
),
)
],
),
Result Screen->
user this below code to achieve
Center(
child: Stack(
children: [
Container(
height: 200,
child: CircleAvatar(
radius: 75,
backgroundColor: Colors.green,
child: CircleAvatar(
radius: 70,
backgroundColor: Colors.white,
child: Container(
padding: EdgeInsets.all(2),
child: const CircleAvatar(
radius: 60,
backgroundImage: NetworkImage("https://helostatus.com/wp-content/uploads/2021/09/pic-for-WhatsApp-HD.jpg"),
backgroundColor: Colors.white,
//
)),
),
),
),
Positioned(
left: 16,
right: 16,
top: 8,
child: InkWell(
onTap: () {},
child: const CircleAvatar(
backgroundColor: Colors.green,
radius: 16,
child: Icon(
Icons.check,
color: Colors.white,
),
)),
),
],
),
)[enter image description here][1]
Thanks all for the contribution but here is what works perfectly for what I'm looking at. I added clipBehavior and set Clip to noneclipBehavior: Clip.none, added ClipOval in a Container and set it margin and padding respectively to give the space between the green circular border and the profile image. I also, added another Container inside my ClipOval so as to add my image as a child to it. Find below my final code:
Center(
child: Stack(
clipBehavior: Clip.none,
children: [
CircleAvatar(
radius: 60,
backgroundColor: colorGreen,
child:Container(
padding: EdgeInsets.all(4),
margin: EdgeInsets.all(3),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: ClipOval(
child: Container(
height: 250,
width: 250,
child: Image.network(
'my image link',
fit: BoxFit.cover,
),
),
)
)),
Positioned(
bottom: 100,
right: 45,
child: InkWell(
onTap: () {},
child: Center(
child: CircleAvatar(
backgroundColor: colorGreen,
radius: 15.0,
child: Icon(
Icons.check,
color: Colors.white,
size: 25,
),
),
),
),
),
],
),
),
I'm wondering if there is a simple way to give a circle avatar multiple border colors in Flutter.
Bonus if you could set the % you want each color to fill.
Here is an image of what I mean, but note it wasn't that easy to do in Figma, hence the blurring of the colors. Color blending actually would not be the preferred behavior.
This is what came to my mind. You can change the color list to match the Figma gradient.
Container(
height: 80,
width: 80,
decoration: const BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green,
Colors.yellow,
Colors.red,
Colors.purple
]),
shape: BoxShape.circle),
child: Padding(
//this padding will be you border size
padding: const EdgeInsets.all(3.0),
child: Container(
decoration: const BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
child: const CircleAvatar(
backgroundColor: Colors.white,
foregroundImage: NetworkImage("https://i.ibb.co/rkG8cCs/112921315-gettyimages-876284806.jpg"),
),
),
),
),
Here is your solution,
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0XFF8134AF),
Color(0XFFDD2A7B),
Color(0XFFFEDA77),
Color(0XFFF58529),
],
),
shape: BoxShape.circle
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle
),
margin: EdgeInsets.all(2),
child: Padding(
padding: const EdgeInsets.all(3.0),
child: CircleAvatar(
radius: 25,
backgroundColor: Colors.grey,
backgroundImage: NetworkImage(reels[i].image)
),
),
),
),
I am not getting splash effect when my Inkwell is inside showModalBottomsheet while it is customized, I wanted the rounded corners, so I hide the background color to transparent, when the background color is in white, the splash effect works fine. I tried playing with Alpha and Opacity properties, but no luck there.
questionEditAndDelete(BuildContext context) {
return showModalBottomSheet(
context: context,
elevation: 0,
backgroundColor: Colors.transparent,
builder: (context) {
return Container(
height: MediaQuery.of(context).size.height * 0.15,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(25), topLeft: Radius.circular(25)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Padding(
padding: const EdgeInsets.only(bottom:20.0),
child: Divider(
indent: 110,
endIndent: 110,
thickness: 4,
color: Colors.grey,
),
),
InkWell(
onTap: (){},
splashColor: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(15)),
child: Container(
height: MediaQuery.of(context).size.height*0.05,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal:4.0),
child: Icon(EvaIcons.editOutline, size: 26,),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal:2.0),
child: Text('Edit', style: TextStyle(fontSize: 18),),
)
],
),
),
),
InkWell(
onTap: (){},
splashColor: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(15)),
child: Container(
height: MediaQuery.of(context).size.height*0.05,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal:4.0),
child: Icon(Icons.delete_outline_outlined, size: 26,),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal:2.0),
child: Text('Delete', style: TextStyle(fontSize: 18),),
)
],
),
),
),
]),
);
});
}```
Yes you are right so available alternate options are
Replace InkWell with Gesture Detector
Remove splash color of InkWell or set splash color to Colors.Transparent
i have a login page in which appears this error when i'm trying to insert text in an input : A RenderFlex overflowed by 104 pixels on the bottom.
here is a part of my code :
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Colors.blue, Colors.teal])),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 70.0, bottom: 0.0),
child: Image.asset(
'asset/img/téléchargement.jpg',
height: 100,
width: 100,
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
margin: EdgeInsets.fromLTRB(35, 3, 35, 60),
elevation: 4.0,
color: Colors.white,
child: ListView(
shrinkWrap: true,
children: <Widget>[...
i have to put padding inside the card but nothing works.
Wrap your body with
SingleChildScrollView()
Your code should look like this:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(child:Center(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Colors.blue, Colors.teal])),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 70.0, bottom: 0.0),
child: Image.asset(
'asset/img/téléchargement.jpg',
height: 100,
width: 100,
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
margin: EdgeInsets.fromLTRB(35, 3, 35, 60),
elevation: 4.0,
color: Colors.white,
child: ListView(
shrinkWrap: true,
children: <Widget>[...
Assuming that overflow is at the bottom of the screen.
Try using SingleChildScrollView() like this:
Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Container(
child: //CONTINUE YOUR CODE FROM HERE
),
),
);
You can also try physics property inside SingleChildScrollView() to get better user experience
This may help you
For adding a glow effect on a button I have "Frankenstein-ed" this code:
floatingActionButton: Container(
decoration: BoxDecoration(boxShadow: [
new BoxShadow(
color: Colors.pinkAccent,
blurRadius: 50.0,
),
]),
child: Material(
shape: CircleBorder(),
color: Colors.pink,
child: InkWell(
onTap: (){print('tap');},
child: Padding(
padding: const EdgeInsets.all(20.0), child: Icon(Icons.add)),
),
), //Icon(Icons.add),
),
the shape in Material is circular, but the ripple effect that are handled by Inkwell goes outside the circle shape.
I have tried wrapping Inkwell by a Container:
Container(
decoration: BoxDecoration(shape: BoxShape.circle),
child: InkWell(
onTap: (){print('tap');},
child: Padding(
padding: const EdgeInsets.all(20.0), child: Icon(Icons.add)),
),
),
and wrapping Padding by a Container:
floatingActionButton: Container(
decoration: BoxDecoration(boxShadow: [
new BoxShadow(
color: Colors.pinkAccent,
blurRadius: 50.0,
),
]),
child: Material(
shape: CircleBorder(),
color: Colors.pink,
child: InkWell(
onTap: (){print('tap');},
child: Container(
decoration: BoxDecoration(shape: BoxShape.circle),
child: Padding(
padding: const EdgeInsets.all(20.0), child: Icon(Icons.add)),
),
),
), //Icon(Icons.add),
),
but no luck.
Edit after Gaspard Merten's answer:
trying this code does not change the ripple effect's behavior:
Material(
shape: CircleBorder(),
color: Colors.pink,
child: Container(
decoration: BoxDecoration(boxShadow: [
new BoxShadow(
color: Colors.pinkAccent,
blurRadius: 50.0,
),
]),
child: InkWell(
onTap: () {
onClick();
},
child: Container(
decoration: BoxDecoration(shape: BoxShape.circle),
child: Padding(
padding: const EdgeInsets.all(20.0), child: Icon(icon)),
),
), //Icon(Icons.add),
),
);
You can use ClipRRect and clip the material widget instead of the container:
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
child: YourMaterialButton
)
That's happening because the material widget is the direct ancestor of the inkwell. Try to put the Material widget before the container and specify de coloris and the border radius of the material and remove the color argument from the container.
You can use 'customBorder' property to make ripple shape circular irrespective of container shape !
InkWell(
customBorder: CircleBorder(),
onTap: () {}
child: ...
)