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

Question

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
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),
),
],
),
),
);
}
}

Answer 1

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),
),
],
),
),
);
}
}

Answer 2

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!,
),
],
),
),
);
}
}