Flutter Animation : AnimatedContainer

mobile academy


import 'dart:math';

import 'package:flutter/material.dart';

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

  @override
  State<ContainerAnimation> createState() => _ContainerAnimationState();
}

class _ContainerAnimationState extends State<ContainerAnimation> {
  double _width = 50;
  double _height = 50;
  Color _color = Colors.red;
  final Random _random = Random();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            const SizedBox(height: 50,),

            AnimatedContainer(
              curve: Curves.bounceIn,
              decoration: BoxDecoration(
                color: _color,
                borderRadius: BorderRadius.circular(8)
              ),
              duration: const Duration(milliseconds: 800),
              width: _width,
              height: _height,             
              
            ),

            const SizedBox(height: 8,),

            ElevatedButton(
              onPressed: () {
                setState(() {
                  _width = _random.nextDouble() * 150;
                  _height = _random.nextDouble() * 150;
                  _color = Color.fromRGBO(
                    _random.nextInt(256), 
                    _random.nextInt(256), 
                    _random.nextInt(256), 
                    1,
                  );
                });                

              }, 
              child: const Text('Click Me!'),
            )

          ],
        ),
      ),
    );
  }
}
Select your currency
INR Indian rupee