Transition absolute Positioned Containers inside a Stack

[taco.p...@gmail.com]

Hello,

I have a question about Flutter and animation.

I have a list of absolute Positioned Containers inside a Stack:

child: new Container(
  // grey box
  child: new Stack(
      children: items
          .map(
            (item) => new Positioned(
                // red box
                child: new Container(
                  child: new Text(
                    item.Title,
                    style: bold24Roboto,
                  ),
                  padding: new EdgeInsets.all(4.0),
                ),
                left: (item.X * media.size.width) + _x,
                top: item.Y + _y,
                width: media.size.width,
                height: item.Height),
          )
          .toList()),
)))

The _x and _y fields are part of my State, which I update with setState() on gestures.drags

At the end of a drag, I want to Animate the _x variable to a certain position. After reading https://flutter.io/animations/ I'm not entirely sure how to approach that. (Maybe PositionedTransition?)

My gesture code looks like this:

onVerticalDragUpdate: (details) {
  setState(() {
    _y += details.delta.dy;
  });
},
onHorizontalDragUpdate: (details) {
  setState(() {
    _x += details.delta.dx;
  });
},
onHorizontalDragEnd: (details) {
  var width = media.size.width * -1;
  num n = _x / width;

  // This is instant, but I want to transition this
  setState(() => _x = n.round() * width);
},

I'd appreciate input.

[Ian Hickson]

AnimatedPositioned might be helpful, if I understand what you are describing correctly.

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

--
Ian Hickson

😸

[Taco Perquin]

I ended up not using an AnimatedPositioned, but instead used an AnimationController to set the _x field  value instead of setting the _x field directly.

:

controller = new AnimationController.unbounded(vsync:  this)..addListener(() {
  setState(() {
    _x = controller.value;
  });
});

Gesture code:

onHorizontalDragUpdate: (details) {
  controller.value = _x + details.delta.dx;

},
onHorizontalDragEnd: (details) {
  var width = media.size.width * -1;

  var newScrollOffset;

  num n = _x / width;

  if(details.primaryVelocity < 100) {
    newScrollOffset = n.ceil() * width;
  } else if(details.primaryVelocity > -100) {
    newScrollOffset =  n.floor() * width;
  }
  else {
    newScrollOffset =  n.round() * width;
  }

  controller.animateTo(newScrollOffset, duration: const Duration(milliseconds: 150));
}