1

I am able to make quite a similar floating action button animation like Gmail app, but I am getting a little bit of margin when I isExpanded is false. Any solution?

Here is my code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isExpanded = false;

  Widget build(context) {
    return Scaffold(
        floatingActionButton: AnimatedContainer(
          width: isExpanded ? 150 : 56,
          height: 56,
          duration: Duration(milliseconds: 300),
          child: FloatingActionButton.extended(
            onPressed: () {},
            icon: Icon(Icons.ac_unit),
            label: isExpanded ? Text("Start chat") : SizedBox(),
          ),
        ),
        appBar: AppBar(),
        body: FlatButton(
            onPressed: () {
              setState(() {
                isExpanded = !isExpanded;
              });
            },
            child: Text('Press here to change FAB')));
  }
}
1

3 Answers 3

5

Looks like FloatingActionButton has some hardcoded padding set for an icon. To fix that, you could do the following:

FloatingActionButton.extended(
  onPressed: () {},
  icon: isExpanded ? Icon(Icons.ac_unit) : null,
  label: isExpanded ? Text("Start chat") : Icon(Icons.ac_unit),
)
0

If you want an animation then you have to write your own custom fab:

class ScrollingExpandableFab extends StatefulWidget {
  const ScrollingExpandableFab({
    Key? key,
    this.controller,
    required this.label,
    required this.icon,
    this.onPressed,
    this.scrollOffset = 50.0,
    this.animDuration = const Duration(milliseconds: 500),
  }) : super(key: key);

  final ScrollController? controller;

  final String label;

  final Widget icon;

  final VoidCallback? onPressed;

  final double scrollOffset;

  final Duration animDuration;

  @override
  State<ScrollingExpandableFab> createState() => _ScrollingExpandableFabState();
}

class _ScrollingExpandableFabState extends State<ScrollingExpandableFab>
    with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: widget.animDuration,
    vsync: this,
  );

  late final Animation<double> _anim = Tween<double>(begin: 0.0, end: 1.0)
      .animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));

  Color get _backgroundColor =>
      Theme.of(context).floatingActionButtonTheme.backgroundColor ??
      Theme.of(context).colorScheme.secondary;

  ScrollController? get _scrollController => widget.controller;

  _scrollListener() {
    final position = _scrollController!.position;
    if (position.pixels > widget.scrollOffset &&
        position.userScrollDirection == ScrollDirection.reverse) {
      _controller.forward();
    } else if (position.pixels <= widget.scrollOffset &&
        position.userScrollDirection == ScrollDirection.forward) {
      _controller.reverse();
    }
  }

  @override
  void initState() {
    super.initState();
    _scrollController?.addListener(_scrollListener);
  }

  @override
  void dispose() {
    _scrollController?.removeListener(_scrollListener);
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: const BoxConstraints.tightFor(height: 48.0),
      child: AnimatedBuilder(
        animation: _anim,
        builder: (context, child) => Material(
          elevation: 4.0,
          type: MaterialType.button,
          color: _backgroundColor,
          shape: const CircleBorder(),
          clipBehavior: Clip.antiAlias,
          child: InkWell(
            onTap: widget.onPressed,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  widget.icon,
                  ClipRect(
                    child: Align(
                      alignment: AlignmentDirectional.centerStart,
                      widthFactor: 1 - _anim.value,
                      child: Opacity(
                        opacity: 1 - _anim.value,
                        child: Padding(
                          padding: const EdgeInsets.only(left: 8.0),
                          child: SimpleclubText.button(widget.label),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
0

Please follow example below:

FloatingActionButton.extended(
        onPressed: () {
          setState(() {
            expanded = !expanded;
          });
        },
        backgroundColor: context.theme.colorScheme.secondary,
        label: expanded ? Text(t.addPlan) : Icon(Icons.add),
        icon: expanded ? Icon(Icons.add) : null,
        shape: expanded ? null : CircleBorder(),
      ),
    );

It's important that you don't set isExtended on the fab and you need to set CircleBorder when the fab is not expanded to make sure the fab still has a circular shape.

I hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.