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,
),
],
)));
Related
I have two icons in a stack. I want one to hide the other, but instead it's semi-transparent and the other is shown behind it.
This is the code:
Stack(
children: [
Container(child: Icon(Icons.account_circle_rounded), padding: EdgeInsets.only(left: 10),),
Container(child: Icon(Icons.account_circle_rounded), padding: EdgeInsets.only(left: 20),),
],
)
This is how it looks:
Icons are more like SVG, use vector to draw shape. There are some empty spaces inside the icon to draw the path, and we can see the background though this. Also, it contains padding around it, You can use your assets to draw the UI.
We can wrap with another ColoredBox to hide the background icon, but it will get extra padding from IconData.
This snippet shows basic level structure.
SizedBox(
height: 24,
width: 24 * 1.7,
child: Stack(
alignment: Alignment.center,
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
child: const Icon(
Icons.account_circle_rounded,
),
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
child: const Icon(
Icons.account_circle_sharp,
),
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
),
],
),
),
Widget renders bottom to top.
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 need This create text on Left I created simple UI using flutter. I have a problem. I need this Create
Text on Left side. I didn't add center tag to my code but when I add devider to my code the text automatically in center . I want devider but also I want this text on left align ? How can I do that ?
My code Flutter
return Scaffold(
resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: true,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
title: new Center(child: new Text('Create',style: TextStyle(fontFamily: "Montserrat", color: Colors.black))),
leading: GestureDetector(
onTap: () { },
child: Icon(
Icons.arrow_back,
color: Colors.black,
),
),
),
backgroundColor: Colors.white,
body: GestureDetector(
child: new SingleChildScrollView(
child: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
),
Divider(
height: 2,
color: Colors.red,
),
SizedBox(
height: 17.0,
),
Container(
// margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
child: Text('Create')
)
],
)
),
),
);
}
}
Add this line to your text container.
alignment: Alignment.centerLeft,
example:
Container(
alignment: Alignment.centerLeft,
child: Text('Create'),
)
So I've never used flutter but as a front end developer this is the insight I can offer.
There's two reasons why this could be happening. Either the text is in a container which is not left aligned or the Text object is not left aligned.
To go about fixing this the first thing I would do is put borders around everything so that I can figure out the reason for this issue. This means add style "border: 2px solid green" or any variation to the text (and possibly eventually something like text-align and also adding a border to the container itself (and eventually possibly changing its width or finding a different method to realign it)
Add this to your column
mainAxisSize: MainAxisSize.max,
and this to your text container
alignment: Alignment.centerLeft,
So all code will be like this
return Scaffold(
resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: true,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
title: new Center(child: new Text('Create',style: TextStyle(fontFamily: "Montserrat", color: Colors.black))),
leading: GestureDetector(
onTap: () { },
child: Icon(
Icons.arrow_back,
color: Colors.black,
),
),
),
backgroundColor: Colors.white,
body: GestureDetector(
child: new SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
),
Divider(
height: 2,
color: Colors.red,
),
SizedBox(
height: 17.0,
),
Container(
// margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
alignment: Alignment.centerLeft,
child: Text('Create')
)
],
)
),
),
);
}
}
You have to pass the container as the child of Align. If you want to align every element to the left then you can just use :
Column(
crossAxisAlignment:CrossAxisAlignment.start,
children:[])
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(
...
),
)
[Update] : I got the solution, If you want the code, comment below or if you just want to know I've written it here :
The solution is to put the Cover Image and the Followers & Following inside a Column (as a single widget) and then put that Column and the Align (profile picture) both inside a Stack, then set the Fixed heightFactor.
So it would look something like this :
Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(), //The Cover Photo
Container(
child: Card() //The Followers and Following Card
)
]
),
Align() //The Profile Picture having fixed heightFactor
]
)
This solution is working on all 4 Devices I have + 2 Android Emulators (2 have 16:9 ratio, 2 have 18:9 and 2 have 19:9 ratio).
The problem is following :
On my device, which is having 18:9 Aspect Ratio there is no Bottom Overflowing issue.
But on devices having 16:9 Aspect Ratio it's having this issue.
This happens only when I try to set heightFactor of Followers & Following Align widget.
I tried to tweak many things in Stack so I could overcome this, but couldn't achieve similar result. So, I'm stuck with this.
Also, as far as I know I can overlap only by using Stack widget. If there is any possible option, do say.
Here is my code :
Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 224.0,
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("https://www.eta.co.uk/wp-content/uploads/2012/09/Cycling-by-water-resized-min.jpg"),
fit: BoxFit.cover
)
),
),
Align(
heightFactor: 5.0,
child: Container(
alignment: Alignment.bottomCenter,
width: MediaQuery.of(context).size.width,
height: 96.0,
margin: EdgeInsets.all(8.0),
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
elevation: 0.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
"Followers",
style: TextStyle(
fontFamily: "Nunito",
fontWeight: FontWeight.bold,
color: Colors.blue
),
),
Text(
"3000",
style: TextStyle(
fontFamily: "Nunito",
color: Colors.blue
),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
"Following",
style: TextStyle(
fontFamily: "Nunito",
fontWeight: FontWeight.bold,
color: Colors.blue
),
),
Text(
"0",
style: TextStyle(
fontFamily: "Nunito",
color: Colors.blue
),
),
],
),
],
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
heightFactor: 2.75,
child: Card(
color: Colors.transparent,
elevation: 0.0,
child: Container(
alignment: Alignment.bottomCenter,
width: 96.0,
height: 96.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage("https://cdn140.picsart.com/284302087007201.jpg?c256x256"),
fit: BoxFit.fill
),
border: Border.all(width: 4.0, color: Colors.blue)
),
),
),
),
],
),
You've provided the height of widget manually so it'll overflow on smaller screens. So you have to provide the height of widget depending upon the screen. You can use MediaQuery.of(context).size.height to get the height of the device.
And you can also multiply it with some number to get the height in percentage. For example, if you want 80% height of the screen then you can do MediaQuery.of(context).size.height * 80
The answer from #yashthakkar1173 is correct. That's one way of doing it. In addition to that I would say to his solution you can use
ConstrainedBox(
child: Card(),
constraints: BoxConstraints(
minHeight: 96.0,
maxHeight: 106.0,
))
What I observe is that you don't need the entire view to be in a Stack since it's just the top three widgets that overlap so I would wrap that stack in a column and set MainAxisSize to Min. I've done something similar, or you can set it to max so it'll always fill all the space left over.