Related
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.
im trying to place the inner grey Button inside the red Button, but cant find a way to align it to the left side of the red button.
Excuse my bad code, im new to flutter.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: MainApp(),
));
class MainApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.fromLTRB(50, 100, 50, 0),
child: SizedBox(
child: ButtonTheme(
height: 70,
child: FlatButton(
child: SizedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ButtonTheme(
height: 70,
child: FlatButton(
child: Text(""),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Colors.grey,
),
),
],
),
),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Colors.red,
),
),
),
),
);
}
}
This is what im getting, and im trying to get rid of the red space on the left side of the innner Button.
Like others have pointed out, we are not sure of your motivation for having a button inside of a button.... however, if you actually need this for some reason, here is the solution:
SizedBox(
child: ButtonTheme(
height: 70,
child: FlatButton(
padding: EdgeInsets.zero, // ADD THIS LINE
child: SizedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ButtonTheme(
height: 70,
child: FlatButton(
child: Text(""),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Colors.grey,
),
),
],
),
),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(13.0),
),
onPressed: () {},
color: Colors.red,
),
),
);
Basically, FlatButton() has a padding parameter, which is used to control this spacing that you are referring to, as well as the 0-width space above and below the grey button and the equivalent space on the right side of the button. Passing in EdgeInsets.zero makes sure there is no padding on any interior side of the button.
Hope this helps
I have a ListTile in flutter but I cannot seem to figure out how to make the splash/ripple effect fit the border. My border is rounded, but the splash is just a normal rectangle with no round borders, as seen on the image below.
ListTile
Below is the code for the ListTile.
Ink(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
),
child: ListTile(
title: text(title, 0.0),
leading: Icon(
icon,
color: primaryColor,
),
)
)
You can use InkWell:
InkWell(
customBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
onTap: () {},
splashColor: Colors.red,
child: ListTile(
title: Text("Title"),
),
),
Surround Ink or InkWell with ClipRRect with border-radius value equal to
BorderRadius.all(Radius.circular(borderRadius))
Better, replace Ink with InkWell and set borderRadius: BorderRadius.all(Radius.circular(borderRadius)) which won't need clipping.
thus you can write
InkWell(
borderRadius: BorderRadius.circular(borderRadius),
onTap: () {},
splashColor: Colors.red,
child: ListTile(
title: Text("Title"),
),
),
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 have a PopupMenuButton inside a FloatingActionButton. But it's InkWell is not rounded, it is standard square shape. How can I achieve that?
Use customBorder property of InkWell:
InkWell(
customBorder: CircleBorder(),
onTap: () {}
child: ...
)
You can use borderRadius property of InkWell to get a rounded Ink Splash.
Material(
color: Colors.lightBlue,
borderRadius: BorderRadius.circular(25.0),
child: InkWell(
splashColor: Colors.blue,
borderRadius: BorderRadius.circular(25.0),
child: Text('Button'),
),
),
To change the InkWell's shape to rounded from standard square shape, Material's borderRadius property is used. Example code is given below -
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.green,
child: Material(
color: Colors.yellow,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: InkWell(
child: PopupMenuButton(
//shape is used to change the shape of popup card
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
child: Icon(Icons.mode_edit, size: 22.0, color: Colors.red,),
itemBuilder: (context) => [
PopupMenuItem(
child: Text("Child 1"),
),
PopupMenuItem(
child: Text("Child 2"),
),
],
),
),
),
),
I faced a similar issue where the child of the PopupMenuButton would have a square InkWell around it.
In order to make it behave like an IconButton, which naturally uses the rounded InkWell, I simply had to use the icon paramater instead of the child.
icon: Icon(Icons.more_vert),
This is indicated in the documentation for that paramater:
/// If provided, the [icon] is used for this button
/// and the button will behave like an [IconButton].
final Widget icon;
Wrap the Inkwell with Material. Add Border Radius
Material(
borderRadius: BorderRadius.all( // add
Radius.circular(20)
),
child: InkWell(
child: Ink(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Text(
"Kayıt Ol",
style: TextStyle(
color: cKutuRengi,
),
),
),
),
)
Here's how to make the tap effect look right
Material(
borderRadius: BorderRadius.all(
Radius.circular(20)
),
child: InkWell(
customBorder:RoundedRectangleBorder( // add
borderRadius: BorderRadius.all(
Radius.circular(20)
)
),
onTap: () {
debugPrint("on tap");
},
child: Ink(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Text(
"Kayıt Ol",
style: TextStyle(
color: cKutuRengi,
),
),
),
),
)
Most of the answers here are not using PopupMenuButton like the question specified. If you're simply using an icon child then you can use the icon property rather than child as already explained above, but if you want rounded corners on some other child, you wrap it with a Material, and wrap that with a ClipRRect See this Stackoverflow