get click inside of container in flutter - flutter

Stack(
children: <Widget>[
getChartView(widget.globalData.chartSelectValue),
Container(
decoration: BoxDecoration(
border: Border.all(
color: HexColor("#0C1C3B"), // <--- border color
width: 10.0,
),
),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height - 280,
)
],
),
I want a click in getChartView() but the container is between click and chartview can any one help me?

yeah i got my answer. by me. this not a good solution but it's full fill my need for now :)
Stack(
children: <Widget>[
getChartView(widget.globalData.chartSelectValue),
Container(
decoration: BoxDecoration(
border: Border.all(
color: HexColor("#0C1C3B"), // <--- border color
width: 10.0,
),
),
width: 10,
height: MediaQuery.of(context).size.height - 260,
),
Align(
alignment: Alignment.centerRight,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: HexColor("#0C1C3B"), // <--- border color
width: 10.0,
),
),
width: 10,
height: MediaQuery.of(context).size.height - 260,
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: HexColor("#0C1C3B"), // <--- border color
width: 10.0,
),
),
width: MediaQuery.of(context).size.width,
height: 10,
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: HexColor("#0C1C3B"), // <--- border color
width: 10.0,
),
),
width: MediaQuery.of(context).size.width,
height: 10,
),
),
Align(
alignment: Alignment.bottomRight,
child: Container(
alignment: Alignment.center,
color: Colors.transparent,
width: 85,
height: 35,
child: Image.asset(
"assets/img/ic_logo.png",
width: 20.0,
height: 20.0,
alignment: Alignment.center,
),
),
),
],),

Stack(
children: <Widget>[
GestureDetector(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: HexColor("#0C1C3B"),
width: 10.0,
),
),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height - 280,
),
onTap: ()
{
getChartView(widget.globalData.chartSelectValue);
},
)
],
),

Well you may need to check your hierarchy, the way your view are rendered on top of each other cause your are using a stack. Another view might be getting the impulse instead of your getChartView(....)

Or you can use InkWell, which will handle the tap events and also animate the action.
InkWell(
onTap: () {
getChartView(widget.globalData.chartSelectValue);
},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: HexColor("#0C1C3B"),
width: 10.0,
),
),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height - 280,
),
),

Related

How can I make the outer circles

I am trying to make the display feature for my app, but I am having a hard time making these outer circles, any input is appreciated
There is a way to draw using coordinates.
You can set the ratio using MediaQuery.of(context).size.
return Scaffold(
body: SafeArea(
child: Stack(
children: <Widget>[
Positioned(
top: 200,
left: 80,
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(128.0),
border: Border.all(color: Colors.blue),
),
),
),
Positioned(
top: 225,
left: 105,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(128.0),
border: Border.all(color: Colors.blue),
),
),
),
],
),
),
);
Use this:
Container(
color: Colors.white,
child: Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.white,Colors.white, Colors.red, Colors.red, Colors.white,Colors.white],
transform: GradientRotation(pi / 2),
),
borderRadius: BorderRadius.circular(128.0),
),
child: Center(
child: Container(
width: 198,
height: 198,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(120.0),
),
),
),
),
),
),
It leads to this output:
use stack widget and put 2 circle containers with different size as children in stack widget

Container in flutter

Hope you all are doing well. I am making a flutter application. In this interface I am having a issue. I am making a container and circle avatar which are in stack. In stack, in first widget container there is also another container. When I set image as a child to inner container it also applied to outer container. Why is this happening and what is the solution of this problem.
Stack(
children: [
// Container(child:
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.indigo,
)),
width: 340,
height: 200,
child: Container(
child: Image.asset(
'assets/pic1.jpg',
fit: BoxFit.cover,
),
width: 340,
height: 150,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
)),
),
),
Positioned(
bottom: 10,
right: 10,
child: CircleAvatar(
backgroundColor: Colors.grey,
radius: 40,
))
],
)
I think You just need to Alignment Property to your Parent widget otherwise child widget will not care about height and width
Stack(
children: [
// Container(child:
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(
color: Colors.indigo,
)),
width: 340,
height: 200,
child: Container(
child: Image.asset(
'assets/pic1.jpg',
fit: BoxFit.cover,
),
width: 340,
height: 150,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
)),
),
),
Positioned(
bottom: 10,
right: 10,
child: CircleAvatar(
backgroundColor: Colors.grey,
radius: 40,
))
],
)
You can also follow the below article to get more information.
https://www.kindacode.com/article/flutter-sizing-a-container-inside-another-container/#:~:text=To%20size%20a%20Container%20that,expand%20to%20its%20parent's%20constraints.

3D Sphere Effect in Flutter

I want to create a view like below.
I tried adding a RadialGradient but it doesn't exact like this image.
Container(
height: 50,
width: 50,
decoration: const BoxDecoration(
color: Color(0xff2DD485),
shape: BoxShape.circle,
gradient: RadialGradient(colors: [Color(0xff42CF8C), Color(0xff1DAE69)], center: Alignment(0, -0.7), stops: [0, 1]),
),
child: const Icon(Icons.done_rounded, color: Colors.white),
)
a bit ugly, but do the trick:
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(25)),
child: Container(
height: 50,
width: 50,
color: const Color(0xff2DD485),
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Positioned(
bottom: 22,
child: Container(
height: 50,
width: 50,
decoration: const BoxDecoration(
color: Color(0xff56dc9d),
shape: BoxShape.circle,
),
),
),
const Icon(Icons.done_rounded, color: Colors.white),
],
),
),
)

How to make an Icon overlay over an image

I'm new to flutter and not that experienced when it comes to programming in general. So I'm trying to do something like this
But I just can't seem to do it, I tried align properties, padding to make it move left and right, I also tried stacks but I don't have any idea how to do it.
This is my code for the image
Widget buildImage() {
return Padding(
padding: EdgeInsets.only(right: 10, left: 10, top: 20),
child: Align(
alignment: Alignment.bottomLeft,
child: Container(
height: 100,
width: 130,
decoration: BoxDecoration(
image: new DecorationImage(
image: new AssetImage(
"assets/images/profile-image.jpeg",
),
fit: BoxFit.cover,
),
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 5.0,
),
),
),
));
}
This is my current progress
I would appreciate any help.
Here is the working code
Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Container(
height: 200,
width: 200,
child: InkWell(
onTap: () => {},
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
height: 200,
width: 200,
color: Colors.grey[200],
child: Icon(Icons.person),
),
),
),
),
Container(
height: 60,
width: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
padding: EdgeInsets.all(5),
child: Container(
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.grey[200]),
child: IconButton(
icon: Icon(Icons.edit),
onPressed: () {},
),
),
),
],
);
This can be achieved with the Stack widget check the docs it has a video explaining it really well.
It lets you positions its children relative to the edges of its box.
You can use Stack to place widget over widget. Here is the working example
Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Container(
decoration: BoxDecoration(
image: new DecorationImage(
image: new AssetImage(
"assets/images/profile-image.jpeg",
),
fit: BoxFit.cover,
),
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 5.0,
)),
height: 100,
width: 130,
),
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
padding: EdgeInsets.all(5),
child: Container(
decoration:
BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
child: Center(
child: IconButton(
icon: Icon(Icons.edit),
onPressed: () {},
),
),
),
),
],
)

Flutter : stack & Ink overlay

I am using a Stack to recreate this effect :
But for some reason, using the Ink widget to be able to get the gradient effect, this is what I have :
This is my code :
Stack(
children: [
SizedBox(
height: 100.0,
width: 100.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: CachedNetworkImage(
imageUrl:
'https://images.unsplash.com/photo-1570296767266-60ccc88974a5',
fit: BoxFit.cover,
placeholder: (context, url) => MC_Shimmer(),
),
),
),
Positioned(
right: -5.0,
bottom: -5.0,
child: SizedBox(
height: 30.0,
width: 30.0,
child: Ink(
decoration: BoxDecoration(
gradient: gradient,
borderRadius:
BorderRadius.all(Radius.circular(5.0)),
),
child: Icon(
OMIcons.cameraAlt,
color: Colors.white,
size: 15.0,
),
),
),
)
],
),
you can use Container instead of Ink and able to use gradient effect.
Positioned(
right: -5.0,
bottom: -5.0,
child: SizedBox(
height: 30.0,
width: 30.0,
child: Container(
decoration: BoxDecoration(
gradient: gradient,
borderRadius:
BorderRadius.all(Radius.circular(5.0)),
),
child: Icon(
OMIcons.cameraAlt,
color: Colors.white,
size: 15.0,
),
),
),
)
I tried this in dart pad it worked alright.
Positioned(
right: -5.0,
bottom: -5.0,
child: SizedBox(
height: 30.0,
width: 30.0,
child: Material(
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.pink, Colors.yellow]),
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
child: Icon(
Icons.camera,
color: Colors.white,
size: 15.0,
),
),
),
),
)