AnimatedContainer duration property does not effect the animation of container in Flutter

Question

I am trying to resize the animated container with slow speed. I have passed Duration(seconds: 40000) to the duration property of AnimatedContainer. But When I increase or decrease the width of the container it increases and decreases within a second. Looks like this duration property don't have any effect on the animated container.

[The button in the gridview are opening and closing so fast no matter how long the duration is.]

find the code below.

class ProductScreen extends StatefulWidget {
  ProductScreen({super.key});

  @override
  State<ProductScreen> createState() => _ProductScreenState();
}

class _ProductScreenState extends State<ProductScreen>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: GridView.builder(
            itemCount: 8,
            padding: const EdgeInsets.only(left: 20, right: 20),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                mainAxisSpacing: 20, crossAxisCount: 2, crossAxisSpacing: 20),
            itemBuilder: (c, i) => ProductItemWidget(index: i)),
      ),
    );
  }
}

class ProductItemWidget extends StatefulWidget {
  final int index;
  const ProductItemWidget({super.key, required this.index});

  @override
  State<ProductItemWidget> createState() => _ProductItemWidgetState();
}

class _ProductItemWidgetState extends State<ProductItemWidget> {
  double _currentWidth = 80;
  double _targetWidth = 150;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () {
            setState(() {
              var a = _targetWidth;
              _targetWidth = _currentWidth;
              _currentWidth = a;
            });
          },
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              AnimatedContainer(
                curve: Curves.easeInCubic,
                alignment: Alignment.centerRight,
                duration: const Duration(seconds: 4000),
                child: Container(
                    decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(20)),
                    width: _targetWidth,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(_targetWidth == 80 ? "close" : "Open"),
                    )),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Answer 1

class ProductScreen extends StatefulWidget {
  ProductScreen({super.key});

  @override
  State<ProductScreen> createState() => _ProductScreenState();
}

class _ProductScreenState extends State<ProductScreen>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: GridView.builder(
            itemCount: 8,
            padding: const EdgeInsets.only(left: 20, right: 20),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                mainAxisSpacing: 20, crossAxisCount: 2, crossAxisSpacing: 20),
            itemBuilder: (c, i) => ProductItemWidget(index: i)),
      ),
    );
  }
}

class ProductItemWidget extends StatefulWidget {
  final int index;
  const ProductItemWidget({super.key, required this.index});

  @override
  State<ProductItemWidget> createState() => _ProductItemWidgetState();
}

class _ProductItemWidgetState extends State<ProductItemWidget> {
  double _currentWidth = 80;
  double _targetWidth = 150;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () {
            setState(() {
              var a = _targetWidth;
              _targetWidth = _currentWidth;
              _currentWidth = a;
            });
          },
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              AnimatedContainer(
                curve: Curves.easeInCubic,
                alignment: Alignment.centerRight,
                duration: const Duration(seconds: 4000),
                width: _targetWidth,
                child: Container(
                    decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(20)),
                   
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(_targetWidth == 80 ? "close" : "Open"),
                    )),
              ),
            ],
          ),
        ),
      ],
    );
  }
}