Mixing
Disable Scaffold FAB animation
0
By default, the Scaffold in Flutter animates the floating action button (FAB) when changing a FAB while the app is running.
How can I disable this animation?
The documentation references the FloatingActionButtonAnimator.scaling animation which scales the button when it changes:
/// Animator to move the [floatingActionButton] to a new
[floatingActionButtonLocation]. /// /// If null, the
[ScaffoldState] will use the default animator,
[FloatingActionButtonAnimator.scaling]. final
FloatingActionButtonAnimator floatingActionButtonAnimator;
However, there is no indication on how to disable the scaling animation completely.
Full example code with the issue:
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Timer _timer;
bool showFirst = true;
@override
void initState() {
_timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
setState(() {
showFirst = !showFirst;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButtonLocation: showFirst
? FloatingActionButtonLocation.centerDocked
: FloatingActionButtonLocation.endDocked,
floatingActionButton: Padding(
padding: EdgeInsets.only(top: 100.0),
child: Column(
children: <Widget>[
Text('Floating Action Button Title'),
showFirst
? FloatingActionButton.extended(
heroTag: 'unique',
icon: Icon(Icons.filter_1),
label: Text('First FAB'),
onPressed: () {},
)
: FloatingActionButton.extended(
heroTag: 'unique2',
icon: Icon(Icons.filter_2),
label: Text('Second FAB'),
onPressed: () {},
),
],
),
),
);
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
}
Adding a different hero tag to each FAB doesn't affect the animation.
flutter asked Dec 27 '18 at 7:20
S.D.S.D.
216113
add a comment |
0
By default, the Scaffold in Flutter animates the floating action button (FAB) when changing a FAB while the app is running.
How can I disable this animation?
The documentation references the FloatingActionButtonAnimator.scaling animation which scales the button when it changes:
/// Animator to move the [floatingActionButton] to a new
[floatingActionButtonLocation]. /// /// If null, the
[ScaffoldState] will use the default animator,
[FloatingActionButtonAnimator.scaling]. final
FloatingActionButtonAnimator floatingActionButtonAnimator;
However, there is no indication on how to disable the scaling animation completely.
Full example code with the issue:
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Timer _timer;
bool showFirst = true;
@override
void initState() {
_timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
setState(() {
showFirst = !showFirst;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButtonLocation: showFirst
? FloatingActionButtonLocation.centerDocked
: FloatingActionButtonLocation.endDocked,
floatingActionButton: Padding(
padding: EdgeInsets.only(top: 100.0),
child: Column(
children: <Widget>[
Text('Floating Action Button Title'),
showFirst
? FloatingActionButton.extended(
heroTag: 'unique',
icon: Icon(Icons.filter_1),
label: Text('First FAB'),
onPressed: () {},
)
: FloatingActionButton.extended(
heroTag: 'unique2',
icon: Icon(Icons.filter_2),
label: Text('Second FAB'),
onPressed: () {},
),
],
),
),
);
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
}
Adding a different hero tag to each FAB doesn't affect the animation.
flutter asked Dec 27 '18 at 7:20
S.D.S.D.
216113
If you read the FloatingActionButton docs. You'll see that its heroTag parameter has a default value of const _DefaultHeroTag(). You can try to change this to disable the Hero Animation.
– Jerome Escalante
Dec 27 '18 at 7:29
It is still using the scaling animation (floatingActionButtonAnimator)
– S.D.
Dec 27 '18 at 9:11
add a comment |
0
0
0
By default, the Scaffold in Flutter animates the floating action button (FAB) when changing a FAB while the app is running.
How can I disable this animation?
The documentation references the FloatingActionButtonAnimator.scaling animation which scales the button when it changes:
/// Animator to move the [floatingActionButton] to a new
[floatingActionButtonLocation]. /// /// If null, the
[ScaffoldState] will use the default animator,
[FloatingActionButtonAnimator.scaling]. final
FloatingActionButtonAnimator floatingActionButtonAnimator;
However, there is no indication on how to disable the scaling animation completely.
Full example code with the issue:
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Timer _timer;
bool showFirst = true;
@override
void initState() {
_timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
setState(() {
showFirst = !showFirst;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButtonLocation: showFirst
? FloatingActionButtonLocation.centerDocked
: FloatingActionButtonLocation.endDocked,
floatingActionButton: Padding(
padding: EdgeInsets.only(top: 100.0),
child: Column(
children: <Widget>[
Text('Floating Action Button Title'),
showFirst
? FloatingActionButton.extended(
heroTag: 'unique',
icon: Icon(Icons.filter_1),
label: Text('First FAB'),
onPressed: () {},
)
: FloatingActionButton.extended(
heroTag: 'unique2',
icon: Icon(Icons.filter_2),
label: Text('Second FAB'),
onPressed: () {},
),
],
),
),
);
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
}
Adding a different hero tag to each FAB doesn't affect the animation.
flutter asked Dec 27 '18 at 7:20
S.D.S.D.
216113
By default, the Scaffold in Flutter animates the floating action button (FAB) when changing a FAB while the app is running.
How can I disable this animation?
The documentation references the FloatingActionButtonAnimator.scaling animation which scales the button when it changes:
/// Animator to move the [floatingActionButton] to a new
[floatingActionButtonLocation]. /// /// If null, the
[ScaffoldState] will use the default animator,
[FloatingActionButtonAnimator.scaling]. final
FloatingActionButtonAnimator floatingActionButtonAnimator;
However, there is no indication on how to disable the scaling animation completely.
Full example code with the issue:
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Timer _timer;
bool showFirst = true;
@override
void initState() {
_timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
setState(() {
showFirst = !showFirst;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButtonLocation: showFirst
? FloatingActionButtonLocation.centerDocked
: FloatingActionButtonLocation.endDocked,
floatingActionButton: Padding(
padding: EdgeInsets.only(top: 100.0),
child: Column(
children: <Widget>[
Text('Floating Action Button Title'),
showFirst
? FloatingActionButton.extended(
heroTag: 'unique',
icon: Icon(Icons.filter_1),
label: Text('First FAB'),
onPressed: () {},
)
: FloatingActionButton.extended(
heroTag: 'unique2',
icon: Icon(Icons.filter_2),
label: Text('Second FAB'),
onPressed: () {},
),
],
),
),
);
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
}
Adding a different hero tag to each FAB doesn't affect the animation.
flutter flutter asked Dec 27 '18 at 7:20
S.D.S.D.
216113
asked Dec 27 '18 at 7:20
S.D.S.D.
216113
edited Dec 27 '18 at 10:07
S.D.
asked Dec 27 '18 at 7:20
S.D.S.D.
216113
asked Dec 27 '18 at 7:20
S.D.S.D.
216113
asked Dec 27 '18 at 7:20
S.D.S.D.
216113
216113
If you read the FloatingActionButton docs. You'll see that its heroTag parameter has a default value of const _DefaultHeroTag(). You can try to change this to disable the Hero Animation.
– Jerome Escalante
Dec 27 '18 at 7:29
It is still using the scaling animation (floatingActionButtonAnimator)
– S.D.
Dec 27 '18 at 9:11
add a comment |
If you read the FloatingActionButton docs. You'll see that its heroTag parameter has a default value of const _DefaultHeroTag(). You can try to change this to disable the Hero Animation.
– Jerome Escalante
Dec 27 '18 at 7:29
It is still using the scaling animation (floatingActionButtonAnimator)
– S.D.
Dec 27 '18 at 9:11
If you read the FloatingActionButton docs. You'll see that its heroTag parameter has a default value of const _DefaultHeroTag(). You can try to change this to disable the Hero Animation.
– Jerome Escalante
Dec 27 '18 at 7:29
If you read the FloatingActionButton docs. You'll see that its heroTag parameter has a default value of const _DefaultHeroTag(). You can try to change this to disable the Hero Animation.
– Jerome Escalante
Dec 27 '18 at 7:29
It is still using the scaling animation (floatingActionButtonAnimator)
– S.D.
Dec 27 '18 at 9:11
It is still using the scaling animation (floatingActionButtonAnimator)
– S.D.
Dec 27 '18 at 9:11
add a comment |
2 Answers
2
active
oldest
votes
3
+50
You need to extend FloatingActionButtonAnimator and override its methods, check the following code,
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Timer _timer;
bool showFirst = true;
@override
void initState() {
_timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
setState(() {
showFirst = !showFirst;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButtonAnimator: NoScalingAnimation(),
floatingActionButtonLocation: showFirst
? FloatingActionButtonLocation.centerDocked
: FloatingActionButtonLocation.endDocked,
floatingActionButton: Padding(
padding: EdgeInsets.only(top: 100.0),
child: Column(
children: <Widget>[
Text('Floating Action Button Title'),
showFirst
? FloatingActionButton.extended(
heroTag: 'unique',
icon: Icon(Icons.filter_1),
label: Text('First FAB'),
onPressed: () {},
)
: FloatingActionButton.extended(
heroTag: 'unique2',
icon: Icon(Icons.filter_2),
label: Text('Second FAB'),
onPressed: () {},
),
],
),
),
);
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
}
class NoScalingAnimation extends FloatingActionButtonAnimator{
double _x;
double _y;
@override
Offset getOffset({Offset begin, Offset end, double progress}) {
_x = begin.dx +(end.dx - begin.dx)*progress ;
_y = begin.dy +(end.dy - begin.dy)*progress;
return Offset(_x,_y);
}
@override
Animation<double> getRotationAnimation({Animation<double> parent}) {
return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
}
@override
Animation<double> getScaleAnimation({Animation<double> parent}) {
return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
}
}
You can control the animation behavior by changing what every method returns. for ex. you can make the fab jump from left to right without animation, by changing getOffset method to be
@override
Offset getOffset({Offset begin, Offset end, double progress}) {
if (progress == 1.0){
return end;
}else{
return begin;
}
}
answered Dec 30 '18 at 18:00
Saed NabilSaed Nabil
1,27329
Is it possible to stop it shifting left to right as well?
– S.D.
Jan 1 at 4:32
1
you can implement any behavior you want by controlling the three methods, check the added portion to the answer.
– Saed Nabil
Jan 1 at 11:05
add a comment |
0
floatingActionButtons in Flutter have property named heroTag, and every floatingActionButtons have the same default value for it. Giving each floatingActionButtons unique heroTag will prevent the animation from happening.
Scaffold(
floatingActionButton: FloatingActionButton(
heroTag: "somethingUnique",
onPressed: () {},
child: Icon(Icons.add,),
),
body: Container(),
)
answered Dec 27 '18 at 7:28
dshukertjrdshukertjr
1,9101829
I tried it but it doesn't work, added a full code demo as an example
– S.D.
Dec 27 '18 at 9:38
why inside of a column?
– blaneyneil
Dec 30 '18 at 7:22
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53941252%2fdisable-scaffold-fab-animation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
+50
You need to extend FloatingActionButtonAnimator and override its methods, check the following code,
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Timer _timer;
bool showFirst = true;
@override
void initState() {
_timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
setState(() {
showFirst = !showFirst;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButtonAnimator: NoScalingAnimation(),
floatingActionButtonLocation: showFirst
? FloatingActionButtonLocation.centerDocked
: FloatingActionButtonLocation.endDocked,
floatingActionButton: Padding(
padding: EdgeInsets.only(top: 100.0),
child: Column(
children: <Widget>[
Text('Floating Action Button Title'),
showFirst
? FloatingActionButton.extended(
heroTag: 'unique',
icon: Icon(Icons.filter_1),
label: Text('First FAB'),
onPressed: () {},
)
: FloatingActionButton.extended(
heroTag: 'unique2',
icon: Icon(Icons.filter_2),
label: Text('Second FAB'),
onPressed: () {},
),
],
),
),
);
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
}
class NoScalingAnimation extends FloatingActionButtonAnimator{
double _x;
double _y;
@override
Offset getOffset({Offset begin, Offset end, double progress}) {
_x = begin.dx +(end.dx - begin.dx)*progress ;
_y = begin.dy +(end.dy - begin.dy)*progress;
return Offset(_x,_y);
}
@override
Animation<double> getRotationAnimation({Animation<double> parent}) {
return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
}
@override
Animation<double> getScaleAnimation({Animation<double> parent}) {
return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
}
}
You can control the animation behavior by changing what every method returns. for ex. you can make the fab jump from left to right without animation, by changing getOffset method to be
@override
Offset getOffset({Offset begin, Offset end, double progress}) {
if (progress == 1.0){
return end;
}else{
return begin;
}
}
answered Dec 30 '18 at 18:00
Saed NabilSaed Nabil
1,27329
Is it possible to stop it shifting left to right as well?
– S.D.
Jan 1 at 4:32
1
you can implement any behavior you want by controlling the three methods, check the added portion to the answer.
– Saed Nabil
Jan 1 at 11:05
add a comment |
3
+50
You need to extend FloatingActionButtonAnimator and override its methods, check the following code,
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Timer _timer;
bool showFirst = true;
@override
void initState() {
_timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
setState(() {
showFirst = !showFirst;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButtonAnimator: NoScalingAnimation(),
floatingActionButtonLocation: showFirst
? FloatingActionButtonLocation.centerDocked
: FloatingActionButtonLocation.endDocked,
floatingActionButton: Padding(
padding: EdgeInsets.only(top: 100.0),
child: Column(
children: <Widget>[
Text('Floating Action Button Title'),
showFirst
? FloatingActionButton.extended(
heroTag: 'unique',
icon: Icon(Icons.filter_1),
label: Text('First FAB'),
onPressed: () {},
)
: FloatingActionButton.extended(
heroTag: 'unique2',
icon: Icon(Icons.filter_2),
label: Text('Second FAB'),
onPressed: () {},
),
],
),
),
);
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
}
class NoScalingAnimation extends FloatingActionButtonAnimator{
double _x;
double _y;
@override
Offset getOffset({Offset begin, Offset end, double progress}) {
_x = begin.dx +(end.dx - begin.dx)*progress ;
_y = begin.dy +(end.dy - begin.dy)*progress;
return Offset(_x,_y);
}
@override
Animation<double> getRotationAnimation({Animation<double> parent}) {
return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
}
@override
Animation<double> getScaleAnimation({Animation<double> parent}) {
return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
}
}
You can control the animation behavior by changing what every method returns. for ex. you can make the fab jump from left to right without animation, by changing getOffset method to be
@override
Offset getOffset({Offset begin, Offset end, double progress}) {
if (progress == 1.0){
return end;
}else{
return begin;
}
}
answered Dec 30 '18 at 18:00
Saed NabilSaed Nabil
1,27329
Is it possible to stop it shifting left to right as well?
– S.D.
Jan 1 at 4:32
1
you can implement any behavior you want by controlling the three methods, check the added portion to the answer.
– Saed Nabil
Jan 1 at 11:05
add a comment |
3
+50
3
+50
3
+50
You need to extend FloatingActionButtonAnimator and override its methods, check the following code,
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Timer _timer;
bool showFirst = true;
@override
void initState() {
_timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
setState(() {
showFirst = !showFirst;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButtonAnimator: NoScalingAnimation(),
floatingActionButtonLocation: showFirst
? FloatingActionButtonLocation.centerDocked
: FloatingActionButtonLocation.endDocked,
floatingActionButton: Padding(
padding: EdgeInsets.only(top: 100.0),
child: Column(
children: <Widget>[
Text('Floating Action Button Title'),
showFirst
? FloatingActionButton.extended(
heroTag: 'unique',
icon: Icon(Icons.filter_1),
label: Text('First FAB'),
onPressed: () {},
)
: FloatingActionButton.extended(
heroTag: 'unique2',
icon: Icon(Icons.filter_2),
label: Text('Second FAB'),
onPressed: () {},
),
],
),
),
);
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
}
class NoScalingAnimation extends FloatingActionButtonAnimator{
double _x;
double _y;
@override
Offset getOffset({Offset begin, Offset end, double progress}) {
_x = begin.dx +(end.dx - begin.dx)*progress ;
_y = begin.dy +(end.dy - begin.dy)*progress;
return Offset(_x,_y);
}
@override
Animation<double> getRotationAnimation({Animation<double> parent}) {
return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
}
@override
Animation<double> getScaleAnimation({Animation<double> parent}) {
return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
}
}
You can control the animation behavior by changing what every method returns. for ex. you can make the fab jump from left to right without animation, by changing getOffset method to be
@override
Offset getOffset({Offset begin, Offset end, double progress}) {
if (progress == 1.0){
return end;
}else{
return begin;
}
}
answered Dec 30 '18 at 18:00
Saed NabilSaed Nabil
1,27329
You need to extend FloatingActionButtonAnimator and override its methods, check the following code,
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Timer _timer;
bool showFirst = true;
@override
void initState() {
_timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
setState(() {
showFirst = !showFirst;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButtonAnimator: NoScalingAnimation(),
floatingActionButtonLocation: showFirst
? FloatingActionButtonLocation.centerDocked
: FloatingActionButtonLocation.endDocked,
floatingActionButton: Padding(
padding: EdgeInsets.only(top: 100.0),
child: Column(
children: <Widget>[
Text('Floating Action Button Title'),
showFirst
? FloatingActionButton.extended(
heroTag: 'unique',
icon: Icon(Icons.filter_1),
label: Text('First FAB'),
onPressed: () {},
)
: FloatingActionButton.extended(
heroTag: 'unique2',
icon: Icon(Icons.filter_2),
label: Text('Second FAB'),
onPressed: () {},
),
],
),
),
);
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
}
class NoScalingAnimation extends FloatingActionButtonAnimator{
double _x;
double _y;
@override
Offset getOffset({Offset begin, Offset end, double progress}) {
_x = begin.dx +(end.dx - begin.dx)*progress ;
_y = begin.dy +(end.dy - begin.dy)*progress;
return Offset(_x,_y);
}
@override
Animation<double> getRotationAnimation({Animation<double> parent}) {
return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
}
@override
Animation<double> getScaleAnimation({Animation<double> parent}) {
return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
}
}
You can control the animation behavior by changing what every method returns. for ex. you can make the fab jump from left to right without animation, by changing getOffset method to be
@override
Offset getOffset({Offset begin, Offset end, double progress}) {
if (progress == 1.0){
return end;
}else{
return begin;
}
}
answered Dec 30 '18 at 18:00
Saed NabilSaed Nabil
1,27329
edited Jan 1 at 11:03
answered Dec 30 '18 at 18:00
Saed NabilSaed Nabil
1,27329
answered Dec 30 '18 at 18:00
Saed NabilSaed Nabil
1,27329
answered Dec 30 '18 at 18:00
Saed NabilSaed Nabil
1,27329
1,27329
Is it possible to stop it shifting left to right as well?
– S.D.
Jan 1 at 4:32
1
you can implement any behavior you want by controlling the three methods, check the added portion to the answer.
– Saed Nabil
Jan 1 at 11:05
add a comment |
Is it possible to stop it shifting left to right as well?
– S.D.
Jan 1 at 4:32
1
you can implement any behavior you want by controlling the three methods, check the added portion to the answer.
– Saed Nabil
Jan 1 at 11:05
Is it possible to stop it shifting left to right as well?
– S.D.
Jan 1 at 4:32
Is it possible to stop it shifting left to right as well?
– S.D.
Jan 1 at 4:32
1
1
you can implement any behavior you want by controlling the three methods, check the added portion to the answer.
– Saed Nabil
Jan 1 at 11:05
you can implement any behavior you want by controlling the three methods, check the added portion to the answer.
– Saed Nabil
Jan 1 at 11:05
add a comment |
0
floatingActionButtons in Flutter have property named heroTag, and every floatingActionButtons have the same default value for it. Giving each floatingActionButtons unique heroTag will prevent the animation from happening.
Scaffold(
floatingActionButton: FloatingActionButton(
heroTag: "somethingUnique",
onPressed: () {},
child: Icon(Icons.add,),
),
body: Container(),
)
answered Dec 27 '18 at 7:28
dshukertjrdshukertjr
1,9101829
I tried it but it doesn't work, added a full code demo as an example
– S.D.
Dec 27 '18 at 9:38
why inside of a column?
– blaneyneil
Dec 30 '18 at 7:22
add a comment |
0
floatingActionButtons in Flutter have property named heroTag, and every floatingActionButtons have the same default value for it. Giving each floatingActionButtons unique heroTag will prevent the animation from happening.
Scaffold(
floatingActionButton: FloatingActionButton(
heroTag: "somethingUnique",
onPressed: () {},
child: Icon(Icons.add,),
),
body: Container(),
)
answered Dec 27 '18 at 7:28
dshukertjrdshukertjr
1,9101829
I tried it but it doesn't work, added a full code demo as an example
– S.D.
Dec 27 '18 at 9:38
why inside of a column?
– blaneyneil
Dec 30 '18 at 7:22
add a comment |
0
0
0
floatingActionButtons in Flutter have property named heroTag, and every floatingActionButtons have the same default value for it. Giving each floatingActionButtons unique heroTag will prevent the animation from happening.
Scaffold(
floatingActionButton: FloatingActionButton(
heroTag: "somethingUnique",
onPressed: () {},
child: Icon(Icons.add,),
),
body: Container(),
)
answered Dec 27 '18 at 7:28
dshukertjrdshukertjr
1,9101829
floatingActionButtons in Flutter have property named heroTag, and every floatingActionButtons have the same default value for it. Giving each floatingActionButtons unique heroTag will prevent the animation from happening.
Scaffold(
floatingActionButton: FloatingActionButton(
heroTag: "somethingUnique",
onPressed: () {},
child: Icon(Icons.add,),
),
body: Container(),
)
answered Dec 27 '18 at 7:28
dshukertjrdshukertjr
1,9101829
answered Dec 27 '18 at 7:28
dshukertjrdshukertjr
1,9101829
answered Dec 27 '18 at 7:28
dshukertjrdshukertjr
1,9101829
answered Dec 27 '18 at 7:28
dshukertjrdshukertjr
1,9101829
1,9101829
I tried it but it doesn't work, added a full code demo as an example
– S.D.
Dec 27 '18 at 9:38
why inside of a column?
– blaneyneil
Dec 30 '18 at 7:22
add a comment |
I tried it but it doesn't work, added a full code demo as an example
– S.D.
Dec 27 '18 at 9:38
why inside of a column?
– blaneyneil
Dec 30 '18 at 7:22
I tried it but it doesn't work, added a full code demo as an example
– S.D.
Dec 27 '18 at 9:38
I tried it but it doesn't work, added a full code demo as an example
– S.D.
Dec 27 '18 at 9:38
why inside of a column?
– blaneyneil
Dec 30 '18 at 7:22
why inside of a column?
– blaneyneil
Dec 30 '18 at 7:22
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53941252%2fdisable-scaffold-fab-animation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If you read the FloatingActionButton docs. You'll see that its heroTag parameter has a default value of const _DefaultHeroTag(). You can try to change this to disable the Hero Animation.
– Jerome Escalante
Dec 27 '18 at 7:29
It is still using the scaling animation (floatingActionButtonAnimator)
– S.D.
Dec 27 '18 at 9:11