在颤动中如何更改 FAB（浮动操作按钮）自定义动画图标

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.