if bottom sheet open that time how to move back screen container in flutter

54 Views Asked by At

When double tap on image container that time open bottom sheet model and alternative container is show.

when bottom sheet open that time my alternative container show but i have to move this alternative container also how to move using gesture to alternative container.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class MovableImageBox extends StatefulWidget {
  late final _MovableImageBoxState currentWidget;
  int index;

  MovableImageBox({required this.index});

  @override
  _MovableImageBoxState createState() {
    _MovableImageBoxState currentState = _MovableImageBoxState();
    this.currentWidget = currentState;
    return currentWidget;
  }
}

const ballDiameter = 15.0;
const rotateIconSize = 30.0;

class _MovableImageBoxState extends State<MovableImageBox> {
  double width = 300;
  double height = 200.0;
  double aspectRatio = 200 / 300;
  bool _isSelected = true;
  double top = 100;
  double left = 100;
  bool _showAlternateContainer = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [

      Positioned(
        top: top,
        left: left,
        child: GestureDetector(
          onTap: () {
            for (var i = 0; i < GlobalState.movableAllWidgets.length; i++) {
              print("_addMovableTextBox $i");
              GlobalState.movableAllWidgets[i].currentWidget
                  .updateIsSelected(false);
            }
            setState(() {
              _isSelected = true;
              GlobalState.selectedIndex = widget.index;
              print("index = ${GlobalState.selectedIndex}");
            });
          },
          onPanDown: (details) {
            print("down time width =$width");
            print("down time height =$height");
            for (var i = 0; i < GlobalState.movableAllWidgets.length; i++) {
              print("_addMovableTextBox $i");
              GlobalState.movableAllWidgets[i].currentWidget
                  .updateIsSelected(false);
            }
            setState(() {
              FocusScope.of(context).unfocus();
              _isSelected = true;
            });
          },
          onPanUpdate: (details) {
            setState(() {
              top += details.delta.dy;
              left += details.delta.dx;
            });
          },
          onDoubleTap: () {
            _showBottomSheet();
            _showAlternateContainer = true;
          },
          child: Container(
            height: height,
            width: width,
            padding: EdgeInsets.all(2.0),
            decoration:
            BoxDecoration(
              color: Colors.transparent,
              border: Border.all(
                width: 2,
                color: _isSelected ? Colors.black : Colors.transparent,
              ),
            ),

            child: ClipRect(
              child: Align(alignment: Alignment.topCenter,
                child: Image.asset(
                  'images/rose1.png',
                  width: width,
                  height: height,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          // ),
        ),
      ),

      if ( _showAlternateContainer)
        Positioned(
          top: top,
          left: left,
          child: GestureDetector(
            onPanUpdate: (details) {
              if (!_showAlternateContainer) {
                setState(() {
                  top += details.delta.dy;
                  left += details.delta.dx;
                  print("container  move");
                });
              }
            },

            child: Container(
                height: height - 20,
                width: width - 20,
                // color: Colors.transparent,
              decoration:
              BoxDecoration(
                color: Colors.transparent,
                border: Border.all(
                  width: 2,
                  color: _isSelected ? Colors.black : Colors.black,
                ),
              ),
                child: Center(
                  child: Text(
                    'Alternate Container',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
          ),
        ),
           

  void _showBottomSheet() {
    setState(() {
      GlobalState.isBottomSheetVisible.value = true;
      _showAlternateContainer = true;
    });
    showModalBottomSheet(
      context: context,
      barrierColor: Colors.black.withAlpha(50),
      builder: (BuildContext context) {
        return Container(
          height: 230,
          child: Center(
            child: Text("This is a bottom sheet"),
          ),
        );
      },
    ).whenComplete(() {
      print("${GlobalState.isBottomSheetVisible}");
      setState(() {
        GlobalState.isBottomSheetVisible.value = false;
            _showAlternateContainer = false;

      });
      print("${GlobalState.isBottomSheetVisible}");
    });
  }



When double tap on image container that time open bottom sheet model and alternative container is show.

when bottom sheet open that time my alternative container show but i have to move this alternative container also how to move using gesture to alternative container.

enter image description here

0

There are 0 best solutions below