Search code examples
fluttermaterial-designfloating-action-buttonflutter-animation

I need to reproduce in Flutter a Floating Action Button that can transform into a new surface that spans the entire screen

I need to reproduce the effect of a FAB that expands on a full screen page like the one proposed by Google in this video, but I have no idea how to do it. Do you have any suggestions?

Solution

  • See the animations library.

    According to the Readme:

    The packagecontains pre-canned animations for commonly-desired effects. The animations can be customized with your content and dropped into your application to delight your users.

    The animation being used here is an OpenContainer. Example code:

    OpenContainer(
      transitionDuration: 500.milliseconds,
      closedBuilder: (BuildContext c, VoidCallback action) => FloatingActionButton(icon: Icon(Icons.add)),
      openBuilder: (BuildContext c, VoidCallback action) => SomeNewPage(),
      tappable: true,
    )

    Example tutorial to get you started:

    Flutter: The new 'animations' package explained

    It doesn't even have to be an floating action button. The widgets in the closed and open builder can be any widget you like.