In flutter How to change FAB (Floating Action Button) custom animation Icon - flutter

Question

I am new in flutter and now i am stuck to change FAB animation.Actually i am trying to before i press FAB that time it hadd add Icon and after press FAB it change icon close insted of add icon.
i provide one animation gif file link to more understand if any one know the solution please suggest me to solve this problem.
Here is the link https://miro.medium.com/max/468/1*qGa6VU4grjqEwAOScRm9BA.gif
In this link provided animation is showing that before press it shows the menu option icon and after press it show close icon but i want add option instead of menu option.
like add_close not a menu_close animationIcon.
I hope you understand my problem and suggest me

Answer 1

I think this code fulfill your requirements.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter FAB Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("FAB"),
),
floatingActionButton: AnimatedIconButton(
size: 30,
onPressed: () {
},
duration: Duration(milliseconds: 200),
endIcon: Icon(
Icons.close,
color: Colors.white,
),
startIcon: Icon(
Icons.add,
color: Colors.white,
),
startBackgroundColor: Colors.blue,
endBackgroundColor: Colors.blue,
),
);
}
}
this is the namespace which i used:
import 'package:flutter/material.dart';
import 'package:animated_icon_button/animated_icon_button.dart';

Answer 2

This code will work for all your requirements such as animation,multiple fab buttons with on pressed and also support images as a fab icon.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter FAB Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: UniWidget(),
);
}
}
class UniWidget extends StatefulWidget {
#override
_UniWidgetState createState() => _UniWidgetState();
}
class _UniWidgetState extends State<UniWidget> {
#override
Widget build(BuildContext context) {
var childButtons = List<UnicornButton>();
childButtons.add(UnicornButton(
hasLabel: false,
currentButton: FloatingActionButton(
backgroundColor: Colors.blue,
mini: false,
child: Padding(
padding: const EdgeInsets.all(15),
child: Image.asset('assets/images/arrow.png'),
),
onPressed: () {
print('scanbar');
},
)));
childButtons.add(UnicornButton(
hasLabel: false,
currentButton: FloatingActionButton(
backgroundColor: Colors.blue,
mini: false,
child: Padding(
padding: const EdgeInsets.all(15),
child: Image.asset('assets/images/contact.png'),
),
onPressed: () {
print('Contact');
},
)));
return Scaffold(
floatingActionButton: UnicornDialer(
parentButtonBackground: Colors.blue,
orientation: UnicornOrientation.VERTICAL,
childPadding: 10.0,
parentButton: Icon(Icons.add),
childButtons: childButtons),
appBar: AppBar(
title: Text("Fab demo"),
),
body: Center());
}
}
here is the namespaces
import 'package:flutter/material.dart';
import 'package:unicorndial/unicorndial.dart';
I hope it will fulfill your all type of requirements and work well in your project.