Inkwell Splash Effect not showing in Flutter when taps on it | Flutter - flutter

Widget build(BuildContext context) {
return Column(
children: [
InkWell(
child: CircleAvatar(
radius: 40,
backgroundColor: Colors.grey[600],
child: CircleAvatar(
radius: 37,
backgroundColor: Colors.white,
child: Stack(
children: [
Positioned(
top: 4,
left: 4,
bottom: 4,
right: 4,
child: IconButton(
icon: Icon(
icon,
size: 40,
color: Colors.grey[600],
),
onPressed: onpress,
),
),
],
),
),
),
),
I didnt getting any splash effect or any other effect when tapping on this button. I add inkwell for different widgets also but its still not working

By checking your code onTap: (){}, is disable but by adding onTap still splash effect is not show so I added one extra Position widget and by this I given splash effect by using Material
InkWell(
onTap: (){},
splashColor: Colors.brown,
child: CircleAvatar(
radius: 40,
backgroundColor: Colors.grey[600],
child: CircleAvatar(
radius: 37,
backgroundColor: Colors.white,
child: Stack(
children: [
Positioned(
top: 4,
left: 4,
bottom: 4,
right: 4,
child: IconButton(
icon: Icon(
Icons.ten_k,
size: 40,
color: Colors.grey[600],
),
onPressed: () {},
),
),
Positioned( // This I'm added
left: 0.0,
top: 0.0,
bottom: 0.0,
right: 0.0,
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () async {
await Future.delayed(
Duration(milliseconds: 200));
},
),
),
),
],
),
),
),
),

Wrap InkWell with the Material widget.
Material(
child: InkWell(
child:...
onTap:(){ //<-- must not be null otherwise it is considered as disabled
}
)
)

you must add onTap parameter to InkWell widget otherwise it will be disabled hence it won't have any effect.
your InkWell widget should be like this:
InkWell(
onTap: () {},
child: CircleAvatar(
radius: 40,
child: ....,
),
),

Related

How to use ListView and stop element from scrolling?

I have a screen with a ListView that holds an SVG, Stack and TextFields. When the keyboard is opened, I get the usual Overflow error so I'm using a ListView to combat it since I'm using a Column anyway.
I want my SVG image to stay fixed at the top while the rest scrolls underneath it, anyway to give the image a fixed position?
child: Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
width: double.infinity,
child: ListView(
children: [
const SizedBox(
height: 50,
),
SvgPicture.asset( //Should stay fixed while rest scroll
'assets/example.svg',
color: primaryColor,
height: 80.0,
),
const SizedBox(height: 50),
Center(
child: Stack(
children: [
_image != null
? InkWell(
onTap: selectImage,
child: CircleAvatar(
radius: 48,
backgroundImage: MemoryImage(_image!),
),
)
: InkWell(
onTap: selectImage,
child: const CircleAvatar(
radius: 48,
backgroundImage: AssetImage('assets/user.png'),
),
),
Positioned(
bottom: -10,
left: 50,
child: IconButton(
onPressed: selectImage,
icon: const Icon(Icons.add_a_photo_outlined),
),
),
],
),
),
const SizedBox(height: 50),
TextFieldInput(...),
TextFieldInput(...),
TextFieldInput(...),
TextFieldInput(...)...
I've tried taking the SVG out of the Column and changing the ListView into a Column with a SingleChildScrollView parent and I still get Render Overflow. Code follows:
child: Scaffold(
body: SafeArea(
child: Column(
children: [
SvgPicture.asset(
'assets/example.svg',
color: primaryColor,
height: 80.0,
),
SingleChildScrollView(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
width: double.infinity,
child: Column(
children: [
const SizedBox(height: 50),
Center(
child: Stack(
children: [
_image != null
? InkWell(
onTap: selectImage,
child: CircleAvatar(
radius: 48,
backgroundImage: MemoryImage(_image!),
),
)
: InkWell(
onTap: selectImage,
child: const CircleAvatar(
radius: 48,
backgroundImage:
AssetImage('assets/user.png'),
),
),
Positioned(
bottom: -10,
left: 50,
child: IconButton(
onPressed: selectImage,
icon: const Icon(Icons.add_a_photo_outlined),
),
),
],
),
),
const SizedBox(height: 50),
TextFieldInput(..),
TextFieldInput(..),
TextFieldInput(..)...
What would be the correct approach to this?
Wrap your SingleChildScrollView in a Expanded widget, like this:
child: Scaffold(
body: SafeArea(
child: Column(
children: [
SvgPicture.asset(
'assets/example.svg',
color: primaryColor,
height: 80.0,
),
Expanded( //<--- add this
child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
width: double.infinity,
child: Column(
children: [
const SizedBox(height: 50),
Center(
child: Stack(
children: [
_image != null
? InkWell(
onTap: selectImage,
child: CircleAvatar(
radius: 48,
backgroundImage: MemoryImage(_image!),
),
)
: InkWell(
onTap: selectImage,
child: const CircleAvatar(
radius: 48,
backgroundImage:
AssetImage('assets/user.png'),
),
),
Positioned(
bottom: -10,
left: 50,
child: IconButton(
onPressed: selectImage,
icon: const Icon(Icons.add_a_photo_outlined),
),
),
],
),
),
const SizedBox(height: 50),
TextFieldInput(..),
TextFieldInput(..),
TextFieldInput(..)...
Column by default has screen height size that is why you get render flow error when screen size increases because you're not making topmost column scrollable.
there are 2 possible solution you can do
Wrap your singleChildScrollView inside Expanded. It will adjust and scroll your all items inside remaining space after image.
Make your topmost column scrollable by wrapping inside SingleChildScrollView. It will solve render flow error issue but your screen whole screen will scroll as well.

I want to call my sliding up panel as a button

I would like when click on my edit button, my sliding up panel trigger and opens !
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
title: Text(
"Modifier Profil",
style: TextStyle(
color: Color.fromARGB(255, 41, 40, 40),
fontWeight: FontWeight.w500),
),
backgroundColor: Color.fromARGB(255, 252, 249, 249),
leading: IconButton(
onPressed: () {},
icon: Icon(Icons.arrow_back),
color: Colors.black,
),
//actions: [IconButton ( onPressed: () {}, icon: Icon(Icons.check), color: Colors.amber,)],
),
body: SlidingUpPanel(
body: Container(
margin: EdgeInsets.only(left: 15, top: 20, bottom: 20),
//color: Colors.blue,
child: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: ListView(
scrollDirection: Axis.vertical,
children: [
Center(
child: Stack(
children: [
CircleAvatar(
maxRadius: 58,
backgroundColor: Colors.white,
child: CircleAvatar(
maxRadius: 55,
foregroundImage: AssetImage("images/profile.png"),
),
),
Positioned(
bottom: 0,
top: 70,
right: 0,
child: CircleAvatar(
radius: 17,
backgroundColor: Colors.white,
)),
Positioned(
bottom: 0,
top: 70,
right: 0,
child: CircleAvatar(
radius: 15,
backgroundColor: Colors.amber,
child: IconButton(
iconSize: 15,
onPressed: () {},
icon: Icon(
Icons.edit,
color: Colors.white,
),
),
)),
],
),
),
Declare a PanelController and in the onPressed method of your button you will be able to open and close the panel.
PanelController panelController=PanelController();
body: SlidingUpPanel(
controller:panelController,
.
.
body:ElevatedButton(
child:Text("edit"),
onPressed: (){
panelController.isPanelOpen?
panelController.close():panelController.open();
}
P.S. Would recommend you to check out Modal Bottom Sheet

Positioning in list tile drawer flutter?

I have this drawer in a flutter app. The List Tile has a leading, title and a trailing. I used an icon button in the leading in the first tile as opposed to using asset image in other tiles, so the alignment got a little distorted. How can I make it align with rest of the tiles. This is the code of the first tile:
SizedBox(
height: 40,
child: ListTile(
leading: IconButton(
onPressed: () {},
icon: const Icon(Icons.notifications_none_sharp,
color: Colors.white),
),
title: Transform.translate(
offset: const Offset(-14, 0),
child: const Text('Notifications',
style: TextStyle(
fontSize: 12, color: Colors.white))),
trailing: SizedBox(
),
other list tiles code :
SizedBox(
height: 40,
child: ListTile(
leading: SizedBox(
height: 20,
width: 20,
child: Image.asset(
'assets/sideMenu/Group.png',
),
),
title: Transform.translate(
offset: const Offset(-14, 0),
child: const Text(
'Grid',
style: TextStyle(
fontSize: 12,
color: Colors.white,
),
),
),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => const BlurGrid()));
},
),
),
I just want the notification icon to align with other leading asset images:
just replace the IconButton with an Icon wrapped in a GestureDetector and then add padding if required
SizedBox(
height: 40,
child: ListTile(
leading: GestureDetector(
onTap: () {} ,
child: const Icon(
Icons.notifications_none_sharp,
color: Colors.white,
),
),
title: Transform.translate(
offset: const Offset(-14, 0),
child: const Text('Notifications',
style: TextStyle(fontSize: 12, color: Colors.white))),
trailing: SizedBox(),
),
),
that caused by IconButton.
if you want to keep use the IconButton, then you have to remove the padding and reset the constrain.
ListTile(
leading: IconButton(
onPressed: () {},
icon: Icon(Icons.abc),
padding: EdgeInsets.zero, // remove the padding
constraints: BoxConstraints(), // reset the constarins
),
title: Text("abcdef"),),

How to make drag and drop from drawer in Flutter

I've provide the code. So the dragable widget is in the drawer and the drag target is in the home screen. But when I drag the container to put it in the drag target(home screen) the drawer doesn't close
If anyone have the full code that's working just like I discribe plz feel free to share cuz I think there's a lot of people trying to do this as well
`Drawer(
child: Column(children: [
Padding(
padding: const EdgeInsets.only(top: 100.0),
child: Draggable(
child: Container(
color: Colors.red,
width: 250,
height: 100,
),
feedback: Container(
color: Colors.green,
width: 250,
height: 100,
),
childWhenDragging: Container(
color: Colors.grey,
width: 250,
height: 100,
),
),
),
]),
);
FloatingActionButton(
onPressed: () {
Scaffold.of(context).openDrawer();
},
child: const Icon(
Icons.add,
color: Colors.white,
size: 29,
),
backgroundColor: Colors.redAccent,
elevation: 0,
),`
when I create a drawer and put container and wrap with drag-able widget then I put a drag target inside the screen But when I try to drag it the drawer doesn’t close.So if you have any idea how to close the drawer when widget is drag plz answer down below
The Class Draggable provides a function called onDragStarted. If you place Navigator.pop in there it will close the drawer once the drag starts
Drawer(
child: Column(children: [
Padding(
padding: const EdgeInsets.only(top: 100.0),
child: Draggable(
//This function should close the drawer
onDragStarted: () {
Navigator.pop(context);
},
child: Container(
color: Colors.red,
width: 250,
height: 100,
),
feedback: Container(
color: Colors.green,
width: 250,
height: 100,
),
childWhenDragging: Container(
color: Colors.grey,
width: 250,
height: 100,
),
),
),
]),
);
FloatingActionButton(
onPressed: () {
Scaffold.of(context).openDrawer();
},
child: const Icon(
cons.add,
color: Colors.white,
size: 29,
),
backgroundColor: Colors.redAccent,
elevation: 0,
),

How do I change the highlightShape property of a Flutter InkWell?

I have the following Flutter widget:
return SizedBox(
height: 40.0,
width: 40.0,
child: InkWell(
splashColor: Colors.grey,
onTap: callback,
child: Center(child: image),
),
);
The problem is that the highlight on this button is rectangular. I would like to change it to a circle, but the highlightShape property is not available for modification. How can this button be given a circular highlight?
Following #pskink's comment, I used customBorder:
return SizedBox(
height: 40.0,
width: 40.0,
child: InkWell(
splashColor: Colors.grey,
onTap: callback,
child: Center(child: image),
customBorder: CircleBorder(),
),
);
return ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child: Icon(Icons.settings)),
onTap: () {},
),
),
);
You can use ClipOval to achieve this
ClipOval(
child: Material(
child: SizedBox(
height: 40.0,
width: 40.0,
child: InkWell(
splashColor: Colors.grey,
onTap: () {},
child: Center(child: Icon(Icons.directions_car)),
),
),
),
)