flutter_speed_dial_navbar 0.0.3

A customizable and animated radial speed dial navigation bar for Flutter apps. Easily integrate a floating action button menu with multiple items to enhance UX, perfect for modern mobile UI designs.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_speed_dial_navbar/flutter_speed_dial_navbar.dart';
import 'package:flutter_speed_dial_navbar/src/flutter_speed_dial_navbar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Speed Dial Navbar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const DemoHomePage(),
    );
  }
}

class DemoHomePage extends StatefulWidget {
  const DemoHomePage({super.key});

  @override
  State<DemoHomePage> createState() => _DemoHomePageState();
}

class _DemoHomePageState extends State<DemoHomePage> {
  int _selectedIndex = 0;

  static const List<Widget> _pages = [
    Center(child: Text('🏠 Home Page')),
    Center(child: Text('🎬 Reels Page')),
    Center(child: Text('💾 Saved Page')),
    Center(child: Text('⚙️ Settings Page')),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    debugPrint("Tapped on index: $index");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Speed Dial Example'),
      ),
      body: _pages[_selectedIndex],
      floatingActionButton:
      RadialFab(
        buttonColor: Colors.blue,
        iconColor: Colors.white,
        initialIcon: Icons.add,
        items: [
          RadialFabItem(
            icon: Icons.home,
            tooltip: "Home",
            onTap: () => print("Home tapped"),
          ),
          RadialFabItem(
            icon: Icons.video_call,
            tooltip: "Reels",
            onTap: () => print("Reels tapped"),
          ),
          RadialFabItem(
            icon: Icons.save_alt,
            tooltip: "Saved",
            onTap: () => print("Saved tapped"),
          ),
          RadialFabItem(
            icon: Icons.settings,
            tooltip: "Settings",
            onTap: () => print("Settings tapped"),
          ),
        ],
      ),

      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

    );
  }
}