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:
parent
498f2ca7d6
commit
14b558340d
3 changed files with 66 additions and 18 deletions
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue