0

Very new flutter user here. I am using the flutter_map and the toggle_switch packages. I want the toggle switch to change the base map when selected, but I'm really lost on how to set it up.

My thought is that, since all of my other wmsOptions settings are identical, that maybe I can just change the baseurl when the toggle is switched, and that will change the map.

Here is one of the basemap options for reference:

class TopoBasemap {
  TileLayer getLayer() {
    return TileLayer(
            wmsOptions: WMSTileLayerOptions(
              baseUrl: 'https://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WMSServer?',
              layers: const ['0'], 
              styles: const ['default'], 
              format: 'image/png',
              version: '1.3.0',
              crs: const Epsg3857(),
              transparent: true,
            ),
            userAgentPackageName: 'com.company.whatever',
          );
  }
}

I was trying to create a state that could be changed when the index changes, but I don't really know where to start.

This is my attempt at creating the tilelayer that could change:

class BasemapTileLayer extends StatefulWidget {
  const BasemapTileLayer({super.key});

  @override
  _BasemapSelectionState createState() => _BasemapSelectionState();
}


class _BasemapSelectionState extends State<BasemapTileLayer> {

  @override
  Widget build(BuildContext context) {
     return TileLayer(
            wmsOptions: WMSTileLayerOptions(
              baseUrl: _baseUrl,
              layers: const ['0'], 
              styles: const ['default'], 
              format: 'image/png',
              version: '1.3.0',
              crs: const Epsg3857(),
              transparent: true,
            ),
            userAgentPackageName: 'com.northwind.huntnscout',
          );
    }
  }

And the drawer that will hold the toggle switch:

class LeftDrawer extends StatelessWidget {
  const LeftDrawer({super.key});

  @override 
  Widget build(BuildContext context) {
    return Drawer(
      backgroundColor:const Color.fromARGB(255, 18, 17, 17),
        child: ListView(
        padding: EdgeInsets.zero,
          children: [
            const SizedBox(
              height: 64.0,  
              child: DrawerHeader( 
                decoration: BoxDecoration(color: Color.fromARGB(255, 18, 17, 17)),
                child: 
                Wrap(
                  crossAxisAlignment: WrapCrossAlignment.center,
                  children: [
                    Text('"Project Title"   ', 
                      style: TextStyle(color: Color.fromARGB(255, 255, 104, 3))),
                    Icon(Icons.edit,
                      color: Color.fromARGB(255, 255, 104, 3)),
                  ]
                ),
              ),
            ),
            ExpansionTile(
              title: const Text('Base Map'),
              backgroundColor: const Color.fromARGB(255, 255, 104, 3), 
              collapsedBackgroundColor: const Color.fromARGB(255, 255, 104, 3), 
                children:<Widget>[ 
                  ToggleSwitch( 
                    activeBorders: [
                      Border.all(
                        color: Colors.orange,
                        width: 3.0,
                      ),
                      Border.all(
                        color: Colors.orange,
                        width: 3.0,
                      ),
                      Border.all(
                        color: Colors.orange,
                        width: 3.0,
                      ),
                    ],
                    activeFgColor: Colors.black54,
                    isVertical: true,
                    radiusStyle: true,
                    minWidth: 500,
                    customWidths: const [1300.0, 1300.0, 1300.0, 1300.0],
                    cornerRadius: 0,
                    initialLabelIndex: 2,
                    activeBgColors: const [
                      [Colors.orange],
                      [Colors.orange],
                      [Colors.orange],
                    ],
                    labels: const ['Topographic', 'Satellite Imagery', 'Topographic Imagery'],
                    onToggle: (index) {
                      setState(() {_baseUrl = index; });
                    },
                  ),
                ]
            ),
          ],
        ),
    );
  }
}

From here, could someone point me in the right direction as to how to get the onToggle to work? I know it's pretty rough.

0