I want to add a circle effect over a container, but I want the circle to not extend the dimensions of the container, but instead get clipped by it. This is what I'm trying to achieve:
As you can see the white circle naturally would extend the red container but instead, I'm trying to make it stay into the borders. How can I do it?
The simplest way to do this is to using an overlap and cliprect.
class OverlapSquare extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
),
child: ClipRect(
clipBehavior: Clip.hardEdge,
child: OverflowBox(
maxHeight: 250,
maxWidth: 250,
child: Center(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
),
),
),
);
}
}
The OverFlowBox allows the circle to draw outside the bounds of its parent, and then the cliprect cuts it back to the edge.
Just an FYI - on my device I'm getting a tiny red line at the top & bottom of the white circle. I'm fairly sure that's a recently-introduced bug in flutter as I'm also seeing something similar if I put a white border around the container. I've raised an issue on github for that.
ClipRRect worked best for me.
See reference video: https://www.youtube.com/watch?v=eI43jkQkrvs&vl=en
ClipRRect(
borderRadius: BorderRadius.cirular(10),
child: myContainerWithCircleWidget,
);
Related
I need your help. I am trying to replicate a design I saw from Instagram for personal growth. I have an Image inside Stack, the Stack is a child to a Container with Border radius. However, the image inside the box doesn't take after the border radius. I have tried different methods but none of them worked.
What I am getting is
VS what I am trying to get
How can I make the image have a border radius even though is Positioned outside the box ??
Here is a snippet of my code
Container(
width: 300,
height: 500,
decoration: BoxDecoration(
color: boxColor,
borderRadius: BorderRadius.circular(12.0),
),
child: Stack(
children: [
Positioned(
right: -150,
top: -200,
child: ClipRRect(
clipBehavior: Clip.antiAlias,
// borderRadius: BorderRadius.circular(12.0),
child:Image.asset(
height: width*.35,
width: width*.35,
"assets/box.png",
),
),
),
],
),
)
Include clipBehavior: Clip.hardEdge, on container
Container(
width: 300,
height: 500,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(12.0),
),
If you still like to use ClipRRect use it on top of container.
Dev's..
I am getting an issue in my Flutter App..
When I am using LinerGradient Widget in my app on a Container Widget..
My LinearGradient not going smooth...
Please Help..
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class NowPlayingScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
//Variables
final mySize = MediaQuery.of(context).size;
return Scaffold(
body: Stack(
children: [
//Todo : First Container Background
Container(
height: mySize.height,
width: mySize.width,
color: Color(0xFF9D9D9D),
),
Container(
height: mySize.height,
width: mySize.width,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomRight,
end: Alignment.topLeft,
colors:[
Colors.black,
Colors.transparent
],
)
),
),
],
),
);
}
}
enter image description here
From my opinion it looks perfectly but if you wanna change the gradient size of particular color add 'stops' property for linear gradient
for eg:
Container(
height: mySize.height,
width: mySize.width,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomRight,
end: Alignment.topLeft,
colors:[
Colors.black,
Colors.transparent
],
stops:[0.5,0.2],
)
),
),
For more info:
https://api.flutter.dev/flutter/painting/LinearGradient-class.html
There is nothing wrong with your code, you are just seeing banding which is caused by the gradient covering the whole screen.
If you create a gradient from white (#FFFFFFFF) and black (#FF000000) there will be exactly 256 shades that you will be able to see. If you have a large display each band will have multiple pixels and (depending on how good your eyes are) you will be able to see these bands. You can experiment with this by changing the color of your bottom container. Using dark green (#FF003300) will make bands more obvious and using bright red (#FFFF0000) will make them much harder to see.
The best way to fix this is to make the size of your gradient container smaller, or increase the range of the gradient. These will cause each band to take up fewer pixels and make them less noticeable.
Add dithering effect in main dart
void main() {
Paint.enableDithering = true;
runApp();
}
I am using an image as a child of the floating action button on flutter. I don't need any background color.
and also I need to make the image size bigger. how can I do this? help, please.
Simply do this:
FloatingActionButton(
backgroundColor: Colors.transparent,
)
Edit: My answer is just a workaround. backgroundColor: Colors.transparent goes well.
I think for your case, you can also try workaround like this,
floatingActionButton: GestureDetector(
onTap: () {
// Do Something
},
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://www.dartpad.dev/dart-192.png")),
borderRadius: BorderRadius.circular(0.50),
),
width: 50.0,
height: 50.0,
),
),
Play with height and width values for desired result. You can also add boxShadow to Container to look like the actual FAB.
Refer: https://api.flutter.dev/flutter/painting/BoxDecoration-class.html
and also for including your image from asset, refer https://api.flutter.dev/flutter/painting/DecorationImage-class.html
Hope that suits your case!
Colors.transparent
Will remove the color from any widget which accepts color parameter. Please use it in your FloatingActionButton like below:
FloatingActionButton(
elevation: 0.0,
child: new Icon(Icons.check),
backgroundColor: Colors.transparent,
onPressed: (){}
)
I want the lower path of Doctor image to get transparent so that I can see the tiles going underneath it.
How can I do that? I tried opacity but it is making the whole image fade.
Remember just the lower part not whole image
For different opacity in the same image, you can use a ShaderMask like this:
ShaderMask(
shaderCallback: (rect) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Colors.black.withOpacity(1.0),
Colors.black.withOpacity(1.0),
Colors.black.withOpacity(0.3),
Colors.black.withOpacity(0.3),// <-- change this opacity
// Colors.transparent // <-- you might need this if you want full transparency at the edge
],
stops: [0.0, 0.5,0.55, 1.0], //<-- the gradient is interpolated, and these are where the colors above go into effect (that's why there are two colors repeated)
).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
},
blendMode: BlendMode.dstIn,
child: FlutterLogo(size: 80, colors: Colors.red),
),
You'll have to play around with the LinearGradient stops in order to get the effect that you're looking for. Just for completeness sake, let me explain the colors and the stops that I chose. Since the gradient is interpolated, you need a really strong step from one color to the other. So, looking at the stops and colors, it reads like this:
start the first color (with opacity = 1.0) at 0% of the way down and go until you hit 50% of the way down, then interpolate from 50% to 55% from opacity 1.0 to opacity 0.3 (that's why those numbers need to be close together) Finally, end with opacity 0.3 at 100% of the image.
I explained that piece, because you will have to adjust the 0.5 and 0.55 piece to make it look how you want.
You will have to use Stack and positioned widget side by side.
Add your image as child of the Container. I hope this helps
Stack(
children: <Widget>[
Positioned(
right: 20,
child: Container(
height: 150,
width: 100,
color: Colors.black,
),
),
ListView(
padding: EdgeInsets.only(top: 100),
children: <Widget>[
Ink(
color: Colors.green,
child: ListTile(
title: Text("Tile 1"),
subtitle: Text("subtitle"),
),
),
Ink(
color: Colors.blue,
child: ListTile(
title: Text("Tile 2"),
subtitle: Text("subtitle"),
),
),
Ink(
color: Colors.green,
child: ListTile(
title: Text("Tile 3"),
subtitle: Text("subtitle"),
),
),
],
),
],
),
Currently the only way I could make this kind of curved effect would be through making 2 container, making 1 a child of another and making 1 container's colour into the background colour.
However I cannot replicate this effect if the background is an image. Could anyone assist?
Example of the code I use:
Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Container(
height: 100,
color: Color(0xFF0D6068),
),
Expanded(
child: Container(
color: Color(0xFF0D6068),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
)),
),
))
],
)),
);
You can make use of a Stack widget to achieve this, such that the background color or image would be at the back then the curved container would be stacked on it. Here is an example code.
Stack(children <Widget> [
Image.asset(''),
Container()
]
)
Instead of using an image asset, you can make use of BoxDecoration with the decoration parameter of a container. The BoxDecoration has an image parameter where you can provide your image with a DecorationImage() widget.