How to center the anchor point of a shape in Flutter?

user_15574325 0
Viewed 47

I have a continer whose length and width are 0, but with the animation, I change its length and width to 200. The problem is that when it starts to grow, it grows from the bottom and does not grow from the middle. I want to know how to place its anchor point in the middle. Working with after effects, they will understand by seeing this image

enter image description here

For example, in the code below, the circle starts growing from the bottom, while I want it to start growing from the middle point of the circle:

class MyWidget extends StatefulWidget {
const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin {
  late Animation<double> width;
  late AnimationController controller;

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

    controller =
        AnimationController(duration: Duration(seconds: 2), vsync: this);
    width = Tween<double>(begin: 0, end: 200).animate(controller);
    width.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(50),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            ElevatedButton(
                onPressed: () {
                  controller.forward();
                },
                child: Text('a')),
            Container(
              width: width.value,
              height: width.value,
              decoration:
                  BoxDecoration(shape: BoxShape.circle, color: Colors.black),
            ),
          ],
        ),
      ),
    );
  }
}
flutter
2 Answers
class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin {
  late Animation<double> width;
  late AnimationController controller;
  Tween<double> animation = Tween<double>(begin: 0, end: 200);
  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(duration: Duration(seconds: 2), vsync: this);
    width = animation.animate(controller);
    width.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(50),
        child: Column(
//           mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            ElevatedButton(
              onPressed: () {
                controller.forward();
              },
              child: Text('a'),
            ),
            SizedBox(height: animation.end!-width.value/2),
            Container(
              width: width.value,
              height: width.value,
              decoration:
                  BoxDecoration(shape: BoxShape.circle, color: Colors.black),
            ),
          ],
        ),
      ),
    );
  }
}
user_153981710

I believe you have a positioning issue. I moved the circle a little bit and now it seems that it starts to grow from the center. Please let me know if this code fixes your issue:

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  late Animation<double> width;
  late AnimationController controller;

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

    controller = AnimationController(duration: Duration(seconds: 2), vsync: this);
    width = Tween<double>(begin: 0, end: 200).animate(controller);
    width.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
                onPressed: () {
                  controller.forward();
                },
                child: Text('a')),
            AnimatedContainer(
              width: width.value,
              height: width.value,
              decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black),
              duration: controller.duration!,
            ),
          ],
        ),
      ),
    );
  }
}
user_71568190
Related