Circular Menu Flutter Example
In this article, we are going to integrate animated circular menu in flutter applications. You can also check out flutter navigation related articles.
We are using circular_menu package to create animated menu with circular shape in flutter applications. Using this package, whenever we tap on menu button, all buttons are displayed in circular form with animation.
Circular Menu widget has many properties to customize UI. backgroundWidget property is used to display actual page content. items parameter is used to display icons using CircularMenuItem widget. key attribute is used to access circular menu widget object anywhere from code.
curve property is used to add curve when user taps on menu button. reverseCurve property is used to add curve in reverse when user taps on menu button second time. toggleButtonColor attribute is used to set color of menu button which is used to display and hide button with icons in circular form.
startingAngleInRadian property is used to starting angle in clockwise radian. endingAngleInRadian property is used to ending angle in clockwise radian. animationDuration property is used to set duration in which animation should complete one cycle.
Add required dependency in your app level build.gradle file
Circular Menu Flutter
import ‘package:flutter/material.dart’;
class CircularMenuScreen extends StatefulWidget {
@override
_CircularMenuScreenState createState() => _CircularMenuScreenState();
}
class _CircularMenuScreenState extends State<CircularMenuScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Flutter Animated Circular Menu Sample’),
),
body: CircularMenu(
alignment: Alignment.center,
curve: Curves.bounceOut,
reverseCurve: Curves.bounceInOut,
toggleButtonColor: Colors.blueAccent,
items: [
CircularMenuItem(
icon: Icons.home,
color: Colors.greenAccent,
onTap: () {
}),
CircularMenuItem(
icon: Icons.chat,
color: Colors.redAccent,
onTap: () {
}),
CircularMenuItem(
icon: Icons.search,
color: Colors.purpleAccent,
onTap: () {
}),
CircularMenuItem(
icon: Icons.notifications,
color: Colors.orangeAccent,
onTap: () {
}),
CircularMenuItem(
icon: Icons.settings,
color: Colors.tealAccent,
onTap: () {
}),
],
),
);
}
}
