what I want to achieve is to make the parent only clickable not the child of the parent.
Suppose, there is a clickable container with the size of 400x400, and the child of that container is another container with the size of 200x200.
Now if we touch the second container(smaller one), it is also clickable. How can I prevent the small container from getting clicked?
I have tried almost everything but I may don't have that good skills at flutter, please help.
Code:
InkWell(onTap: (){print('Container Clicked');},child:
Container(height: 400, width: 400, color: Colors.blue,
child: Center(child: Container(height: 200,width: 200, color: Colors.green,)),),)
try this
InkWell(
onTap: (){
print('Container Clicked');
},
child: Container(
height: 400,
width: 400,
color: Colors.blue,
child: Center(
child: GestureDetector(
onTap: () {}, /// <-- locked inkwell tap
child: Container(
height: 200,
width: 200,
color: Colors.green,)
),
),
),
)
I hope I got your question right. This is the code if you want to make only the bigger container clickable,
Stack(
children:[
InkWell(
onTap: (){
print('Container Clicked');
},
child: Container(
height: 400, width: 400,
color: Colors.blue,
),
),
Center(
child: Container(
height: 200,width: 200,
color: Colors.green,
),
),
],
),
Related
I am designing a widget where, I want to put widget in the center of two rectangular container. My idea is that when I click on it, center widget becomes visible. It looks like this.
What I wanted to do is that clicking on one grey container or both, this purple widget becomes visible, clicking again, it would disappear. This is my code below.
Stack(
alignment: Alignment.center,
children: [
Container(
width: 70,
height: 40,
color: Colors.indigo,
),
Container(
width: 100,
height: 70,
child: Column(
children: [
Container(
width: 100,
height: 30,
decoration: BoxDecoration(
color: Colors.grey,
),
),
SizedBox(height: 10,),
Container(
width: 100,
height: 30,
decoration: BoxDecoration(
color: Colors.grey,
),
),
],
),
),
],
),
However, with this the widget hides behind two widgets like this.
Anybody can help me with its positioning?
Here is my answer.
Stack(
alignment: Alignment.center,
children: [
Container(
width: 100,
height: 70,
child: Column(
children: [
Container(
width: 100,
height: 30,
decoration: BoxDecoration(
color: Colors.grey,
),
),
SizedBox(height: 10,),
Container(
width: 100,
height: 30,
decoration: BoxDecoration(
color: Colors.grey,
),
),
],
),
),
Container(
width: 70,
height: 40,
color: Colors.indigo,
),
],
),
How do I make an icon rest on the bottom of a container, just like in the picture. So that even when I scroll the page and the container moves. The icon moves with it in that particular position.
The icon in this page is the empty profile icon resting on the container with the exes image. I don't want my container to have an image though.
Just color image of the container and round icon.
Image of the container and icon even when scrolled.
NOTE. I don't want the container to be the app bar. Just a container on its own under the app bar. I'm only showing this picture so u can see what I'm talking about.
did you try this
Align(
alignment: Alignment.topCenter,)
Did you want it like this :
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 300,
color: Colors.cyan[900],
),
Stack(
clipBehavior: Clip.none,
alignment: AlignmentDirectional.topCenter,
children: [
Container(
width: double.infinity,
color: Colors.grey[900],
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
height: 150, // +50 below circle Container
),
const Text(
'Happiness',
style: TextStyle(color: Colors.white, fontSize: 32),
),
const SizedBox(
height: 30,
),
Container(
height: 200,
width: 300,
color: Colors.amber[900],
),
const SizedBox(
height: 30,
),
Container(
height: 200,
width: 300,
color: Colors.red[900],
),
],
),
),
Positioned(
top: -100,
child: Container(
height: 200,
width: 200,
decoration: const BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(
'assets/images/cyanide.png',
)),
color: Colors.deepPurple,
),
),
),
],
),
],
),
),
may be what you need is to use CustomScrollView and SilverAppBar with bottom:
here is the reference: example
plus transform
This question already has answers here:
Flutter: How to make a button expand to the size of its parent?
(8 answers)
Closed 1 year ago.
i am trying to increase the width of the two text buttons to fill up the space of the sizedbox at the very top. I like their position centered as they are i just want to increase their width.
Positioned(
top: 350,
left: 35,
child: SizedBox(
width: width / 1.2,
height: height / 3,
sizedbox that i want to increase the buttons width to.
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
color: Colors.grey[850],
child: Column(
children: [
SizedBox(
height: 90,
),
SizedBox(
height: 10,
),
textbutton 1 to increase width, placed above the other textbutton
TextButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
backgroundColor: MaterialStateProperty.all<Color>(
kcPrimaryColor),
foregroundColor: MaterialStateProperty.all<Color>(
Colors.white)),
onPressed: () {},
child: Text("Upload Picture"),
),
textbutton 2 i would like to increase width of
TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MusicPreferences()),
);
},
child: Text("I will do it later"),
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
backgroundColor: MaterialStateProperty.all<Color>(
Colors.transparent),
foregroundColor: MaterialStateProperty.all<Color>(
kcPrimaryColor)),
),
],
),
),
),
),
),
This is just an extra sized box for design purposes with a picture, no need to change.
Positioned(
top: 290,
left: 140,
child: SizedBox(
width: 150,
height: 150,
child: ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Container(
color: Colors.grey[850],
),
)),
),
Positioned(
top: 280,
left: 165,
child: SizedBox(
width: 100,
height: 150,
child: CircleAvatar(
backgroundImage:
AssetImage("lib/assets/images/randomface.jpg"),
),
),
),
I wrapped both buttons with expanded and then wrapped that with a row to increase the width. That solved the issue
I need a widget to receive the onTap event and is draggable.
child: GestureDetector(
onTap: _setVisibleSelect(),
child: Draggable<Color>(
data: Color(0x000000ff),
child: Image.asset('assets/photo.png', color: Colors.yellow, width: 60, height: 60,),
feedback: Image.asset('assets/photo.png', color: Colors.yellow, width: 60, height: 60,),
childWhenDragging: Container(),
),
I can see _setVisibleSelect() doesn't work when onTap but Dragging.
How can I use two event together?
I would like a way for the user to see that they can scroll horizontally on my horizontal ListView
Thanks in advance
Edit:
Here is my code #wcyankees424
Container(
height: 50,
child: Stack(
children: <Widget>[
ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: cheat.buttons.length,
itemBuilder: (context, index) {
return ButtonListItem(cheat.buttons[index]);
}
),
Positioned(
top: 0,
right: 0,
width: 50,
height: MediaQuery.of(context).size.height,
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 0,
sigmaY: 99
),
child: Container(
color: Colors.black.withOpacity(0.1),
),
),
),
)
],
)
),
And here is a picture of how it looks now:
You can use ShaderMask with a gradient.
You can adjust inside the LinearGradient the stops and the colors to change the effect.
Maybe change Colors.white to Colors.trasnparent
Please try this code, to see some effect.
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
colors: [Colors.white, Colors.white.withOpacity(0.05)],
stops: [0.7, 1],
tileMode: TileMode.mirror,
).createShader(bounds);
},
child: Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Card(
color: Colors.red,
child: Center(child: Text("012345678910 - 0123")),
),
Card(
color: Colors.yellow,
child: Center(child: Text("012345678910 - 0123")),
),
Card(
color: Colors.blue,
child: Center(child: Text("012345678910 - 0123")),
),
],
),
),
),
),
);
}
These are the examples in images:
Is this the effect you wanted? Try this out let me know what you think.
Positioned(
top: 0,
right: 0,
width: 50,
height: MediaQuery.of(context).size.height,
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 2.5, sigmaY: 2.5), //this determines the blur in the x and y directions best to keep to relitivly low numbers
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.black.withOpacity(0),
Colors.black.withOpacity(
0.3), //This controls the darkness of the bar
],
// stops: [0, 1], if you want to adjust the gradiet this is where you would do it
),
),
),
),
),
),