title: Flutter bottomSheet to change main app State
body: <p>My <code>main.dart</code> has become quite lengthy, so I'm splitting it up into various other <code>.dart</code> files for maintainability. </p>
  
  <p>My main app uses a Google Map object and I place various red location markers on it. Now, I have various <code>FloatingActionButton()</code> along the bottom - each one opens a Bottom Sheet, using <code>showBottomSheet()</code> or <code>showModalBottomSheet()</code>.</p>
  
  <p>The only way I can currently think to split the main app into various files (to keep tidy) is to have the contents of these various bottom sheets in different <code>.dart</code> files which then are called from the <code>main.dart</code> - probably the wrong way.</p>
  
  <p><a href="https://i.stack.imgur.com/7npCz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7npCz.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Main.dart</strong></p>
  
  <pre><code>...
  import 'package:flutter_app/db_manager.dart' as db_manager;
  
  import 'package:flutter_app/section_about.dart';
  import 'package:flutter_app/section_settings.dart';
  
  void main() =&gt; runApp(MyApp());
  
  SectionAbout sectionAbout = SectionAbout();
  SectionSettings sectionSettings = SectionSettings();
  
  class MyApp extends StatefulWidget {
    @override
    _MyAppState createState() =&gt; _MyAppState();
  }
  
  class _MyAppState extends State&lt;MyApp&gt; {
    GoogleMapController mapController;
  
    static const LatLng _center = const LatLng(xxxxxxx, xxxxxxx); 
  
    void _onMapCreated(GoogleMapController controller) {
      mapController = controller;
    }
  
    void _onCameraMove(CameraPosition position) {
      _lastMapPosition = position.target;
    }
  
    final Set&lt;Marker&gt; _markers = {};
    MapType _currentMapType = MapType.normal;
    LatLng _lastMapPosition = _center;
  
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('My Map'),
            backgroundColor: Colors.green[700],
          ),
  
          //Put in a stack widget so can layer other widgets on top of map widget
          body: Stack(
            children: &lt;Widget&gt;[
              GoogleMap(
                mapType: _currentMapType,
                markers: _markers,
                onMapCreated: _onMapCreated,
                onCameraMove: _onCameraMove,
                initialCameraPosition: CameraPosition(
                  target: _center,
                  zoom: 11.0,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Row(mainAxisSize: MainAxisSize.min, children: &lt;Widget&gt;[
  
                      SizedBox(width: 16.0),
  
                      Builder(
                        builder: (context) =&gt; FloatingActionButton(
                            child: Icon(Icons.settings, size: 36.0),
                            backgroundColor: Colors.green,
                            onPressed: () {
  
                              sectionSettings.onSheetShowContents(context);       &lt;------
  
                            }),
                      ),
  
                      SizedBox(width: 16.0),
                      FloatingActionButton(
                        onPressed: _onDownloadTestPressed,
                        materialTapTargetSize: MaterialTapTargetSize.padded,
                        backgroundColor: Colors.green,
                        child: const Icon(Icons.autorenew, size: 36.0),
                      ),
  
                      SizedBox(width: 16.0),
  
                      Builder(
                        builder: (context) =&gt; FloatingActionButton(
                            child: Icon(Icons.help, size: 36.0),
                            backgroundColor: Colors.green,
                            onPressed: () {
  
                              sectionAbout.onSheetShowContents(context);       &lt;------
  
                            }),
                      ),
  
                      SizedBox(width: 16.0),
  
                      FloatingActionButton(
                        onPressed: _onDBActions,
                        materialTapTargetSize: MaterialTapTargetSize.padded,
                        backgroundColor: Colors.green,
                        child: const Icon(Icons.change_history, size: 36.0),
                      ),
                    ])),
              ),
            ],
          ),
        ),
      );
    }
  }
  
  
  
  
  </code></pre>
  
  <p><strong>Settings.dart</strong></p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:flutter_app/db_manager.dart' as db_manager;
  
  class SectionSettings {
  
    int mapTypeView = 0;
  
    void onSheetShowContents(Context context) {
  
      showModalBottomSheet(
        //showBottomSheet(
          context: context,
          builder: (context) {
            return ListView(
              padding: EdgeInsets.all(15.0),
              children: &lt;Widget&gt;[
                ListTile(
                  title: Text("Map Settings"),
                  selected: true,
                ),
  
                Divider(),
  
                Row(
                  mainAxisAlignment:
                  MainAxisAlignment.spaceEvenly,
                  children: [
                    Column(
                      children: &lt;Widget&gt;[
                        Text("Map View"),
                      ],
                    ),
                    Column(
                      children: &lt;Widget&gt;[
                        Row(
                          children: &lt;Widget&gt;[
                            ChoiceChip(
                              label: Text("Normal Map"),
                              selected: mapTypeView == 0,
                              onSelected: (value) {
                                setState(() {
                                  mapTypeView = 0;
                                  _currentMapType =
                                      MapType.normal;
                                });
                              },
                            ),
                            SizedBox(width: 8),
                            ChoiceChip(
                              label: Text("Satelite Map"),
                              selected: mapTypeView == 1,
                              onSelected: (value) {
                                setState(() {
                                  mapTypeView = 1;
                                  _currentMapType =
                                      MapType.satellite;
                                });
                              },
                            ),
                          ],
                        ),
                      ],
                    )
                  ],
                ),
  
  
              ],
              // ),
            );
          });
    }
  }
  </code></pre>
  
  <p>Notice how I use <code>&lt;OtherDartFileName&gt;.onSheetShowContents();</code> and that code is moved to <code>&lt;OtherDartFileName&gt;</code> rather than have a huge section here in the main dart file.</p>
  
  <p>This has introduced a problem, where I cannot modify the <code>State</code> of the Google Map from within this Bottom Sheet as it has no reference (and I can't seem to pass one along) of the main app state.</p>
  
  <ul>
  <li><p>I want to have a Bottom Sheet that contains a button that toggles Normal View and Satellite View on the main Map (and eventually other options)</p></li>
  <li><p>Have I structured this project completely incorrectly, or can I just reference the Map state somehow?</p></li>
  </ul>
  
  <p>I also have separate <code>.dart</code> files for one SQFlite instance and managing all DB operations. Coding for android and will be pushing to iOS eventually.</p>
  
  <p>Many thanks</p>