feat: replace layer toggle with layer selector menu

- Replace ToggleMapLayerAction with SelectMapLayerAction that takes a specific layer
- Update fireMapReducer to handle SelectMapLayerAction instead of toggling
- Use PopupMenuButton with GlobalKey to open menu on button tap
- Show check icon and bold text for currently selected layer
- Menu items display layer names: OSMC Grey, OSMC, Esri Street, Esri Satellite, Esri Terrain
- Selecting a layer immediately updates Redux state and closes the menu
This commit is contained in:
vjrj 2026-03-06 08:33:52 +01:00
parent 498f2ca7d6
commit 14b558340d
3 changed files with 66 additions and 18 deletions

View file

@ -4,7 +4,8 @@ import 'package:get_it/get_it.dart';
import 'package:redux/redux.dart';
import 'models/appState.dart';
import 'redux/actions.dart';
import 'models/fireMapState.dart';
import 'redux/fireMapActions.dart';
/// Layer selector widget for changing map layers
class LayerSelectorMapPluginWidget extends StatelessWidget {
@ -29,14 +30,62 @@ class LayerSelectorMapPluginWidget extends StatelessWidget {
}
Widget _LayerSelectorButton(Store<AppState> store) {
return new FloatingActionButton(
final key = GlobalKey<PopupMenuButtonState<FireMapLayer>>();
return PopupMenuButton<FireMapLayer>(
key: key,
initialValue: store.state.fireMapState.layer,
onSelected: (FireMapLayer layer) {
store.dispatch(SelectMapLayerAction(layer));
},
itemBuilder: (BuildContext context) {
return FireMapLayer.values.map((FireMapLayer layer) {
final isSelected = store.state.fireMapState.layer == layer;
return PopupMenuItem<FireMapLayer>(
value: layer,
child: Row(
children: [
Icon(
isSelected ? Icons.check : Icons.check,
color: isSelected ? Colors.blue : Colors.transparent,
size: 20,
),
SizedBox(width: 8),
Text(
_getLayerName(layer),
style: TextStyle(
fontWeight:
isSelected ? FontWeight.bold : FontWeight.normal,
),
),
],
),
);
}).toList();
},
child: FloatingActionButton(
backgroundColor: Colors.black26,
mini: true,
child: Icon(
Icons.layers,
),
child: Icon(Icons.layers),
onPressed: () {
store.dispatch(new ToggleMapLayerAction());
});
key.currentState?.showButtonMenu();
},
),
);
}
String _getLayerName(FireMapLayer layer) {
switch (layer) {
case FireMapLayer.osmcGrey:
return 'OSMC Grey';
case FireMapLayer.osmc:
return 'OSMC';
case FireMapLayer.esri:
return 'Esri Street';
case FireMapLayer.esriSatellite:
return 'Esri Satellite';
case FireMapLayer.esriTerrain:
return 'Esri Terrain';
}
}
}

View file

@ -1,5 +1,6 @@
import 'package:fires_flutter/models/yourLocation.dart';
import 'package:fires_flutter/models/fireNotification.dart';
import 'package:fires_flutter/models/fireMapState.dart';
abstract class FiresMapActions {}
@ -42,7 +43,7 @@ class EditYourLocationAction extends FiresMapActions {
EditYourLocationAction(this.loc);
}
class EditConfirmYourLocationAction extends FiresMapActions{
class EditConfirmYourLocationAction extends FiresMapActions {
YourLocation loc;
EditConfirmYourLocationAction(this.loc);
@ -53,4 +54,8 @@ class EditCancelYourLocationAction extends FiresMapActions {
EditCancelYourLocationAction(this.loc);
}
class ToggleMapLayerAction extends FiresMapActions {}
class SelectMapLayerAction extends FiresMapActions {
final FireMapLayer layer;
SelectMapLayerAction(this.layer);
}

View file

@ -21,7 +21,7 @@ final fireMapReducer = combineReducers<FireMapState>([
_editConfirmYourLocationMap),
new TypedReducer<FireMapState, EditCancelYourLocationAction>(
_editCancelYourLocationMap),
new TypedReducer<FireMapState, ToggleMapLayerAction>(_toggleMapLayer),
new TypedReducer<FireMapState, SelectMapLayerAction>(_selectMapLayer),
new TypedReducer<FireMapState, UpdateYourLocationMapAction>(
_updateYourLocationMap)
]);
@ -99,12 +99,6 @@ FireMapState _editCancelYourLocationMap(
FireMapStatus restoreStatusAfterSave(loc) =>
loc.subscribed ? FireMapStatus.unsubscribe : FireMapStatus.view;
FireMapState _toggleMapLayer(FireMapState state, ToggleMapLayerAction action) {
FireMapLayer currentLayer = state.layer;
List<FireMapLayer> list = FireMapLayer.values;
int currentPos = list.indexOf(currentLayer);
currentPos++;
FireMapLayer next =
list.elementAt(currentPos >= list.length ? 0 : currentPos);
return state.copyWith(layer: next);
FireMapState _selectMapLayer(FireMapState state, SelectMapLayerAction action) {
return state.copyWith(layer: action.layer);
}