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.
