Circular Menu Flutter

This type of  Circular menu can be created using circular_menu package .

now the current version is ^1.1.2 . Take the latest version from Here

dependencies: circular_menu: ^1.1.2

just add the dependency into pubspec.yaml file  and run pub get.

make sure there is no error in the terminal .

now import the package into the dart file.

import 'package:circular_menu/circular_menu.dart';

Now we can use this circular menu . important point: CircularMenu() has to be used in the body .onTap function is also very important . If you don't have any function then make it blank.

body: CircularMenu(

              alignment: Alignment.bottomCenter,

              toggleButtonColor: Colors.pink,

              items: [

                CircularMenuItem(

                    icon: Icons.home,

                    color: Colors.green,

                    onTap:(){}

                    ),

                CircularMenuItem(

                    icon: Icons.search,

                    color: Colors.blue,

                    onTap:(){}

                    ),

                CircularMenuItem(

                    icon: Icons.settings,

                    color: Colors.orange,

                    onTap:(){}

                    ),

                CircularMenuItem(

                    icon: Icons.chat,

                    color: Colors.purple,

                    onTap:(){}

                    ),

                CircularMenuItem(

                    icon: Icons.notifications,

                    color: Colors.brown,

                    onTap:(){}

                    )

              ],

        ),

changing the alignment we can change the position of the menu button.

 

as now the circular menu is on the body so if we wanna add more elements to page then we

have to add that into the backgroundWidget property.

example:

body: CircularMenu(

             alignment: Alignment.bottomRight,

              backgroundWidget: Center(

                child: Column(

                  mainAxisAlignment: MainAxisAlignment.center,

                  children: [

                    Text('This is a circular button')

                  ],

                ),

              ),

              toggleButtonColor: Colors.pink,

              items: [

                CircularMenuItem(

               .................

               )