Disable Scaffold FAB animation

Question

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.

If you read the [FloatingActionButton](https://docs.flutter.io/flutter/material/FloatingActionButton-class.html) 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 07:29
It is still using the scaling animation (floatingActionButtonAnimator) — S.D., Dec 27 '18 at 09:11

Saed Nabil · Accepted Answer · 2019-01-01T11:03:20.733

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;
    }
  }

you can implement any behavior you want by controlling the three methods, check the added portion to the answer. — Saed Nabil, Jan 01 '19 at 11:05
what about changing duration of the movement(slowly shifting)? @SaedNabil — Khamidjon Khamidov, Jan 14 '22 at 12:50
@KhamidjonKhamidov you can not control this duration as per design the duration is constant `const Duration kFloatingActionButtonSegue = Duration(milliseconds: 200)' — Saed Nabil, Jan 18 '22 at 00:31

score 6 · Answer 2 · answered Dec 27 '18 at 07:28

6

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 07:28

dshukertjr

15,244
11
57
94

I tried it but it doesn't work, added a full code demo as an example – S.D. Dec 27 '18 at 09:38
why inside of a column? – blaneyneil Dec 30 '18 at 07:22
2

you can use `heroTag: null` as well. – Darshan May 19 '21 at 13:23

Disable Scaffold FAB animation

2 Answers2

Linked