flutterfloating-action-buttonhorizontal-line

floatingActionButton (SpeedDial library)


How can I open SpeedDial in a horizontal way in my project like this?

enter image description here

If there are other libraries, that is fine.


Solution

  • You can also create your own custom floating action button. But since you are open to packages too writing an answer in which you can achieve it using a package

    Try https://pub.dev/packages/custom_floating_action_button

    Add this to pubspec.yaml

    custom_floating_action_button: ^0.0.3
    

    You can wrap the scaffold with CustomFloatingActionButton

    //add custom floating action button on top of your scaffold
    //minimum 2 and maximum 5 items allowed
      @override
      Widget build(BuildContext context) {
        return CustomFloatingActionButton(
          body: Scaffold(
            appBar: AppBar(
              title: const Text('appbar title'),
            ),
            body: Container(),
          ),
          options: const [
              CircleAvatar(
                child: Icon(Icons.height),
              ),
              CircleAvatar(
                child: Icon(Icons.title),
              ),
             //All widgets that should appear ontap of FAB.
          ],
          type: CustomFloatingActionButtonType.horizontal,
          openFloatingActionButton: const Icon(Icons.add),
          closeFloatingActionButton: const Icon(Icons.close),
        );
      }