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 'package:redux/redux.dart';
import 'models/appState.dart'; import 'models/appState.dart';
import 'redux/actions.dart'; import 'models/fireMapState.dart';
import 'redux/fireMapActions.dart';
/// Layer selector widget for changing map layers /// Layer selector widget for changing map layers
class LayerSelectorMapPluginWidget extends StatelessWidget { class LayerSelectorMapPluginWidget extends StatelessWidget {
@ -29,14 +30,62 @@ class LayerSelectorMapPluginWidget extends StatelessWidget {
} }
Widget _LayerSelectorButton(Store<AppState> store) { 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, backgroundColor: Colors.black26,
mini: true, mini: true,
child: Icon( child: Icon(Icons.layers),
Icons.layers,
),
onPressed: () { 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/yourLocation.dart';
import 'package:fires_flutter/models/fireNotification.dart'; import 'package:fires_flutter/models/fireNotification.dart';
import 'package:fires_flutter/models/fireMapState.dart';
abstract class FiresMapActions {} abstract class FiresMapActions {}
@ -53,4 +54,8 @@ class EditCancelYourLocationAction extends FiresMapActions {
EditCancelYourLocationAction(this.loc); 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), _editConfirmYourLocationMap),
new TypedReducer<FireMapState, EditCancelYourLocationAction>( new TypedReducer<FireMapState, EditCancelYourLocationAction>(
_editCancelYourLocationMap), _editCancelYourLocationMap),
new TypedReducer<FireMapState, ToggleMapLayerAction>(_toggleMapLayer), new TypedReducer<FireMapState, SelectMapLayerAction>(_selectMapLayer),
new TypedReducer<FireMapState, UpdateYourLocationMapAction>( new TypedReducer<FireMapState, UpdateYourLocationMapAction>(
_updateYourLocationMap) _updateYourLocationMap)
]); ]);
@ -99,12 +99,6 @@ FireMapState _editCancelYourLocationMap(
FireMapStatus restoreStatusAfterSave(loc) => FireMapStatus restoreStatusAfterSave(loc) =>
loc.subscribed ? FireMapStatus.unsubscribe : FireMapStatus.view; loc.subscribed ? FireMapStatus.unsubscribe : FireMapStatus.view;
FireMapState _toggleMapLayer(FireMapState state, ToggleMapLayerAction action) { FireMapState _selectMapLayer(FireMapState state, SelectMapLayerAction action) {
FireMapLayer currentLayer = state.layer; return state.copyWith(layer: action.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);
} }