Search code examples
flutteruser-interfaceanimationbuttontransition

Flutter SpeedDial button rotation


Quickly and concisely.

I am using SpeedDial (https://pub.dev/packages/flutter_speed_dial) package. I want to do my SpeedDialChild like on Pinterest, but i don't know how to implement it.

Link to pinterest -> https://www.mediafire.com/file/led2dr764jrbcgl/video-1641299974.mp4/file

I have this:

enter image description here

I want this:

enter image description here

   child: SpeedDial(
            buttonSize: const Size(80, 80),
            animationAngle: pi,
            useRotationAnimation: false,
            onPress: () {
              return;
            },
            foregroundColor: Colors.white,
            overlayColor: Colors.brown,
            elevation: 0,
            backgroundColor: const Color.fromARGB(255, 105, 30, 0),
            childrenButtonSize: (const Size.square(100)),
            direction: SpeedDialDirection.up,
            child: const Icon(
              Icons.add,
              size: 48,
            ),
            children: [
              SpeedDialChild(
                backgroundColor: const Color.fromARGB(190, 105, 30, 1),
                child: const Icon(
                  Icons.ac_unit_sharp,
                  size: 40,
                  color: Colors.green,
                ),
              ),
              SpeedDialChild(
                backgroundColor: const Color.fromARGB(190, 105, 30, 1),
                child: const Icon(
                  Icons.account_box,
                  size: 40,
                  color: Colors.blue,
                ),
              ),
            ],
          ),

Solution

  • You can used following packages:

    1. circular_menu
    2. fab_circular_menu
    3. expandable FAB