Using a Stack within a PositionedTransition

user_961139 0
Viewed 669

I am trying to animate some widgets using a PositionedTransition and getting some odd behaviour. The child of the PositionedTransition is a Stack as well. I created a sample to compare behaviour of the simple Positioned widget and the PositionedTransition widget:

  @override
  Widget build(BuildContext context) {
    Animation<RelativeRect> transition = RelativeRectTween(
            begin: RelativeRect.fromSize(
                Rect.fromLTWH(0, 0, 100, 100), Size(100, 100)),
            end: RelativeRect.fromSize(
                Rect.fromLTWH(50, 50, 100, 100), Size(100, 100)))
        .animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));

    return Stack(children: [
      PositionedTransition(rect: transition, child: getCircles()),
      Positioned(top: 50, right: 50, child: getCircles())
    ]);
  }

I would expect both widgets to look the same, although one static and the other is animated. But this is not the case if you look at this DartPad: Full working DartPad example

Anyone any idea what is going on?

flutter
1 Answers

You can copy paste run full code below
In this case, you can use Stack wrap Center and Positioned
code snippet

Stack(children: [
      ConstrainedBox(
          constraints: BoxConstraints(maxWidth: 100, maxHeight: 100),
          child: DecoratedBox(
            decoration: BoxDecoration(
              border: Border.all(),
              color: Colors.green,
              borderRadius: BorderRadius.circular(50),
            ),
            child: Stack(
              children: [
                Center(
                    child: Text(
                  "circle",
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                )),
                Positioned(
                    bottom: 0,
                    right: 0,

working demo

enter image description here

full code

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
    );
    _controller.duration = Duration(seconds: 2);
    _controller.addListener(() => setState(() {}));
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _controller.forward();
    });
  }

  @override
  Widget build(BuildContext context) {
    Animation<RelativeRect> transition = RelativeRectTween(
            begin: RelativeRect.fromSize(
                Rect.fromLTWH(0, 0, 100, 100), Size(100, 100)),
            end: RelativeRect.fromSize(
                Rect.fromLTWH(50, 50, 100, 100), Size(100, 100)))
        .animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));

    return Stack(children: [
      PositionedTransition(rect: transition, child: getCircles()),
      Positioned(top: 50, right: 50, child: getCircles())
    ]);
  }

  Widget getCircles() {
    return Stack(children: [
      ConstrainedBox(
          constraints: BoxConstraints(maxWidth: 100, maxHeight: 100),
          child: DecoratedBox(
            decoration: BoxDecoration(
              border: Border.all(),
              color: Colors.green,
              borderRadius: BorderRadius.circular(50),
            ),
            child: Stack(
              children: [
                Center(
                    child: Text(
                  "circle",
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                )),
                Positioned(
                    bottom: 0,
                    right: 0,
                    child: ConstrainedBox(
                        constraints:
                            BoxConstraints(maxWidth: 40, maxHeight: 40),
                        child: DecoratedBox(
                          decoration: BoxDecoration(
                            border: Border.all(),
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Center(
                              child: Text(
                            "mini",
                            style: TextStyle(
                                fontSize: 12, fontWeight: FontWeight.bold),
                          )),
                        ))),
              ],
            ),
          )),
    ]);
  }
}
user_21795710
Related