floatingActionButton (SpeedDial library)

Question

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

If there are other libraries, that is fine.

Answer 1

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),
    );
  }