Nilen Patel Inc.

Tutorial and code of Circular Menu in Flutter. Copy and paste the below code as per your requirements.

circular_menu:

import 'package:circular_menu/circular_menu.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: CircularMenuDemo(),
    );
  }
}
class CircularMenuDemo extends StatefulWidget {
  const CircularMenuDemo({Key? key}) : super(key: key);
  @override
  _CircularMenuDemoState createState() => _CircularMenuDemoState();
}

class _CircularMenuDemoState extends State<CircularMenuDemo> {
  late String _colorName ;
  late Color _color ;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.grey[100],
        appBar: AppBar(
          automaticallyImplyLeading: false,
          backgroundColor: Colors.blue,
          title: const Center(child: Text('Flutter Circular Menu'),),
        ),
        body: CircularMenu(
          alignment: Alignment.center,
          backgroundWidget: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Center(
                child: Padding(
                  padding: const EdgeInsets.all(100.0),
                  child: RichText(
                    text: const TextSpan(
                      style: TextStyle(color: Colors.black, fontSize: 20,fontWeight: FontWeight.bold),
                      children: <TextSpan>[
                        TextSpan(text: 'Press Button'),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
          curve: Curves.bounceOut,
          reverseCurve: Curves.bounceInOut,
          toggleButtonColor: Colors.cyan[400],
          items: [
            CircularMenuItem(
                icon: Icons.home,
                color: Colors.brown,
                onTap: () {
                  setState(() {
                    _color = Colors.brown;
                    _colorName = 'Brown';
                  });
                }),
            CircularMenuItem(
                icon: Icons.search,
                color: Colors.green,
                onTap: () {
                  setState(() {
                    _color = Colors.green;
                    _colorName = 'Green';
                  });
                }),
            CircularMenuItem(
                icon: Icons.settings,
                color: Colors.red,
                onTap: () {
                  setState(() {
                    _color = Colors.red;
                    _colorName = 'red';
                  });
                }),
            CircularMenuItem(
                icon: Icons.chat,
                color: Colors.orange,
                onTap: () {
                  setState(() {
                    _color = Colors.orange;
                    _colorName = 'orange';
                  });
                }),
            CircularMenuItem(
                icon: Icons.notifications,
                color: Colors.purple,
                onTap: () {
                  setState(() {
                    _color = Colors.purple;
                    _colorName = 'purple';
                  });
                })
          ],
        ),
      ),
    );
  }
}