flutter animate FAB between extended and normal type
This is my implementation using
AnimatedSwitcher
.
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 isIcon = false;
Widget _myWidget = FloatingActionButton(
key: UniqueKey(),
onPressed: () {},
child: Icon(Icons.message),
);
void _d() {
setState(() {
_myWidget = isIcon
? FloatingActionButton(
mini: true,
key: UniqueKey(),
onPressed: () {},
child: Icon(Icons.messsage),
)
: FloatingActionButton.extended(
key: UniqueKey(),
onPressed: () {},
icon: Icon(Icons.message),
label: Text("Start chat"),
);
isIcon = !isIcon;
});
}
Widget build(context) {
return Scaffold(
floatingActionButton: isIcon
? AnimatedSwitcher(
duration: Duration(
milliseconds: 100,
),
transitionBuilder: (Widget child, Animation<double> animation) {
return FadeTransition(
child: child,
opacity:
animation.drive(CurveTween(curve: Curves.elasticOut)),
);
},
child: _myWidget,
)
: AnimatedSwitcher(
duration: Duration(
milliseconds: 100,
),
transitionBuilder: (Widget child, Animation<double> animation) {
return FadeTransition(
child: child,
opacity:
animation.drive(CurveTween(curve: Curves.easeOutQuint)),
);
},
child: _myWidget,
),
appBar: AppBar(),
body: FlatButton(
onPressed: () {
_d();
},
child: Text('Press here to change FAB')));
}
}
This is my implementation by keeping the same
Hero
tag for the two FABs.
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 isIcon = false;
Widget _myWidget = FloatingActionButton(
heroTag: 'd',
key: UniqueKey(),
onPressed: () {},
child: Icon(Icons.message),
);
void _d() {
setState(() {
_myWidget = isIcon
? FloatingActionButton(
heroTag: 'b',
key: UniqueKey(),
onPressed: () {},
child: Icon(Icons.message),
)
: FloatingActionButton.extended(
heroTag: 'b',
key: UniqueKey(),
onPressed: () {},
icon: Icon(Icons.mesage),
label: Text("Start chat"),
);
isIcon = !isIcon;
});
}
Widget build(context) {
return Scaffold(
floatingActionButton: _myWidget,
appBar: AppBar(),
body: FlatButton(
onPressed: () {
_d();
},
child: Text('Press here to change FAB')));
}
}
Both give different results, try out with different animation curves as you like. Alter the size of the child ,setting Shape border, or setting mini:
equal to true to get a better looking result .
I was able to get it to work using an AnimatedSwitcher
with SizeTransition
and FadeTransition
. Please see code below.
floatingActionButton:
FloatingActionButton.extended(
onPressed: _onFabPress,
label: AnimatedSwitcher(
duration: Duration(seconds: 1),
transitionBuilder: (Widget child, Animation<double> animation) =>
FadeTransition(
opacity: animation,
child: SizeTransition(child:
child,
sizeFactor: animation,
axis: Axis.horizontal,
),
) ,
child: isExtended?
Icon(Icons.arrow_forward):
Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 4.0),
child: Icon(Icons.add),
),
Text("Add To Order")
],
),
)
)
The icon only view isn't fully circular, but I believe that can be fixed by adjusting padding.