I have an SVG icon and I struggle to make the tap area of it bigger, without making the icon bigger itself.
The icon is pretty small and so the tap area is small as well. But for UI reasons I do not want to make the icon bigger, is there any solution to increasing the tap area for this?
Here is my code snippet:
Container(
margin: EdgeInsets.only(right: 55),
child: InkResponse(
onTap: () {},
child: SvgPicture.asset("assets/svg/regular/bell.svg",
alignment: Alignment.centerRight, height: 24.w, width: 24.w),
),
)
you can just wrap the SvgPicture with another widget that can expand padding or size.
A better approach is the Padding widget :
Container(
margin: EdgeInsets.only(right: 55.w),
child: InkResponse(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(10),
child: SvgPicture.asset("assets/svg/regular/bell.svg",
alignment: Alignment.centerRight, height: 24.w, width: 24.w),
),
),
),
or with sizedBox :
Container(
margin: EdgeInsets.only(right: 55.w),
child: InkResponse(
onTap: () {},
child: SizedBox(
width: 100,
height: 100,
child: SvgPicture.asset("assets/svg/regular/bell.svg",
alignment: Alignment.centerRight, height: 24.w, width: 24.w),
),
),
),
Related
I wanted to get same dynamic height of right widget to left widget in Row Widget.Below I was attaching screenshot of my expected design. Could you help how can do that.
We can see right side date widget is expanding , So I wanted to get the height of left side widget(blue and purple) same as right side widget.
If left side image widget is not possible to expand the height then is any there any possible to create custom widget, Any solution is welcome.
Thanks in advance.
Row(
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
constraints: BoxConstraints(
minHeight: 40.0,
maxHeight: 50.0,
/*maxWidth: 10,
minWidth: 10,*/
),
padding: EdgeInsets.only(top: 0.0),
//height: 98,
width: 20,
child: ShaderMask(
shaderCallback: (bounds) {
return LinearGradient(
colors: [Color(0xff12229F), Color(0xff615FDF)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
).createShader(bounds);
},
child: ImageIcon(
AssetImage('assets/images/reservations/small_timeline.png'),
color: Colors.white,
size: 40,
),
),
),
),
Expanded(
child: Column(
children: [
pickup(data),
dropoff(data),
],
),
),
],
),
After Using IntrinsicHeight
I was unable to remove default padding around the icons
IntrinsicHeight(
child: Padding(
padding: const EdgeInsets.only(top: 0,bottom: 0),
child: Row(
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 4),
child: Icon(
Icons.fiber_manual_record,
size: 18,
color: Color(0xff11219E),),
),
Flexible(
child: Container(
decoration: BoxDecoration(
gradient:
LinearGradient(colors: [Color(0xff11219E), Color(0xff6F6AEB)]),
),
width: 4,
),
),
Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Icon(
Icons.fiber_manual_record,
size: 18,
color: Color(0xff6F6AEB),),
),
],
),
Expanded(
child: Column(
children: [
pickup(data),
dropoff(data),
],
),
),
],
),
),
),
It seems to me that Expanded could be used to expand your widget to full availabe height.
Keep in mind that the Row width will distribution will also expand, since no flex parameter is provided.
You already have an Expanded on the right widget so just add the other one and provide a flex value for both of them.
Some thing like 10 for left and 90 for right should work for you :)
my goal is to define width of ElevatedButton, i tried to include Button in SizedBox as in Container, now its in ConstrainedBox and its still not working, its streched on entire length of app and i want him to have width: 100.0 Thx in advance
ConstrainedBox(
constraints: const BoxConstraints.tightFor(
width: 60.0,
height: 60.0,
),
child: ElevatedButton(
child: const Text("Blabla"),
onPressed: () {
print("Yup");
},
),
),```
[1]: https://i.stack.imgur.com/wmgj5.png
Use Padding()to define the desired width :
ElevatedButton(
onPressed: () {
print("Je suis une coquine");
},
child: Padding(
padding: const EdgeInsets.only(
left: 16.0, top: 4.0, right: 16.0, bottom: 4.0),
child: Text("blabla"),
),
)
I am trying to build a login page using SingleChildScrollView and column widgets to display my collection but for some reason, the order is totally absurd and changing the mainAxisAlignment isnt helping.
This is my code:
Container(
height: lotusGet.height,
padding: LOTUS_COLLECTION_PADDING,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.centerLeft,
child: LotusRoundButton(
press: () => Navigator.pop(context),
child: Icon(
Icons.chevron_left,
color: lotusGet.accentColor,
),
),
),
),
const LotusLogo(
text: 'log in',
),
SizedBox(
height: 0.01 * height,
),
_ErrorText(
height: height,
lotusGet: lotusGet,
),
SizedBox(
height: 0.03 * height,
),
_LoginForm(
loginformKey: loginformKey,
height: height,
lotusGet: lotusGet,
emailController: emailController,
showPassword: showPassword,
passwordController: passwordController,
),
],
),
),
As can be seen from the code and common sense, the logo should be above the form but the opposite occurs, anyone know why?
I'm trying to implement a "Change my profile picture" icon like how it appears in the profile page in Whatsapp, where a clickable camera icon hovers on the bottom right of the image.
This is the code I used inside a stateful widget:
Row(
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 120,
child: Image(
image: AssetImage('affogato.png'),
),
),
Positioned(
top: 70,
left: 90,
child: FloatingActionButton(
child: Icon(Icons.camera_alt),
onPressed: () {},
),
),
],
),
],
),
Strangely, the Icon seems to take the constraints of the Image container. So when I set the width as 120 and try to push the Icon button to the bottom right edge of the Image, it gets cut off by the Image constraints. How do the constraints of the Container affect the FloatingActionButton even though they're siblings inside the Stack not parent-child widgets? And how can I fix this so that the Icon can float over the edge of the image?
You can probably make use of height property of Positioned widget and adjust other dimensions (left, bottom, right, top) so that the button isn't cut-off at bottom right edge and is displayed properly. Working sample code below:
return Scaffold(
body: Center(
child: Row(
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 120,
child: Image(
image: AssetImage('assets/Icon-512.png'),
),
),
Positioned(
bottom: 0,
right: 0,
left: 78,
height: 35,
child: FloatingActionButton(
child: Icon(Icons.camera_alt),
onPressed: () {},
),
),
],
),
],
),
)
// This trailing comma makes auto-formatting nicer for build methods.
);
You might need to adjust dimensions per your need, but this way it doesn't cut-off the button.
Hope this answers your question.
Here's how I did it. I removed the Positioned widget completely and used Padding instead. It seemed to solve the problem. I also wrapped the image in a CircleAvatar to complete the Whatsapp style.
Row(
children: <Widget>[
Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: CircleAvatar(
radius: 70,
backgroundColor: Colors.greenAccent,
child: Container(
height: 150,
width: 150,
child: ClipOval(
child: Image(
image: AssetImage('lib/rainy.png'),
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 105, top: 80),
child: Container(
width: 50,
height: 50,
child: FloatingActionButton(
backgroundColor: Colors.green,
child: Icon(Icons.camera_alt),
onPressed: () async {},
),
),
),
],
),
],
),
Suppose you have a few nested InkResponse, if you tap on the inner one, all of the parent will actually trigger the splash effect even though they will loose in the tap arena for the right tapped widget. The effect will be something like this:
How to prevent such behavior? How to display the splash only for the tapped widget? In this example image it's being used a Container > Row (with InkReponse) > Icon (also with InkResponse). This will also happen if you use material buttons.
You might want to try IgnorePointer
I encourage you to use Stack widget because you can be able to put together multiple widgets. Here there is an example of a container with inner container and they are both clickable independently,
Stack(
children: [
InkWell(
onTap: (){},
child: Container(
width: 400,
height: 400,
color: Colors.green,
),
),
Positioned(
top: 30,
left: 20,
child: InkWell(
onTap: (){},
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
))
],
)
This worked for me
Center(
child:Container(
width: 100,
height: 100,
child: Card(
child: InkWell(
splashColor: color3,
onTap: () {
},
child: Column(
children: [
SizedBox(
height: 10,
),
IconButton(
splashRadius: 7,
splashColor: Colors.pink,
onPressed: () {},
icon: SvgPicture.asset(
ImageConst.bellIcon,
width: 20,
height: 20,
color: Colors.black,
),
),
SizedBox(
height: 10,
),
Text("text"),
],
),
),
),
),
)
Try to wrap the icon into GestureDetector with the empty handler + Padding.