Onclick Of Icon Open Menus With Circular Using Flutter

admin_img Posted By Bajarangi soft , Posted On 23-09-2020

The following lesson will teach you how to compose flutter animations into a cool rotating circular widget, which can easily maintain 60FPS on modern smartphones.

Raidal Button At Bottom Center In Flutter Android App

As a starting point, we will create a simple app with a StackStack is a container Widget, that places widgets on top of each other. All of our widgets will be placed in it.Building a flashy Circular Menu Bottom Center in Flutter can be done with ease thanks to the Transform widget and staggered animations.

Step 1
we will add circular_menu: ^1.1.0 dependency name to
our pubspec.yaml file as shown below:

dependencies:
  flutter:
    sdk: flutter
  circular_menu: ^1.1.0

Step 2
You can install packages from the command line: with Flutter:

flutter pub get


Step 3
Now after adding the dependency and downloading, in order to use any package, we must import it before using it. So, in our case, we will import it in our main.dart file as:
import 'package:circular_menu/circular_menu.dart';

Step 4
YOu can add this Circular Menu Bottom Center  code :
 CircularMenu(
  alignment: Alignment.bottomCenter,
  backgroundWidget: Center(
    child: RichText(
      text: TextSpan(
        style: TextStyle(color: Colors.black, fontSize: 28),
        children: <TextSpan>[
          TextSpan(
            text: _colorName,
            style:
            TextStyle(color: _color, fontWeight: FontWeight.bold),
          ),
          TextSpan(text: ' button is clicked.'),
        ],
      ),
    ),
  ),
  toggleButtonColor: Colors.orange,
  items: [
    CircularMenuItem(
        icon: Icons.message,
        color: Colors.green,
        onTap: () {
          setState(() {
            _color = Colors.green;
            _colorName = 'Green';
          });
        }),
    CircularMenuItem(
        icon: Icons.home,
        color: Colors.indigo,
        onTap: () {
          setState(() {
            _color = Colors.indigo;
            _colorName = 'Indigo';
          });
        }),
    CircularMenuItem(
        icon: Icons.search,
        color: Colors.pink,
        onTap: () {
          setState(() {
            _color = Colors.pink;
            _colorName = 'Pink';
          });
        }),
    CircularMenuItem(
        icon: Icons.chat,
        color: Colors.purple,
        onTap: () {
          setState(() {
            _color = Colors.purple;
            _colorName = 'Purple';
          });
        }),
    CircularMenuItem(
        icon: Icons.notifications,
        color: Colors.brown,
        onTap: () {
          setState(() {
            _color = Colors.brown;
            _colorName = 'Brown';
          });
        })
  ],
),


Complete Code Circular Menu Bottom Center in flutter
Main.dart
import 'package:flutter/material.dart';
import 'package:circular_menu/circular_menu.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "My App",
      home: MyHomePage(),
    );
  }
}


class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {

  String _colorName = 'No';
  Color _color = Colors.black;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          backgroundColor: Colors.orange,
          title: Text('Flutter Circular Menu'),
        ),
        body: CircularMenu(
          alignment: Alignment.bottomCenter,
          backgroundWidget: Center(
            child: RichText(
              text: TextSpan(
                style: TextStyle(color: Colors.black, fontSize: 28),
                children: <TextSpan>[
                  TextSpan(
                    text: _colorName,
                    style:
                    TextStyle(color: _color, fontWeight: FontWeight.bold),
                  ),
                  TextSpan(text: ' button is clicked.'),
                ],
              ),
            ),
          ),
          toggleButtonColor: Colors.orange,
          items: [
            CircularMenuItem(
                icon: Icons.message,
                color: Colors.green,
                onTap: () {
                  setState(() {
                    _color = Colors.green;
                    _colorName = 'Green';
                  });
                }),
            CircularMenuItem(
                icon: Icons.home,
                color: Colors.indigo,
                onTap: () {
                  setState(() {
                    _color = Colors.indigo;
                    _colorName = 'Indigo';
                  });
                }),
            CircularMenuItem(
                icon: Icons.search,
                color: Colors.pink,
                onTap: () {
                  setState(() {
                    _color = Colors.pink;
                    _colorName = 'Pink';
                  });
                }),
            CircularMenuItem(
                icon: Icons.chat,
                color: Colors.purple,
                onTap: () {
                  setState(() {
                    _color = Colors.purple;
                    _colorName = 'Purple';
                  });
                }),
            CircularMenuItem(
                icon: Icons.notifications,
                color: Colors.brown,
                onTap: () {
                  setState(() {
                    _color = Colors.brown;
                    _colorName = 'Brown';
                  });
                })
          ],
        ),
      ),
    );
  }
}

Related Post