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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue