Leondev7 / flutter_fab_dialer

Floating action button dialer
BSD 3-Clause "New" or "Revised" License
68 stars 31 forks source link

FabMiniMenuItem color fails to change after setState #16

Open SapiensID opened 5 years ago

SapiensID commented 5 years ago

I trying to change the color of the selected FabMiniMenuItem. My code is below. I do see that when I tap on a menu item, the FabDialer calls the method to create each menu item, and the color of each menu item is set correctly (red for the selected "currentMap", blue for the others). However, the FabDialer widget fails to show the new color:

import 'package:flutter/material.dart';
import 'package:flutter_fab_dialer/flutter_fab_dialer.dart';

class MapActionMenu extends StatefulWidget {
    MapActionMenu();

    @override
    _MapActionMenuState createState() => _MapActionMenuState();
}

class Appmap {
    String name;
    Appmap({this.name});
}

class _MapActionMenuState extends State<MapActionMenu> {
    List<Appmap> _maps;
    Appmap _currentMap;

@override
void initState() {
     super.initState();

      _maps = [
         new Appmap(name: "map1"), new Appmap(name: "map2"), new Appmap(name: "map3")
     ];
     _currentMap = _maps[0];
}

@override
void dispose() {
    super.dispose();
}

void _changeMap(Appmap map) {
     setState(() {
        _currentMap = map;
    });
 }

Color _getButtonColor(Appmap map) {
    return map == _currentMap ? Colors.red : Colors.blue;
}

@override
Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(bottom: 85.0),
        child: FabDialer(
         _maps
            .map(
                (map) => _fabItem(map),
            )
            .toList(),
        Colors.red,
        Icon(Icons.add)),
   );
}

FabMiniMenuItem _fabItem(Appmap map) {
    return new FabMiniMenuItem.withText(
        new Icon(Icons.arrow_forward),
            _getButtonColor(map),
           2.0,
           map.name,
            () => _changeMap(map),
            map.name,
            Colors.white,
           Colors.grey,
           true);
    }
}

Perhaps my implementation is incorrect and I need to change something. I would appreciate some help.

Leondev7 commented 5 years ago

That's because the FabMiniItems are StatelessWidgets, and cannot be changed after its creation.

SapiensID commented 5 years ago

ok, good to know. Thanks for your reply.

Leondev7 commented 5 years ago

Have you tried changing the behaviour of the FabMini itself? Right now it does a ripple effect, but maybe you can change it.

SapiensID commented 5 years ago

I'm actually working on making the fabMini stateful. I'll let you know when I have it working.