When using the folloing code I would expect a circle avatar image but getting an oval. I tried different parameters like width and height on the Container but that didn't help.
appBar: AppBar(
backgroundColor: Colors.white,
leading: IconButton(
icon: new Icon(Icons.star_border, color: Colors.black),
onPressed: () => {},
),
actions: <Widget>[
Container(
//height: 25.0,
// width: 25.0,
child: CircleAvatar(
backgroundImage: NetworkImage('https://lh3.googleusercontent.com/a-/AAuE7mChgTiAe-N8ibcM3fB_qvGdl2vQ9jvjYv0iOOjB=s96-c'),
)
/*
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://lh3.googleusercontent.com/a-/AAuE7mChgTiAe-N8ibcM3fB_qvGdl2vQ9jvjYv0iOOjB=s96-c')),
),*/
),
],
You are receiving an oval shape because you are using the CircleAvatar widget in Appbar widget which has limited height.
Try adding a parameter radius inside CircleAvatar Widget
it will return the circle shape you want for the image.
try changing radius size value, according to your need.
CircleAvatar(
backgroundImage: NetworkImage('https://lh3.googleusercontent.com/a-/AAuE7mChgTiAe-N8ibcM3fB_qvGdl2vQ9jvjYv0iOOjB=s96-c'),
radius: 15.0
)
I've had this issue in the past and have found that wrapping the AvatarCircle in a container with 58 width fixes the Circle radius ratio issue, making it a proper circle shape. One pixel more or less may fit your liking. Give this a try:
appBar: AppBar(
backgroundColor: Colors.white,
leading: IconButton(
icon: new Icon(Icons.star_border, color: Colors.black),
onPressed: () => {},
),
actions: <Widget>[
Container(
width: 58.0,
child: CircleAvatar(
backgroundImage: NetworkImage('https://lh3.googleusercontent.com/a-/AAuE7mChgTiAe-N8ibcM3fB_qvGdl2vQ9jvjYv0iOOjB=s96-c'),
)
),
],
i use this code and works with every image size...
CircleAvatar(
child: ClipOval(
child: Image.network(items.logo, fit: BoxFit.fill),
),
backgroundColor: Colors.transparent,
radius: 30,
)
Nothing works for me other than wrapping CircleAvatar with padding of 8.0.
Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
...
),
)
Related
In my ListTile, I want a CircleAvatar with a border, that's why I have a CircleAvatar inside an other. The problem is the border doesn't appear. And when I try my code outside a ListTile, it works ...
Code:
class TestTile extends StatelessWidget {
const TestTile({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: const [
/***** DOES NOT WORK *****/
Card(
child: SizedBox(
width: 200,
height: 100,
child: ListTile(
leading: CircleAvatar(
radius: 32,
backgroundColor: Colors.blue,
child: CircleAvatar(
radius: 30,
backgroundColor: Colors.red,
)),
title: Text("test"),
))),
/***** WORKS *****/
CircleAvatar(
radius: 32,
backgroundColor: Colors.blue,
child: CircleAvatar(
radius: 30,
backgroundColor: Colors.red,
))
]));
}
}
It's because a ListTile has a fixed height. The CircleAvatars simply don't fit in them with your wanted radiuses so they both get shrunk down to largest size that does fit. If you try with smaller radiuses, like 20 and 18 for example you will see that it does work.
To increase the height of the ListTile you can also try to set the visualDensity for example like this, then it might fit
child: ListTile(
visualDensity: VisualDensity(vertical: 2),
Instead of putting two CircleAvatar inside each other to get border, use Container with decoration property, like this:
Card(
child: SizedBox(
width: 200,
height: 100,
child: ListTile(
leading: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.blue, width: 2)),
child: CircleAvatar(
radius: 30,
backgroundColor: Colors.red,
),
),
title: Text("test"),
))),
I am new to flutter and I want to add shadow to an image in Card (shadow just to an image not the text), how can I do that? Below is the snippet of my code, please let me know how can I do that, thank you.
child: Container(
height: 70,
child: Card(
child: ListTile(
onTap: () {},
title: Text(eventList[index].event_name),
leading: CircleAvatar(
backgroundImage: NetworkImage(eventList[index].imageURL),
),
),
),
),
you can wrap the CircleAvatar with another Container and specify the boxShadow property in its decoration, or for more accuracy, just use a DecoratedBox like this:
Container(
height: 70,
child: Card(
child: ListTile(
onTap: () {},
title: Text("eventList[index].event_name"),
leading: DecoratedBox(
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black.withOpacity(.2),
blurRadius: 5,
offset: const Offset(0, 10),
)
]),
child: CircleAvatar(
backgroundImage: NetworkImage("eventList[index].imageURL"),
),
),
),
),
);
You can simply use a Widget called PhysicalModel where it can easily show shadows. You can play with the properties such as color and elevation for your desired shadow effect.
https://api.flutter.dev/flutter/widgets/PhysicalModel-class.html
leading: PhysicalModel(
color: Colors.grey.withOpacity(0.8),
shape: BoxShape.circle,
elevation: 10.0,
child: const CircleAvatar(
backgroundImage: NetworkImage(
'https://i1.sndcdn.com/artworks-000486414654-mt7qdt-t500x500.jpg'),
),
),
I wanna know how to add an icon like online icon over a CircleAvatar.
I've wrote this code but dont know what to do...
...
CircleAvatar(
backgroundColor: Color(0xff00A3FF),
radius: 35.0,
backgroundImage:
AssetImage("assets/photos/photo-1.jpg"),
),
SizedBox(height: 7.0),
Text(
"Michael",
style: TextStyle(color: Colors.white,: FontWeight.w700),
)
...
What you need here is a Stack widget. Stack widgets allow you to place widgets on top of widgets (meaning order is crucial).
Here I modified your CircleAvatar to add a little green "online" indicator. Make sure to adjust the size and such to fit your needs.
Stack(
children: [
CircleAvatar(
backgroundColor: Color(0xff00A3FF),
backgroundImage: AssetImage("assets/photos/photo-1.jpg"),
radius: 35.0,
),
Positioned(
right: 0,
bottom: 0,
child: Container(
padding: EdgeInsets.all(7.5),
decoration: BoxDecoration(
border: Border.all(
width: 2,
color: Colors.white
),
borderRadius: BorderRadius.circular(90.0),
color: Colors.green
)
)
)
]
)
You don't need a circleAvatar in a circleAvatar.
just use backgroundImage property of the CircleAvatar. like this;
NetworkImage(userAvatarUrl)
more on that:https://api.flutter.dev/flutter/material/CircleAvatar-class.html
You can achieve what you want with nested circle avatars like this:
CircleAvatar(
radius: 58,
backgroundImage: AssetImage("assets/photos/photo-1.jpg"),
child: Stack(
children: [
Align(
alignment: Alignment.bottomRight,
child: CircleAvatar(
radius: 18,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 16,
backgroundColor: Colors.green
)
)
)
]
)
);
The result is like this:
If you want to add an icon, you can do like this
CircleAvatar(
radius: 58,
backgroundImage: AssetImage("assets/photos/photo-1.jpg"),
child: Stack(
children: [
Align(
alignment: Alignment.bottomRight,
child: CircleAvatar(
radius: 18,
backgroundColor: Colors.white,
child: Icon(Icons.camera) // change this children
)
)
]
)
);
and the result will be:
I am wondering how do we make an App Bar action button like the one in the picture. It seems that adding a background or wrapping a widget on an Icon will not achieve the look of the button in the picture below.
I made a demo of what you are trying to achieve:
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text(
'Title',
),
centerTitle: true,
actions: [
// squared button/icon
Padding(
padding: const EdgeInsets.only(right: 20.0, top: 10.0, bottom: 10.0),
child: Container(
width: 35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.white.withOpacity(0.5),
),
child: Center(
child: Icon(
Icons.settings,
color: Colors.white,
),
),
),
),
],
),
body: .... YOUR WIDGETS ...
RESULT:
You can use an Icon inside a Container with equal width and heigth (so you obtain a square), then you can round it with BorderRadius to obtain that effect.
Of course you should use the color property of the Container to fill the background.
Hi I am trying to create a screen that is completely black, except of a circle in the middle.
I wrote some code that creates the black screen:
Stack(
...
Positioned.fill(
child: Container(
color: Colors.grey.withOpacity(0.5),
)
)
)
But the problem that I am facing is that I don't know how to punch a round hole into the screen so that so that it shows what is behind it in the stack.
Thanks in advance for your answers!
Use CircleAvatar to draw Circles!
Change the radius: property to your desired size, a lot easier than Containers(), or FloatingActionButtons()
Container(
color: Colors.black,
Center(
child: CircleAvatar(
backgroundColor: Colors.red,
radius: 20,
),
),
)
Hope this helps!
This should work for you.
Container(
color: Colors.black,
alignment: Alignment.center,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Text("BackGround Text", style: TextStyle(color: Colors.purple),),
CircleAvatar(
backgroundColor: Colors.white.withOpacity(0.3),
radius: 100,
),
],
)));