Qries

Subscribe Us

Advertisement

Button Animation

 

Code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Button1 extends StatefulWidget {
  @override
  _Button1State createState() => _Button1State();
}

class _Button1State extends State<Button1> {
  bool isPressed = true;
  bool isPressed2 = true;
  bool isHighlighted = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            InkWell(
              highlightColor: Colors.transparent,
              splashColor: Colors.transparent,
              onTap: () {
                setState(() {
                  isPressed = !isPressed;
                });
              },
              child: AnimatedContainer(
                height: 70,
                width: 70,
                curve: Curves.fastLinearToSlowEaseIn,
                duration: Duration(milliseconds: 300),
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(isPressed ? 0.2 : 0.0),
                      blurRadius: 20,
                      offset: Offset(5, 10),
                    ),
                  ],
                  color:
                      isPressed ? Colors.white : Colors.black.withOpacity(0.1),
                  shape: BoxShape.circle,
                ),
                child: Icon(
                  Icons.favorite,
                  color: isPressed ? Colors.red : Colors.grey,
                  size: 40,
                ),
              ),
            ),
            InkWell(
              highlightColor: Colors.transparent,
              splashColor: Colors.transparent,
              onHighlightChanged: (value) {
                setState(() {
                  isHighlighted = !isHighlighted;
                });
              },
              onTap: () {
                setState(() {
                  isPressed2 = !isPressed2;
                });
              },
              child: AnimatedContainer(
                margin: EdgeInsets.all(isHighlighted ? 0 : 2.5),
                height: isHighlighted ? 70 : 60,
                width: isHighlighted ? 70 : 60,
                curve: Curves.fastLinearToSlowEaseIn,
                duration: Duration(milliseconds: 300),
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.2),
                      blurRadius: 20,
                      offset: Offset(5, 10),
                    ),
                  ],
                  color: Colors.white,
                  shape: BoxShape.circle,
                ),
                child: isPressed2
                    ? Icon(
                        Icons.favorite_border,
                        color: Colors.black.withOpacity(0.6),
                        size: 40,
                      )
                    : Icon(
                        Icons.favorite,
                        color: Colors.pink.withOpacity(1.0),
                        size: 40,
                      ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Post a Comment

0 Comments