Animated Circular Menu In Flutter
Animation is a complex methodology in any mobile application. Despite its intricacy, Animation improves the user experience to another level and gives rich user communication. Because of its lavishness, animation turns into an integral part of present-day mobile applications. The Flutter system perceives the significance of Animation and gives a basic and natural structure to build up a wide type of animations.
In this blog, we will explore the Animated Circular Menu In Flutter. We will see how to implement a demo program of the animated circular menu and show a beautiful animation with a colorful icon using the
circular_menu package in your flutter applications.
circular_menu | Flutter Package
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve, and animation…pub. dev
Table Of Contents::
Introduction:
An animated circular menu for Flutter application, Adjustable radius, delightful colors, alignment, animation curve, and animation duration. Below demo video shows how to create an animated circular menu in a flutter. It shows how the animated circular menu will work using the circular_menu package in your flutter applications. It shows when the user taps a button, then animations will occur with beautiful icons, and all icons open in circular form with animation effect. It will be shown on your device.
Demo Module :
Parameters:
There are some parameters of circular menu are:
- > items: This parameter is used to must not be null, and it must contain two elements at least.
- > key: This parameter is used as the global key to controlling animation anywhere in the code.
- > backgroundWidget: This parameter is used to widget holds actual page content.
- > startingAngleInRadian: This parameter is used to starting the angle in a clockwise radian.
- > endingAngleInRadian: This parameter is used to ending the angle in clockwise radian.
- > animationDuration: This parameter is used how long an animation should take to complete one cycle.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
circular_menu:
Step 2: Import
import 'package:circular_menu/circular_menu.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called circular_menu_demo.dart inside the lib folder.
First, we will create a String variable called _coloName and a Color variable called _color.
String _colorName ;
Color _color ;
In the body part, we will add CircularMenu() widget. In this widget, we will add an alignment to the center. We will add backgroundWidget, which means show the content. In this widget, we will add a Column widget. We will add RichText() ‘Press the menu button’ and wrap it to the center inside the widget.
CircularMenu(
alignment: Alignment.center,
backgroundWidget: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Center(
child: Padding(
padding: const EdgeInsets.all(100.0),
child: RichText(
text: TextSpan(
style: TextStyle(color: Colors.black, fontSize: 20,fontWeight: FontWeight.bold),
children: <TextSpan>[
TextSpan(text: 'Press the menu button'),
],
),
),
),
),
],
),
curve: Curves.bounceOut,
reverseCurve: Curves.bounceInOut,
toggleButtonColor: Colors.cyan[400],
items: [CircularMenuItem(..),
CircularMenuItem(..)
],
),
We will add a curve when the user taps the menu button, and then the animation curve is forwarding. We will add a bounceOut curve. We will add a reverseCurve means when the user taps the menu button again and the animation curve in reverse. We will add a bounceInOut curve. We will add a toggle button color. We will add items that deeply define the below code. When we run the application, we ought to get the screen’s output like the underneath screen capture.
We will deeply define items:
We will create a five CircularMenuItem(). Inside items, we will add icons, colors, and onTap() function. In this function, we will add a setState() method. This method will see variable _color equal to the colors and _colorname equal to text.
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';
});
})
],
When we pressed the menu toggle button then, the button open circular animation form. Then button menu icon change to the close icon. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:circular_menu/circular_menu.dart';
import 'package:flutter/material.dart';
class CircularMenuDemo extends StatefulWidget {
@override
_CircularMenuDemoState createState() => _CircularMenuDemoState();
}
class _CircularMenuDemoState extends State<CircularMenuDemo> {
String _colorName ;
Color _color ;
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.cyan[200],
title: Text('Flutter Animated Circular Menu Demo'),
),
body: CircularMenu(
alignment: Alignment.center,
backgroundWidget: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Center(
child: Padding(
padding: const EdgeInsets.all(100.0),
child: RichText(
text: TextSpan(
style: TextStyle(color: Colors.black, fontSize: 20,fontWeight: FontWeight.bold),
children: <TextSpan>[
TextSpan(text: 'Press the menu 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';
});
})
],
),
),
);
}
}
Conclusion:
In the article, I have explained the Animated Circular Menu of the basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Animated Circular Menu On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Animated Circular Menu in your flutter projects. We will show you what the introduction is?. Some circular menu parameters, make a demo program for working Animated Circular Menu and show when the user taps a button the animations will occur with beautiful icons. All icons open in circular form with an animation effect. When we pressed the menu toggle button, the button menu icon changed to the close icon using the circular_menu package in your flutter applications, so please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Animated Circular Menu Demo:
flutter-devs/flutter_animated_circular_menu_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
