Я хочу создать перетаскиваемый круг, который может двигаться только по кольцу. Нравится
Я думаю, что сначала нужно создать стек. Этот стек будет иметь двух дочерних элементов. Сначала создайте Контейнер и придайте ему форму круга, а его дочерним элементом будет GestureDetetor. И, во-вторых, еще один контейнер, который также имеет форму круга и имеет меньший радиус (я подумал, что это может скрыть область GestureDetector, которую я не хочу активировать). любые жесты).
Мой код похож на
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 200.0,
height: 200.0,
padding: EdgeInsets.all(1.0),
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
child: Builder(
builder: (context) {
final handle = GestureDetector(
onPanUpdate: _panHandler,
child: Icon(
Icons.arrow_drop_down_circle,
size: 30.0,
),
);
return AnimatedBuilder(
animation: valueListener,
builder: (context, child) {
return Align(
alignment: Alignment(
(valueListener.value[0] * 2 - 1),
(valueListener.value[1] * 2 - 1),
),
child: child,
);
},
child: handle,
);
},
),
),
Container(
height: 180.0,
width: 180.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.green,
),
),
],
);
}
Однако этот код вообще не может ограничивать круг позиции...
1 ответ
Вы можете использовать Transform.rotate. У него есть свойство origin, которое поможет вам повернуть виджет со смещением. Все, что вам нужно сделать, это соответствующим образом обновить угол на Panupdate. Ниже приведен код, который я использовал для создания этого
Transform.rotate(
origin: Offset(125, 0),
angle: torad(angle), //function to convert degree to radians
child: GestureDetector(
onPanUpdate: (dragUpdateDetails) {
BlocProvider.of<ABloc>(context)
.add(Dragged()); //bloc event to update the position of draggable object as per your convenience
},
child: Container(
height: 30,
width: 30,
child: CircularWidget(),
color: Colors.transparent),
),
),