hasan-hm1 / circular_menu

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.
MIT License
99 stars 52 forks source link

Change the initial settings icon #38

Closed sambaPython24 closed 1 day ago

sambaPython24 commented 2 days ago

Hey, thank you very much for that amazing work.

I would be interested to change the initial menu button but could not find the right icon parameter. grafik

Could you give a parameter to change this icon?

hasan-hm1 commented 2 days ago

Hi @sambaPython24 ,

Thanks for opening this issue, please use toggleButtonAnimatedIconData parameter and select from a set of the supported Material Design animated icons.

Here is an example using AnimatedIcons.play_pause:

CircularMenu(
          toggleButtonAnimatedIconData: AnimatedIcons.play_pause,
          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.pink,
          items: [
            CircularMenuItem(
                icon: Icons.home,
                color: Colors.green,
                onTap: () {
                  setState(() {
                    _color = Colors.green;
                    _colorName = 'Green';
                  });
                }),
            CircularMenuItem(
                icon: Icons.search,
                color: Colors.blue,
                onTap: () {
                  setState(() {
                    _color = Colors.blue;
                    _colorName = 'Blue';
                  });
                }),
            CircularMenuItem(
                icon: Icons.settings,
                color: Colors.orange,
                onTap: () {
                  setState(() {
                    _color = Colors.orange;
                    _colorName = 'Orange';
                  });
                }),
            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';
                  });
                })
          ],
        )