vjrj
14b558340d
- 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
91 lines
2.8 KiB
Dart
91 lines
2.8 KiB
Dart
import 'package:comunes_flutter/comunes_flutter.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:get_it/get_it.dart';
|
|
import 'package:redux/redux.dart';
|
|
|
|
import 'models/appState.dart';
|
|
import 'models/fireMapState.dart';
|
|
import 'redux/fireMapActions.dart';
|
|
|
|
/// Layer selector widget for changing map layers
|
|
class LayerSelectorMapPluginWidget extends StatelessWidget {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
Store<AppState> store = GetIt.instance<Store<AppState>>();
|
|
return LayoutBuilder(
|
|
builder: (context, constraints) =>
|
|
Stack(fit: StackFit.expand, children: <Widget>[
|
|
Positioned(
|
|
top: constraints.maxHeight - 60,
|
|
left: 10.0,
|
|
child: new CenteredRow(
|
|
children: <Widget>[
|
|
new Column(
|
|
children: <Widget>[_LayerSelectorButton(store)],
|
|
)
|
|
],
|
|
),
|
|
)
|
|
]));
|
|
}
|
|
|
|
Widget _LayerSelectorButton(Store<AppState> store) {
|
|
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),
|
|
onPressed: () {
|
|
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';
|
|
}
|
|
}
|
|
}
|