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

user_9663687 0
Viewed 3727

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?

flutter-animation material-design flutter floating-action-button
2 Answers

A simpler way to do use Hero which is material widget (shipped with Flutter).

Flutters team have already built this for FloatingActionButton. You just need to

1.Give the FloatingActionButton an unique tag (identifier) from your current page.

Scaffold(
   floatingActionButton: FloatingActionButton(
    heroTag: 'newProduct',//replace with you tag
    child: Icon(Icons.add),
    onPressed: (){
     //Open the new page here
     })),

2.Into the new page, wrap the content you want to crossfade with Hero

Hero(
tag: "newProduct",
child: Scaffold(...))//Animate the whole page.

Note: You can't use two Heros with same key into the same page. Also note that, depending on your device speed, this animation could be invisible in debug mode but works well on release mode

user_87735600

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.

user_132692830
Related