How to move container when bottom sheet open in flutter

I have one home screen. On this screen, there is one movable container and one floating button. When I click on this button, it should open the bottom sheet model. When the bottom sheet model is opened, I need the home screen container to move. How can I solve this?

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool _bottomSheetVisible = false;
  double _containerPositionX = 0.0;
  double _containerPositionY = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Moveable Container'),
      ),
      body: Stack(
        children: [
          Positioned(
            left: _containerPositionX,
            top: _containerPositionY,
            child: GestureDetector(
              onPanUpdate: (details) {
                setState(() {
                  _containerPositionX += details.delta.dx;
                  _containerPositionY += details.delta.dy;
                });
              },
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Move Me',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _bottomSheetVisible = true;
          });
          showModalBottomSheet(
            context: context,
            builder: (BuildContext context) {
              return Container(
                height: 200,
                color: Colors.white,
                child: Center(
                  child: Text('Bottom Sheet Content'),
                ),
              );
            },
          ).whenComplete(() {
            setState(() {
              _bottomSheetVisible = false;
            });
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

I have one home screen. On this screen, there is one movable container and one floating button. When I click on this button, it should open the bottom sheet model. When the bottom sheet model is opened, I need the home screen container to move. How can I solve this?

If you want to move the Container when the sheet is open, you should use showBottomSheet instead of showModalBottomSheet because the last one blocks the UI while the sheet is open.

Result

Code

class _HomeScreenState extends State<HomeScreen> {
  bool _bottomSheetVisible = false;
  double _containerPositionX = 0.0;
  double _containerPositionY = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Moveable Container'),
      ),
      body: Stack(
        children: [
          Positioned(
            left: _containerPositionX,
            top: _containerPositionY,
            child: GestureDetector(
              onPanUpdate: _bottomSheetVisible
                  ? (details) {
                      setState(() {
                        _containerPositionX += details.delta.dx;
                        _containerPositionY += details.delta.dy;
                      });
                    }
                  : null,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: const Center(
                  child: Text(
                    'Move Me',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
      // I added a Builder here because the `showBottomSheet` needs a Scaffold as ancestor
      floatingActionButton: Builder(builder: (context) {
        return FloatingActionButton(
          onPressed: () {
            setState(() {
              _bottomSheetVisible = true;
            });
            final sheetController = showBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: 200,
                  color: Colors.white,
                  child: const Center(
                    child: Text('Bottom Sheet Content'),
                  ),
                );
              },
            );

            sheetController.closed.whenComplete(() {
              setState(() {
                _bottomSheetVisible = false;
              });
            });
          },
          child: const Icon(Icons.add),
        );
      }),
    );
  }
}