floating_action_wheel

Floating Action Wheel

A new Floating Action button widget for Flutter with a multi-functional, immersive buttons wheel

Getting Started

💻 Installation

Add the following dependency to your pubspec.yaml

dependencies:
  floating_action_wheel: <latest version>

Usage:

You have two options to use the FloatingActionWheel, you can use it as a normal FAB in Scaffold(floatingActionButton) or you can put it in other compatible widgets like a Container or a Stack

Simply import the main classes and use the main FloatingActionWheel() constructor with its parameters, the mandatory parameter is the buttons list where you pass a list of WheelButton each has its own properties, like its text, icon, image and colors, and its OnPressed callback. Look up the internal documentation for the WheelButton class and its parameters

import 'package:floating_action_wheel/floating_action_wheel.dart';
import 'package:floating_action_wheel/wheel_button.dart';

- Implementation

FloatingActionWheel(
      buttons: [
        WheelButton(onPressed: () {
          setState(() {
            demoText = "button #1 pressed";
            backgroundColor= Colors.orangeAccent;
          });
        },
            text: 'button 1',
            backgroundColor: Colors.orange),
        WheelButton(onPressed: () {
          setState(() {
            demoText = "button #2 pressed";
            backgroundColor= Colors.greenAccent;
          });
        },
            icon: Icons.ac_unit,
            backgroundColor: Colors.green),
            
        WheelButton(onPressed: () {
          setState(() {
            demoText = "button #3 pressed";
            backgroundColor= Colors.cyanAccent;
          });
        },
            image: Image.asset('assets/your_image.png'),
            backgroundColor: Colors.cyan),
            
        WheelButton(
            onPressed: () {
          setState(() {
            demoText = "button #4 pressed";
            backgroundColor= Colors.pinkAccent;
          });
        },
            icon: Icons.home,
            backgroundColor: Colors.pink),

      ],
      angleOffset: 90,
      visiblePart: 0.5,
      animationType: WheelAnimationType.around,
      wheelSize: WheelSize.wheel_medium_120,
      fabForegroundColor: Colors.white,
      fabBackgroundColor: Colors.blue,
      separated: false,
    );
)