I have a problem where If I wrap my FABs placed a the end of a BottomNavigationBar in a Column, It changes their positions. I don't want to wrap it in a stack because than it is unclickable, I tried various ways to fix that, but none of them worked.
FAB 1:
Widget add(){
return new FloatingActionButton(
onPressed: (){Navigator.push(context, new MaterialPageRoute(builder: (context) => HomePage()));},
heroTag: 'btnAdd',
child: new Icon(Icons.add),
backgroundColor: Colors.blue,
elevation: 0.0,
splashColor: Colors.redAccent,
);
}
FAB 2:
Widget floatMain(){
return new FloatingActionButton(
heroTag: 'btnMain',
child: new AnimatedIcon(
icon: AnimatedIcons.menu_close,
progress: _animateIcon,
),
tooltip: 'floatMain',
onPressed: animate,
backgroundColor: _buttonColor.value,
);
}
FAB Call:
floatingActionButton: new Container(
child: new Stack(
children: <Widget>[
new Container(
child: new Transform(
transform: Matrix4.translationValues(0.0, _translateButton.value - 56, 0.0),
child: add(),
),
),
floatMain(),
],
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked
So, if I wrap it in a Stack it works, but it doesn't work with a Column.
If you need only FAB button buttom right align. Inside column
Try it.
Expanded(
child: Align(
alignment:FractionalOffset.bottomRight,
child: Padding(
padding: EdgeInsets.only(bottom: 10.0),
child: floatMain()//Your FAB widget here,
),
),
),
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.
I am developing an app with Flutter, and I want to have 2 FABs on the main screen. One in the BottomAppBar which I have done.
Scaffold(
appBard: AppBar(title: Text("My App")),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: ()=>{}
),
bottomNavigationBar: BottomAppBar(
color: Style.darkPrimaryColor,
shape: CircularNotchedRectangle(),
child: Container(
height: 50,
child: Row(
children: <Widget>[]
),
),
),
)
I want to have a second FAB positioned and fixed in the right bottom side of the screen in plus of the centered FAB like the following maquette:
Is there any way to achieve that?
I don't think there is any built in way of doing this with the scaffold, but it should be easy enough to just use a stack as your scaffold body, since you can add a floating action button anywhere. However, if you have two, you will need to change the hero tag on one of them to avoid errors when moving to/from that page.
Scaffold(
appBar: AppBar(title: Text("My App")),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: ()=>{}
),
bottomNavigationBar: BottomAppBar(
color: Style.darkPrimaryColor,
shape: CircularNotchedRectangle(),
child: Container(
height: 50,
child: Row(
children: <Widget>[]
),
),
),
body: Stack(
alignment: Alignment.bottomRight,
children: [
Container(
child: //Use this as if it were the body
),
//Setup the position however you like
Padding(
padding: const EdgeInsets.all(16.0),
child: FloatingActionButton(
heroTag: null, //Must be null to avoid hero animation errors
child: Icon(Icons.add),
onPressed: () => {},
),
),
],
),
)
Try this:
Scaffold(
appBar: AppBar(title: Text("My App")),
body: Stack(
children: [
Positioned(
bottom: 16,
right: 16,
child: FloatingActionButton(
heroTag: null,
child: Icon(Icons.add),
onPressed: ()=>{}
),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: ()=>{}
),
bottomNavigationBar: BottomAppBar(
color: Colors.black54,
shape: CircularNotchedRectangle(),
child: Container(
height: 50,
child: Row(
children: <Widget>[
]
),
),
),
)
In my application I have defined a FAB with the property floatingActionButtonLocation set to FloatingActionButtonLocation.centerDocked. I have defined a bottom app bar that holds the centerDocked FAB. I also want to use a Stack widget to position two additional FABs on the top right of the screen. It should look something similar to this - expected result
But when I tried to use a Stack, the FAB which is present in the bottom app bar is displayed but the two FABs under the stack widget are invisible.
docked FAB
FABs under stack widget
code where I have defined the Stack
return new Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Stack(
children: <Widget>[
Positioned(
// the below values for stack are experimental at the moment
left: MediaQuery.of(context).copyWith().size.width * 0.60,
right: MediaQuery.of(context).copyWith().size.width * 0.01,
// top: MediaQuery.of(context).copyWith().size.height * 0.20,
// bottom: MediaQuery.of(context).copyWith().size.height * 0.7,
child: Row(
children: <Widget>[
// invisible FABs
FloatingActionButton(
onPressed: (){
_animate2Pagenegative();
// print(widget.date);
},
child: Icon(Icons.fast_rewind),
heroTag: UniqueKey(),
),
FloatingActionButton(
onPressed: (){
_animate2Pageforward();
// print(widget.date);
},
heroTag: UniqueKey(),
child: Icon(Icons.fast_forward),
),
],
),
),
// FAB which is displayed correctly
FloatingActionButton(
backgroundColor: Colors.red,
onPressed: () async{
String result1 = await Navigator.push( // string which stores the user entered value
context,
MaterialPageRoute(
builder: (context) => InputScreen(), //screen which has TextField
));
setState(() {
addItem(result1, false, "");
});
},
tooltip: 'Add a task',
child: Icon(Icons.add),
elevation: 0.0,
),
],
),
)
body of Scaffold:
body: new Column(
children: <Widget>[
new Expanded(
child: new DaysPageView(
// onDaysChanged: getDatestring,
physics: new NeverScrollableScrollPhysics(),
dayoverride: getDate(widget.date),
scrollDirection: _scrollDirection,
pageSnapping: _pageSnapping,
reverse: _reverse,
controller: _daysPageController,
pageBuilder: _daysPageBuilder,
),
),
],
),
You don't need other FloatingActionsButtons to do that design. What I understand is that you need the upper part not to scroll with the content hence you thought of FABs. There are multiple ways to achieve that. Here is an example, I'm using colors to show you the different parts of your screen. And of course these are random sizes to show the case.
return new Scaffold(
body: Column(
children: <Widget>[
Container(
height: 150,
color: Colors.red,
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 20, left: 20),
child: Text(
"- 2 TASKS MORE",
style: TextStyle(
fontSize: 35
),
),
),
GestureDetector(
onTap: () {
print('left arrow pressed');
},
child: Container(
margin: EdgeInsets.only(top: 20, left: 20),
child: Icon(Icons.arrow_left)
),
),
GestureDetector(
onTap: () {
print('right arrow pressed');
},
child: Container(
margin: EdgeInsets.only(top: 20, left: 20),
child: Icon(Icons.arrow_right)
),
)
],
),
SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget>[
Container(
height: 600,
color: Colors.deepPurpleAccent,
),
],
),
)
],
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
],
),
shape: CircularNotchedRectangle(),
color: Colors.red,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red,
onPressed: ()
async {
print('FAB pressed');
},
tooltip: 'Add a task',
child: Icon(Icons.add),
elevation: 0.0,
),
);
And here is the result
Let's say that I have this widget:
Card(
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(28.0),
child: RaisedButton(
child: Text('Test'),
onPressed: () {},
),
),
),
),
I would like to disable (prevent showing) ripple effect on Card/InkWell only when the RaisedButton is tapped, but to show it when the Card is tapped (i.e. outside the button). Is there any way to achieve this effect?
I think the generalized question can be: How to prevent ripple effect on surrounding InkWell when tapped on InkWell inside? If you take a look at the source code then you can see that RaisedButton has Material and InkWell widgets that cause ripple.
Here is the full sample code.
If you want a quick hack, check it out:
Container(
width: 180,
height: 120,
child: Stack(
children: <Widget>[
Card(
child: InkWell(
onTap: () {},
),
),
Center(
child: RaisedButton(
child: Text('Test'),
onPressed: () {},
),
)
],
),
)
You can handle the logic inside onHighlightChanged method;
Color _color;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Card(
child: InkWell(
splashColor: _color,
highlightColor: _color,
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(28.0),
child: RaisedButton(
onHighlightChanged: (value) {
if (value) {
setState(() => _color = Colors.white);
} else {
Timer(Duration(milliseconds: 200), () {
setState(() => _color = null);
});
}
},
child: Text('Test'),
onPressed: () {},
),
),
),
),
),
);
}
try this out https://dartpad.dev/7ff7f5756d93db2d4ed6a4b9a6d75208. I used hack with wrapping in InkWell the widget you want to surround with parent InkWell
Where am I supposed to place the material as the parent of the Raw material button so that it can respond to clicks and show splash color.
The widget tree looks like below.
Widget build(BuildContext context) {
return new Container(
child: new Center(
child: new Stack(
alignment: Alignment.center,
children: <Widget>[
new Container(
child: new Padding(
padding: const EdgeInsets.all(5.0),
child: new Container(
child: new AudioComponent(
updateMe: [WatchableAudioProperties.audioPlayerState],
playerBuilder: (BuildContext context, AudioPlayer
player,
Widget child) {
IconData icon = Icons.play_arrow;
return new RawMaterialButton(
shape: new CircleBorder(),
fillColor: Colors.white,
splashColor: lightAccentColor,
highlightColor: lightAccentColor.withOpacity(0.5),
elevation: 10.0,
highlightElevation: 5.0,
onPressed: (){},
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Icon(
icon,
color: accentColor,
size: 50.0,
),
),
);
},
),
),
),
),
new Container(
height: 151.0,
width: 151.0,
child: waves,
),
],
),
),
);
}
If I add another container onto the stack and put a similar RawMaterial button, it responds as required even without adding a material widget anywhere. What I don't understand why the RawButton in the first container in the stack is not working
How do you expect to have your RawMaterialButton react when you have the following code in it's definition?
onPressed: (){},