Related
In my design, there is a close button in the BottomSheet. I have tried Stack. But it didn't work. Does anyone know how to achieve the result? Thanks :)
modalBottomSheet(context) {
return showModalBottomSheet(
context: context,
builder: (context) {
return Stack(
children: [
Container(
child: Text('Sample Text'),
),
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
],
);
}
);
}
So I've been trying around for a bit, and this seems to work as you explained.
modalBottomSheet(context) {
return showModalBottomSheet(
context: context,
builder: (context) {
// using a scaffold helps to more easily position the FAB
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: double.maxFinite,
),
Padding(
padding: EdgeInsets.all(30.0),
child: Text("Text in the sheet"),
),
],
),
// translate the FAB up by 30
floatingActionButton: Container(
transform: Matrix4.translationValues(0.0, -30, 0.0), // translate up by 30
child: FloatingActionButton(
onPressed: () {
// do stuff
print('doing stuff');
},
child: Icon(Icons.add),
),
),
// dock it to the center top (from which it is translated)
floatingActionButtonLocation: FloatingActionButtonLocation.centerTop,
);
});
}
The meat of the solution here is to transform the Container which contains the FAB. I got this idea from this older SO answer to a somewhat related question.
The result looks like this:
You'll probably have to make some more edits to achieve the exact result you desire, but I hope this sets you on the right path.
Edit
When, in the above solution, you want to press the FAB, and you tap the top half, the onPressed handler fires, but the modal also closes. You should probably use a WillPopScope that only pops when the actual button is pressed (and not the area around/above it). If you think it's fine pressing anywhere above it as well, you can just leave it as-is.
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
builder: (BuildContext context) {
return Stack(clipBehavior: Clip.none, children: [
Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.vertical(top: Radius.circular(20))),
height: 220.h,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10.0, vertical: 16),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton(
color: Colors.green,
onPressed: () {},
child: const Center(child: Text('Remove')))
],
),
),
),
),
Positioned(
top: -30.h,
right: 12.w,
child: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.close),
)),
]);
},
)
After doing a bit of research, I tried to wrap ListTiles with InkWell to get the onTap ripple effect, but it doesn't seem to work. This is what I have:
return AnimationLimiter(
child: Scrollbar(
child: ListView.builder(
shrinkWrap: true,
itemCount: widget.myItems.length,
itemBuilder: (context, index) => AnimationConfiguration.staggeredList(
position: index,
duration: const Duration(milliseconds: 300),
child: SlideAnimation(
verticalOffset: 50.0,
child: FadeInAnimation(
child: Material(
/// child: Ink( also tried with Ink and no Ink and no Material just InkWell but no ripple
child: InkWell(
onTap: () => widget.nav(widget.myItems[index]),
splashColor: Colors.red,
child: Card(
child: _itemTile(index),
),
),
),
),
),
),
),
),
);
The ListTile:
return ListTile(
dense: true,
trailing: Icon(Icons.keyboard_arrow_right),
leading: category,
title: Text(
item.title,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
);
I managed to get the ripple effect working by doing onTap: () => {} to the InkWell. But after adding the GestureDetector, the Ripple is gone again.
child: InkWell(
borderRadius: BorderRadius.circular(8),
onTap: () {},
splashColor: Colors.red,
child: GestureDetector(
onTap: () => widget.nav(widget.myItems[index]),
child: _itemTile(index),
),
),
I even tried this, ripple works, but it the widget.nav function doesn't get called:
Stack(
children: [
Card(
elevation: 1,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
margin:
EdgeInsets.only(bottom: 5.0, left: 2.0, right: 2.0),
child: GestureDetector(
onTap: () {
widget.nav(widget.myItems[index]);
},
child: _itemTile(index),
),
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () => {},
),
),
)
],
),
Edit* Adding the nav function:
_navToItem(item) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Item(
items: _activityItems.length > 0 ? _activityItems : _items,
showAd: false,
user: userStream,
item: item,
favorites: _favorites,
),
),
);
}
ListTile has a ripple effect by default, so you shouldn't need to add an inkwell. If there isn't a ripple, one of the children is probably causing some issues. Try removing some and see if that helps.
Example
You're correct in using the Stack.
It's necessary due to the way the widget tree is rendered from bottom up, layering each widget on top of each other (which blocks the visual effect of splash if there are children below it.)
The GestureDetector you have in your Stack example won't ever get the tap gesture, cause InkWell below it is taking the event.
Something like this work for you? (Move your widget.nav call to the InkWell onTap:.)
Stack(
children: [
Card(
elevation: 1,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
margin:
EdgeInsets.only(bottom: 5.0, left: 2.0, right: 2.0),
// GESTUREDETECTOR Removed ****************
child: Text('itemTile goes here'),
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () => print('InkWell tapped! Put widget.nav here!'),
),
),
)
],
)
Please try to understand the concept of it. You should provide some margin to the widget to show the effects. You didn't provide any margin or align so it has no space to show the effects.
Below exp. show the effects in all the page because center creates margin from all the side. The Centre aligns its child widget from the top, left, right and bottom.
Widget build(BuildContext context) {
return Center(
child: Material(
child: new InkWell(
onTap: () {
print("tap");
},
child: Center(
child: Container(
width: 200.0,
height: 200.0,
color: Colors.red,
),
),
),
),
);
}
In your case:
return AnimationLimiter(
child: Scrollbar(
child: ListView.builder(
shrinkWrap: true,
itemCount: widget.myItems.length,
itemBuilder: (context, index) => AnimationConfiguration.staggeredList(
position: index,
duration: const Duration(milliseconds: 300),
child: SlideAnimation(
verticalOffset: 50.0,
child: FadeInAnimation(
child: Material(
/// child: Ink( also tried with Ink and no Ink and no Material just InkWell but no ripple
child: InkWell(
onTap: () => widget.nav(widget.myItems[index]),
splashColor: Colors.red,
child: Center(
child: Card(
child: _itemTile(index),
),
),
),
),
),
),
),
),
),
);
For ListTile case try passing custom ripple color. May be your background and your ripple effect color is same.
There is no need to wrap ListTile with InkWell because it already does it under the hood. We could do this with a Material widget to preserve the ripple effect and to act like a Card widget:
Material(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
elevation: 1,
child: ListTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4)),
leading: Text('Hello World'),
onTap: () => print('Pressed ListTile'),
),
),
Output:
Please change your code
Card(child: InkWell(child: ListTile(), onTab: () {},),),
First of all Card widget, its child Inkwell and then ListTile.
I'm trying to create a circle in the flutter. I want to add multiple buttons and bound them in a circle like this.
The marked fields are supposed to be buttons and Course 1 is just the text.
I am able to create something like this but it is only string splitted in the button.
Here is my code for this. I'm not getting any idea about how to do this task. I'm new to flutter.
import 'package:flutter/material.dart';
void main(){runApp(MyApp());}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: new AppBar(
title: Text("Student home"),
),
body:Center(
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
width: 200,
height: 200,
child: Center(
child: Text("Course 1 \n Course 2",
style: TextStyle(fontSize: 12.0,
fontStyle: FontStyle.italic,
),
textAlign: TextAlign.center,
),
),
decoration: BoxDecoration(
border:Border.all(width:3),
borderRadius: BorderRadius.all(
Radius.circular(50),
),
color: Colors.yellow,
),
),
)
),
);
}
}
try shape: BoxShape.circle,,
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
border: Border.all(width: 2),
shape: BoxShape.circle,
// You can use like this way or like the below line
//borderRadius: new BorderRadius.circular(30.0),
color: Colors.amber,
),
child:Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('ABC'),
Text('XYZ'),
Text('LOL'),
],
),
),
Output
is this design that you want?
it contain two button and one text widget
body: Center(
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
width: 200,
height: 200,
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Course 1",
style: TextStyle(
fontSize: 12.0,
fontStyle: FontStyle.italic,
),
textAlign: TextAlign.center,
),
MaterialButton(
onPressed: () {
//do whatever you want
},
child: Text("Mark Attendance"),
),
MaterialButton(
onPressed: () {
//do whatever you want
},
child: Text("Mark Attendance"),
),
],
),
),
decoration: BoxDecoration(
border: Border.all(width: 3),
borderRadius: BorderRadius.all(
Radius.circular(200),
),
color: Colors.yellow,
),
),
),
There are multiple ways to make the border round. As of now you are using fixed height and width always use greater number for border-radius.
For eg.
when your heigh is 200X200 use 150-200 number for border-radius.
here is the code which works fine when you have fixed height and width of the container.
Note: This works only fine when your heigh and width is fixed for the container because the padding in the code is static.If you want dynamic then please use the screen calculation techniques to make if responsive
Making any widget clickable in the Flutter.
There are a couple of Widgets available to make any widget clickable
Gesture Detector
This widget has many methods including onTap() which means you can attach a callback when the user clicks on the widget. For eg (this is used in your code)
GestureDetector(
onTap: (){}, //this is call back on tap
child: Text("Mark Attendance")
)
InkWell Widget (Note: This widget will only work when it is a child of the Material widget)
Material(
child: InkWell(
onTap: (){},
child: Text("Mark Attendance"),
),
)
Here is the working code.
import 'package:flutter/material.dart';
void main(){runApp(MyApp());}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: new AppBar(
title: Text("Student home"),
),
body:Center(
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
width: 200,
height: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom:40.0,top: 20.0),
child: Text("Course 1"),
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: (){},
child: Text("Mark Attendance")),
),
Padding(
padding: const EdgeInsets.all(8.0),
child:Material(
child: InkWell(
onTap: (){},
child: Text("Mark Attendance"),
),
)
),
],)
],
),
decoration: BoxDecoration(
border:Border.all(width:3),
borderRadius: BorderRadius.all(
Radius.circular(150),
),
color: Colors.yellow,
),
),
)
),
);
} }
Note: Material widget always set the background as white for the text
widget
Thanks, I hope is information was helpfull
I'm trying to create a Container with a curve on the middle top and put a Round Button inside the curve. It should look similar to the Curved Navigation Bar package from Flutter, however, just without the animation.
I've tried to work with Stack and Positioned, however, Flutter doesn't convert it how I imagine it to be.
class CurvedContainerWithButtonAtTopCenter extends StatelessWidget{
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Container(
height: 200.0,
child: Stack(
children: <Widget>[
Positioned(
top: 30.0,
right: 0.0,
left: 0.0,
child: Container(
height: 170.0,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 20.0, vertical:
40.0),
color: Colors.blue,
)),
Container(
height: 60.0,
width: 60.0,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle),
alignment: FractionalOffset.center,
child: Container(
margin: EdgeInsets.all(10.0),
child: FloatingActionButton(),
)
)
],
)
)
);
}
}
I would expect the Container to take the full width and be positioned a little bit lower. The Circle should be in the Center at the Top Border of the Container. The Circle should also contain a FloatingActionButton.
I hope you've found the answer by now, but just in case... bellow you can find a potential solution:
build function
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Hello'),
),
bottomNavigationBar: _navigationDrawer,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.orange,
child: Icon(Icons.add),
onPressed: () {}),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked);
}
getter for bottom navigation
Widget get _navigationDrawer {
return Container(
height: 80.0,
child: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
onPressed: () {},
),
Padding(
padding: const EdgeInsets.only(right: 50),
child: IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
),
Padding(
padding: const EdgeInsets.only(left: 50),
child: IconButton(
icon: Icon(Icons.note_add),
onPressed: () {},
),
),
IconButton(
icon: Icon(Icons.portrait),
onPressed: () {},
),
],
)),
);
}
And the result
Hope this helps :) Happy coding !!!
Tapping the container triggers the onTap() handler but does not show any ink splash effect.
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new InkWell(
onTap: (){print("tapped");},
child: new Container(
width: 100.0,
height: 100.0,
color: Colors.orange,
),
),
),
);
}
}
I tried putting the InkWell inside the Container as well but in vain.
I think adding color to the container is covering over the ink effect
https://api.flutter.dev/flutter/material/InkWell/InkWell.html
This code seems to work
body: new Center(
child: new Container(
child: new Material(
child: new InkWell(
onTap: (){print("tapped");},
child: new Container(
width: 100.0,
height: 100.0,
),
),
color: Colors.transparent,
),
color: Colors.orange,
),
),
just click the middle square.
Edit: I found the bug report. https://github.com/flutter/flutter/issues/3782
This is actually as expected, though we should update the docs to make it clearer.
What's going on is that the Material spec says that the splashes are actually ink on the Material. So when we splash, what we do is we literally have the Material widget do the splash. If you have something on top of the Material, we splash under it, and you can't see it.
I have wanted to add a "MaterialImage" widget that conceptually prints its image into the Material as well so that then the splashes would be over the image. We could have a MaterialDecoration which does something similar for a Decoration. Or we could have Material itself take a decoration. Right now it takes a color, but we could extend that to taking a whole decoration. It's not clear whether it's really material-spec-compatible to have a material with a gradient, though, so I'm not sure whether we should do that.
In the short run, if you just need a workaround, you can put a Material on top of the container, with the material set to use the "transparency" type, and then put the ink well inside that.
--hixie
Update: Hixie merged a new Ink solution last year. The Ink provides a convenient way to splash over images.
testWidgets('Does the Ink widget render anything', (WidgetTester tester) async {
await tester.pumpWidget(
new Material(
child: new Center(
child: new Ink(
color: Colors.blue,
width: 200.0,
height: 200.0,
child: new InkWell(
splashColor: Colors.green,
onTap: () { },
),
),
),
),
);
Material(
color: Colors.grey[800],
child: Center(
child: Ink.image(
image: AssetImage('cat.jpeg'),
fit: BoxFit.cover,
width: 300.0,
height: 200.0,
child: InkWell(
onTap: () { /* ... */ },
child: Align(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Text('KITTEN', style: TextStyle(fontWeight: FontWeight.w900, color: Colors.white)),
),
)
),
),
),
)
Please Note: I did not test the new Ink Widget. I coped the code from ink_paint_test.dart and the Ink class docs
https://github.com/Hixie/flutter/blob/1f6531984984f52328e66c0cd500a8d517964564/packages/flutter/test/material/ink_paint_test.dart
https://github.com/flutter/flutter/pull/13900
https://api.flutter.dev/flutter/material/Ink-class.html
Screenshot:
Use Ink widget wrapped in an InkWell.
InkWell(
onTap: () {}, // Handle your onTap
child: Ink(
width: 200,
height: 200,
color: Colors.blue,
),
)
The InkWell widget must have a Material widget as an ancestor otherwise it can't show effects. E.g.:
Material(
child : InkWell(
child : .....
you have to add onTap method to see the actual effects as like
Buttons {RaisedButton,FlatButton etc}.
e.g -> Material(
child : InkWell(
onTap : (){}
child : .....
Let's come to the main points see some examples below and try to understand
the actual concepts of InkWell.
In Below example Material is parent of InkWell with onTap but it still not working. Please try to understand the concept of it. You should provide some margin to container or other widget to show the effects. Actually below code working fine but we can't see because we did not provide any margin or align so it has no space to show the effects.
Widget build(BuildContext context) {
return Center(
child: Material(
child: new InkWell(
onTap: () {
print("tapped");
},
child: new Container(
width: 100.0,
height: 100.0,
color: Colors.orange,
),
),
),
);
}
Below example show InkWell effects only to upwards because we provide space {margin}.
Widget build(BuildContext context) {
return Center(
child: Material(
child: new InkWell(
onTap: () {
print("tapped");
},
child: new Container(
margin: EdgeInsets.only(top: 100.0),
width: 100.0,
height: 100.0,
color: Colors.orange,
),
),
),
);
}
Below exp. show the effects in all the page because center create margin from all the side. Centre align it's child widget from top, left, right and bottom.
Widget build(BuildContext context) {
return Center(
child: Material(
child: new InkWell(
onTap: () {
print("tapped");
},
child: Center(
child: new Container(
width: 100.0,
height: 100.0,
color: Colors.orange,
),
),
),
),
);
}
InkWell() will never show the ripple effect until you add the
onTap : () {}
or any of the callbacks like onDoubleTap, onLongPress etc.
parameter inside the InkWell as it starts listening to your taps only when you specify this parameter.
I have found this solution for me. I think it can help you:
Material(
color: Theme.of(context).primaryColor,
child: InkWell(
splashColor: Theme.of(context).primaryColorLight,
child: Container(
height: 100,
),
onTap: () {},
),
)
Color is given to Material widget. It is the default color of your widget.
You can adjust color of ripple effect using splashColor property of Inkwell.
A better way is to use the Ink widget instead of any other widget.
Instead of defining color inside container you can define it in Ink widget itself.
Below code will work.
Ink(
color: Colors.orange,
child: InkWell(
child: Container(
width: 100,
height: 100,
),
onTap: () {},
),
)
Do not forget to add a onTap: () {} in the InkWell else it will
not show the ripple effect too.
If you want a Ripple Effect on any widget just:
1- Wrap widget with Material and Inkwell.
2- set color to widget from Material.
3- Never set color to the widget you want it to ripple.
Material (
color: const Color(0xcffFF8906),
child: InkWell(
ontap:() { },
child: Container(
color: Colors.transparent,
height: 80,
width: 80,
)
Quick solution in easy words:
This solution works in any place of the widget tree.
Just add additional Material before InkWell, like so:
return Container(
.......code.......
),
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
child: Container(
.......code.......
),
),
),
);
Reference:
https://api.flutter.dev/flutter/material/InkWell-class.html
Section called "The ink splashes aren't visible!"
Wrap the InkWell with Material and use there the color that you need:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: Material(
color: Colors.orange,
child: new InkWell(
onTap: (){ print("tapped"); },
child: new Container(
width: 100.0,
height: 100.0,
),
),
),
),
);
}
}
This is the best way I found and use it always. You can try it.
Wrap your Widget with InkWell
Wrap InkWell with Material
Set the opacity 0% anyhow. e.g.: color: Colors.white.withOpacity(0.0),
Material(
color: Colors.white.withOpacity(0.0),
child: InkWell(
child: Container(width: 100, height: 100),
onTap: (){print("Wow! Ripple");},
),
)
This is working for me:
Material(
color: Colors.white.withOpacity(0.0),
child: InkWell(
splashColor: Colors.orange,
child: Text('Hello'), // actually here it's a Container wrapping an image
onTap: () {
print('Click');
},
));
After trying many answers here, it was a combination of:
Setting splashColor
Wrapping InkWell in Material(color: Colors.white.withOpacity(0.0), ..)
Thanks to the answers here that make those 2 points
child: Material(
color: Colors.transparent
child: InkWell(
onTap: (){ print("this Ripple!";},
splashColor: Colors.greenAccent,
child: Container(
height:100.0,
color: Colors.white,
),
),
),
Add Material before InkWell and set color to Colors.transparent.
I ran into this same problem trying to create an alternating color of InkWell's in a ListView. In that particular case, there's a simple solution: wrap the alternates in a Container that uses a mostly transparent tint/brightness change -- the InkWell touch animation will still be visible beneath it. No Material needed. Note there are other issues when trying to work around this with a Materal -- e.g., it will override a DefaultTextStyle you're using with the default (it installs an AnimatedDefaultTextStyle) which is a huge pain.
After you added onTap:(){} listener, ripple effect should work fine. It doesn't work if you use BoxShadow() with in the InkWell() widget.
I was able to make my situation work by using a Stack.
Stack(
children: [
MyCustomWidget(), // <--- Put this on bottom
Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Ink(
width: 100,
height: 100,
),
),
),
],
),
The reason that the other answers on this page weren't working for me is that my custom widget hid the ink effect and I didn't have a plain image (so I couldn't use Ink.image).
Edit:
You still may be able to use Ink.image if you convert the image to the right format.
now using MaterialButton, in newer version flutter
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: MaterialButton(
child: Text(
labelText,
style: TextStyle(fontSize: 22),
),
onPressed: () {},
color: backgroundColor,
height: 45,
minWidth: double.infinity,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(16),
),
),
),
);
}
For handling ripple effect you should use the below rules:
onTap shouldn't be null (or empty).
InkWell must be inside any of the Material Widgets
Single Line:
Use splashColor widget in an InkWell.
InkWell(
onTap: () {}, // Handle your onTap
splashColor: Colors.grey,
child: Container(
width: 200,
height: 200,
),
)
You might have set the properties in theme or parent of the material
ThemeData(
...
splashFactory: NoSplash.splashFactory,
...
)
if you don't want splash effect for specific use it explicitly
InkWell(
splashFactory: NoSplash.splashFactory,
...
child: Row(
...
)
);
Make sure you have not added the below properties in the material theme:
(In my case this was the issue)
splashColor: Colors.transparent
splashFactory: NoSplash.splashFactory
eg:-
MaterialApp(
home:......,
theme: ThemeData(
splashFactory: NoSplash.splashFactory, // Remove this
splashColor: AppColors.transparent, // Remove this OR Change the color
......
),
)
Create a widget that supports tap.
Wrap it in an InkWell widget to manage tap callbacks and ripple
animations.
that's point 2 mentioned in documentation
example:
InkWell(
child: TextButton(
onPressed: () {},
child: Text('Tapped'),
),
),
),
I was hit by a similar problem adding an Inkwell to an existing complex Widget with a Container wrapping a BoxDecoration with a color. By adding the Material and Inkwell in the way suggested the Inkwell was still obscured by the BoxDecoration so I just made the BoxDecoration's color slightly opaque which allowed the Inkwell to be seen
The solution to circular widgets, do like below:
Material(
color: Colors.transparent,
child: Container(
alignment: Alignment.center,
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
enableFeedback: true,
iconSize: 40,
icon: Icon(
Icons.skip_previous,
color: Colors.white,
size: 40,
),
onPressed: () {}),
IconButton(
iconSize: 100,
enableFeedback: true,
splashColor: Colors.grey,
icon: Icon(Icons.play_circle_filled, color: Colors.white, size: 100),
padding: EdgeInsets.all(0),
onPressed: () {},
),
IconButton(
enableFeedback: true,
iconSize: 40,
icon: Icon(
Icons.skip_next,
color: Colors.white,
size: 40,
),
onPressed: () {}),
],
),
),
)
For me it was another problem. InkWell was not showing ripple effect when i had onTap function as parameter of my widget defined as below.
Function(Result) onTapItem;
...
onTap: onTapItem(result),
I don't know what's the difference, but next code is working well.
onTap: (){ onTapItem(result); },
Adding transparent color to Material worked in my case:
child: new Material(
color: Colors.transparent
child: new InkWell(
onTap: (){},
child: new Container(
width: 100.0,
height: 100.0,
color: Colors.amber,
),
),
),
Instead of providing the color for the Container widget, provide color for the Material widget.
Material(
color: Colors.orange,
child: InkWell(
onTap: () {
print("tapped");
},
child: Container(
width: 100.0,
height: 100.0,
),
),
)